[Chrome]consoleで表示する文字列のスタイルを変更する[小技]

2013.04.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

コンソールのスタイルを変更

クライアント側のJavascriptでデバッグメッセージを出力させる場合、console.logを使用して表示します。
そのメッセージは開発/管理->Javascriptコンソールで出てくるウィンドウで確認することができます。
今回は、ここで表示するメッセージのスタイルを変更するライブラリを紹介します。

環境構築方法

今回使用した動作環境は以下のとおりです。

  • OS : MacOS X 10.7.5
  • ブラウザ : Chrome 26

log.jsを読み込んで使いましょう

コンソールにスタイルを適用させる方法は、ここにあるlog.jsをHTMLで読み込み、
log関数を使用して特定の記号で囲めばスタイルを適用させることができます。
log.jsをGithubから取得して、次のhtmlを作成しましょう。
このHTMLでは単にlog.jsとそれを使用するjsファイルを読ませるだけです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="log.js"></script>
    <script type="text/javascript" src="foo.js"></script>
    <title>hello</title>
</head>
<body>
hello
</body>
</html>

そして、log関数を使用するjsファイルは次のようになっています。

log('this is *italic*');
log('this word _bold_');
log('this word `code`');
log('this is red');

文字を「*」で囲むと、イタリック、「_」で囲むと太字、「`」で囲むとcode形式になります。
また、色を任意で指定することもできます。

上記コードをconsoleで見ると、次のようになります。
console

ちなみに、Chrome以外で実行すると、ちゃんと表示されないので注意してください。