Chrome の console.log にスタイルを適用する方法

詳細はここに載ってます。 Console API Reference

console.log("%cMy name is...", "font-size: 2em");

こんな感じで %c を置くことで、次のパラメータに書いたスタイルが適用されるみたいです。

my name is...

console.log("%cMy name is...%cturusuke", "font-size: 2em", "color: orange; font-weight: bold; font-size: 4em");

こういう風に書くことで別々なスタイルを当てることもできるみたい。

スクリーンショット 2013-12-08 3.25.44

Chrome Logger へ応用

Chrome Logger を使うとサーバーサイドのプログラムから console へ値を渡して出力させることができます。

Chrome logger

今回はこれを使って、先ほどのようにスタイルをつけて出力させるようにしてみます。

include_once("ChromePhp.php");

function log_success($debug){
    ChromePhp::log("%csuccess","line-height: 3;border-radius: 8px;background-image: linear-gradient(-180deg, #56B928 0%, #2B7611 100%);border: 1px solid #75C82F;box-shadow:inset 0px 0px 7px 0px #5E8A21;padding: .5em; color:white;",$debug);
}

function log_warning($debug){
    ChromePhp::log("%cwarning","line-height: 3;padding: .5em;color:white;border-radius: 8px;background-image: linear-gradient(-180deg, #F3C821 0%, #CEB118 100%);border: 1px solid #D4B51A;box-shadow:inset 0px 0px 7px 0px #5E8A21;",$debug);
}

function log_error($debug){
    ChromePhp::log("%cerror","line-height: 3;padding: .5em;color:white;border-radius: 8px;background-image: linear-gradient(-180deg, #B94128 0%, #762711 100%);border: 1px solid #892B15;box-shadow:inset 0px 0px 7px 0px #5E8A21;",$debug);
}

log_success, log_warning, log_error と3つの関数を作っています。
スタイルの設定はこれらの中で行っているので、毎回書かなくても済みます。

log_success("情報取得成功!!");
log_success("画像合成成功!!");
log_success("投稿成功!!");

log_error("2回目の投稿失敗!!");

log_warning("値が10より小さい");
log_warning("true が返ってきていない");
log_warning("成功!!");

log_error("致命的なエラー");

log_success("成功!!");
log_success("成功!!");

上のように書いて実行してみます。

下記のように console に出力されました

logger

見やすくなって、デバッグが捗りそうですね。