Google ChromeのJavaScriptコンソールでデバッグメッセージを出力する方法

Google ChromeのJavaScriptコンソールにデバッグメッセージを出力したい場合、コンソール機能が存在しない環境でもエラーが発生しないように、安全なスクリプトを記述するのがポイントです。

コンソール関数の存在チェックを行うスクリプト

以下のコードは、window.consoleオブジェクトが存在しない場合に空のオブジェクトを作成し、各メソッドが未定義の場合にのみ代替関数を定義しています。これにより、コンソールが利用できないブラウザでもエラーを起こさずに動作します。

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};

使用できる主な出力メソッド

上記のように、ログの種類に応じて以下の3つのメソッドを使い分けることができます。

console.log();
console.warn();
console.error();

• console.log()：一般的なログ情報を出力します。変数の中身や処理の経過確認など、日常的なデバッグで最もよく使われます。
• console.warn()：警告メッセージを表示します。Chromeのコンソールでは黄色いアイコン付きで表示され、潜在的な問題を知らせるのに適しています。
• console.error()：エラーメッセージを表示します。赤色で強調表示されるため、重大な問題の特定に役立ちます。

Consoleオブジェクトとは

Consoleオブジェクトは、ブラウザのデバッグコンソールへアクセスするための仕組みです。たとえばFirefoxでは「Webコンソール」に相当し、Google ChromeではDevTools（デベロッパーツール）内のコンソールパネルに出力されます。

開発時にはconsole.logで通常の出力を取得しつつ、注意喚起が必要な場面ではconsole.warn()を使って警告メッセージを表示すると、デバッグ作業がより効率的になります。