JavaScriptプログラムをデバッグする際、 console.log() を利用する機会は多いと思います。今回は、chromeでconsoleをもっと便利に使うための小技の一部をまとめてみました。
console.log だけではもったいない
プログラムの途中の値やオブジェクトをログとして表示する方法を一気に紹介します。実は色々充実しているのです！
以下に紹介するものは Google Chromeで「
Ctrl+Shift+I」キーを押してConsoleを開いて、試すことができます。
console.log
console.debug
console.error
エラーらしく赤色で表示されます。
console.info
インフォメーションらしく「i」アイコンが付加されて表示されます。
console.dir
JSONオブジェクトなどを表示するときにかなり便利そう。
console.group と console.groupEnd
Consoleに表示する内容をグループ化できる。一連の処理のデバッグが捗りそうです。
console.groupでグループ化を開始、console.groupEndで終了することができます。Console画面での入力時に改行をしたい場合は「Shift+Enter」キーを押せばOKです。
console.clear
console.clear()を実行すると、Consoleに表示された内容を消去することができます。
console.log の便利なTips
実は複数の引数を与えることができる
C言語のprintfのように %s %d %i %f が使える
これは便利。
まさかの、リンクを張れる
「%d」などのプレースホルダーとおなじ感覚で、「%o」にURLを与えるとハイパーリンクとして表示されます。
URLをクリックすると、新しいタブが開きページが表示されます。
まさかまさかの、文字の色や大きさをカスタマイズできる
なんか凄すぎる気がします。「%c」でスタイルを指定します。ちょっとだけ使い方にクセがあるかも。
構文：
console.log("%c表示する内容", "style");
使用例：
Polymerのページでもこれが使われていました。「\n」を使った「改行」も有効のようです。
console.log("%cWelcome to Polymer!\n%cweb components are the <bees-knees>",
"font-size:1.5em;color:#4558c9;",
"color:#d61a7f;font-size:1em;");
ほかにも・・・
Consoleの便利機能は以下のページにまとめられているようです。（英語です）
