JavaScriptのConsoleの様々な機能
この記事ではconsole.logだけではない、consoleの様々な便利な機能を紹介します。
同じテーマについて他に良い記事がいくつもあるのですが、自分の備忘録も兼ねて記事化しました。また、CodePenで動的に操作できるので静的なサイトよりも触って理解しやすいかと思いつつ、はてなブログに直接タグやスクリプトを埋め込んでも良かった気も。
CodePenによるデモ
まずは、ブラウザの開発者ツールでコンソールを開いてください。
その後、以下のCodePen内の各種ボタンを押下すると、ログがコンソールに追加されます。
See the Pen
Console catalog by Imai (@imai1)
on CodePen.
解説
CSSの適用
第二引数にCSSの文字列を与えると、%c以降のメッセージのスタイルを変更できます。
console.log("通常のメッセージ %cスタイル付きメッセージ", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
複数の%cと複数のスタイル文字列を与えると、スタイルを切り替えることも可能です。また、%よりも引数が多い場合は通常のメッセージとして処理されます。
console.log("複数のスタイル: %c赤 %cオレンジ", "color: red", "color: orange", "スタイルのないメッセージ");
オブジェクトや値の文字列置換
いわゆるフォーマット指定子で、ログの文字列に値を埋め込むことができます。
console.log("オブジェクトの値: %o", {string: "str", number: 10});
%oまたは%O：オブジェクトを埋め込みます。%dまたは%i：整数を埋め込みます。%.2dのような書式が使えます。%s：文字列を埋め込みます。%f：浮動小数点数を埋め込みます。%.2fのような書式が使えます。
特にオブジェクトに関しては、単に文字列化して埋め込むだけでなく、ブラウザ側の機能でプロパティの詳細を見ることができます。
また、埋め込みではなく単にオブジェクトを表示する場合はconsole.dirが使用可能です。
console.dir({string: "str", number: 10});
スタックトレースを表示
trace関数で、そのコードを実行した際のスタックトレースを表示できます。
console.trace();
スタックトレースとは、そのコードまでの関数呼び出しの履歴のことです。関数名だけでなくソースコードや行番号も合わせて表示してくれるので、デバッグ用途に非常に便利です。
時間を計測して表示
timeでタイマーを開始し、timeLog timeEndで開始からの経過時間を出力することができます。
console.time("回答時間"); alert("時間経過用ダイアログ"); console.timeLog("回答時間"); alert("時間経過用ダイアログ"); console.timeEnd("回答時間");
自前のタイマーを実装しなくとも簡単に利用できて便利です。
第一引数はタイマーの識別子で、複数の別々のタイマーを同時に走らせることもできます。
特定の条件を満たさない場合のみログを表示するアサーション
プログラムにおけるアサーション・アサートとは、常に真になるべき論理式を記述しておいて、プログラムの実行中に論理式が偽になったらメッセージを出力したり例外を出力したりする技法のことです。
例えば、通販サイトで商品の注文金額の合計を計算する際に、割引やクーポンの適用後に値がマイナスにならないか、など。
もし実行中にアサーションが偽になるケースが見つかったら、スタックトレースなどと合わせて原因を特定しデバッグを行います。
console.assert(true, "このメッセージは表示されません"); console.assert(false, "このメッセージは表示されます");
アサーションの具体的な動作は言語や処理系に依存しますが、JavaScriptのconsole.assertでは、論理式が偽のときにconsole.errorと同等のメッセージが出力されるようです。
メッセージのグルーピング
console.group()で、以降のメッセージを一段インデントしたグループにすることができます。console.groupEnd()で元に戻ります。
console.log("グループ外のメッセージ"); console.group("グループ１"); console.log("グループ１内のメッセージ"); console.group("グループ２"); onsole.log("グループ２内のメッセージ"); console.warn("グループ２内の警告"); console.groupEnd(); console.log("グループ１内のメッセージ"); console.groupEnd(); console.debug("グループ外のメッセージ");
数のカウント
console.count(カウンタ名);で数を数えることができます。タイマーと同様に自前の変数を用意しなくて良いところが便利です。console.countReset(カウンタ名)でリセットも可能です。
console.count("カウンタ１"); console.count("カウンタ１"); console.count("カウンタ２"); console.countReset("カウンタ１"); console.count("カウンタ１"); console.count("カウンタ２");
