2014/01/20

JavaScriptのデバッグが捗る!コンソールにログを出力する方法

JavaScriptのデバッグが捗る!コンソールにログを出力する方法

目次

変数やオブジェクトの中身を確認するには

JavaScriptで開発中に変数やオブジェクトの値を確認する際に以下のようにしてalertを使用している方も多いと思います.

alert("出力したい変数など");

しかし,数が多くなるといちいちダイアログを閉じることが鬱陶しくなってきてしまいます.

そこで,Webブラウザの開発ツールのコンソールを立ち上げ,出力することで,各種ログを確認できます.

例としてChromeでのコンソールの立ち上げ方法を紹介します.
デバッグしたいWebページを表示した状態でF12キーを押下し,上部のメニューからconsoleを選択します.

console.~の使い方

コンソールにログを出力するための各種メソッドと,簡単な記述方法を紹介します

各種ログの出力

console.log(/*出力したい変数やメッセージ*/);

情報として出力

console.info(/*出力したい変数やメッセージ*/);

情報として出力します.出力結果は各ブラウザによって変化しますが,アイコン等が追加されます.

警告として出力

console.warn(/*出力したい変数やメッセージ*/);

警告として出力します.出力結果は各ブラウザによって変化しますが,アイコン等が追加されます.

エラーとして出力

console.error(/*出力したい変数やメッセージ*/);

エラーとして出力します.出力結果は各ブラウザによって変化しますが,アイコン等が追加されます.

オブジェクトの内容を出力

console.dir(/*出力したいオブジェクト*/);

DOMの内容を出力

console.dirxml(/*出力したいDOM*/);

実行回数を出力

console.count(/*出力*/);

関数内に記述しておくと,実行回数が出力されます.

実行時間を計測し出力

console.time(/*識別名*/);
console.timeEnd(/*識別名*/);

time~timeEndまでの実行にかかる時間を出力します.識別名は同一のものを指定してください.

条件の判定と結果の出力

console.assert(/*条件*/,"/*出力したいメッセージ*/");

条件が偽の場合,メッセージを出力します.

呼び出し元の関数を出力

console.trace();

プロファイルの開始と終了

console.profile(/*識別名*/);
console.profileEnd(/*識別名*/);

profile~profileEndまでの処理にかかった時間を詳細に出力することが出来ます.
識別名は同一のものを指定してください.

グループ化して出力

console.group(/*識別名*/);
console.log("各種ログ情報")
console.groupEnd(/*識別名*/);

group~groupEndまでの各種メソッドがグループ化されて出力されます.
識別名は同一のものを指定してください.

まとめ

コンソールに変数やメッセージやログを表示することで,作成したプログラムのミスを容易に発見できるようになります.使いこなせば開発スピードアップ間違いないでしょう.

alertにウンザリしているなら,使ってみてはいかがでしょうか