読者です 読者をやめる 読者になる 読者になる

#daiizメモ

フレンチフライ トリュフ塩仕立て

技術ネタはてブ数が多いごはん情報

スポンサーリンク

chrome の console が凄すぎる

JavaScriptプログラムをデバッグする際、 console.log() を利用する機会は多いと思います。今回は、chromeでconsoleをもっと便利に使うための小技の一部をまとめてみました。

f:id:daiiz:20140830225949p:plain

console.log だけではもったいない

プログラムの途中の値やオブジェクトをログとして表示する方法を一気に紹介します。実は色々充実しているのです!

以下に紹介するものは Google Chromeで「Ctrl+Shift+I」キーを押してConsoleを開いて、試すことができます。

console.log

f:id:daiiz:20140830211619j:plain

console.debug

f:id:daiiz:20140830212136j:plain

console.error

エラーらしく赤色で表示されます。

f:id:daiiz:20140830212440p:plain

console.info

インフォメーションらしく「i」アイコンが付加されて表示されます。

f:id:daiiz:20140830212705p:plain

console.dir

JSONオブジェクトなどを表示するときにかなり便利そう。

f:id:daiiz:20140830213113p:plain

console.group と console.groupEnd

Consoleに表示する内容をグループ化できる。一連の処理のデバッグが捗りそうです。

f:id:daiiz:20140830213625p:plain

console.groupでグループ化を開始、console.groupEndで終了することができます。Console画面での入力時に改行をしたい場合は「Shift+Enter」キーを押せばOKです。

console.clear

console.clear()を実行すると、Consoleに表示された内容を消去することができます。

f:id:daiiz:20140830214621p:plain

console.log の便利なTips

実は複数の引数を与えることができる

f:id:daiiz:20140830215033p:plain

C言語のprintfのように %s %d %i %f が使える

これは便利。

f:id:daiiz:20140830215732p:plain

まさかの、リンクを張れる

「%d」などのプレースホルダーとおなじ感覚で、「%o」にURLを与えるとハイパーリンクとして表示されます。

f:id:daiiz:20140830221944p:plain

URLをクリックすると、新しいタブが開きページが表示されます。

まさかまさかの、文字の色や大きさをカスタマイズできる

なんか凄すぎる気がします。「%c」でスタイルを指定します。ちょっとだけ使い方にクセがあるかも。

構文:
console.log("%c表示する内容", "style");

使用例:

f:id:daiiz:20140830222841p:plain

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;");

f:id:daiiz:20140830223349p:plain

ほかにも・・・

Consoleの便利機能は以下のページにまとめられているようです。(英語です)