Google ChromeのDevToolsではコンソールに文字を出力する際にinfo/log/errorなどで指定できます。それによって文字の色が変わるのですが、情報の意味も指定されてしまうのが難点です(特にエラー)。 単に文字色を変えるだけであればCLog.jsを使ってみましょう。コンソールに出る文字色が変わるとぐっと見やすくなるはずです。

CLog.jsの使い方

インストールはnpmまたはBowerが使えます。

npm install clog_js
bower install clog

次にCLogオブジェクトを作ります。

var options = {
    group: false,
    colors: {
        log: "#31f095",
        home: "#e86024",
        error: "#e22f2f",
        network: "#08bce9",
    }
}

var clog = new CLog(options);

後はclogを指定してログを出力するだけです。

clog.log('log', 'String log', 12345, 'Another String', { id: '1234'}, ['a','b', 'c'], true, false);

色を直接指定もできます。

clog.log('#52361f', parameters...);

CLog.jsを使えばコンソールのデバッグメッセージがカラフルになり、特に目立たせたい情報などが分かるようになります。特にグルーピングしておくことで関連するメッセージをすぐに見つけられるのではないでしょうか。

CLog.jsはnode/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

CVarisco/CLog.js: Small Javascript library to color and organize your console.log in Google Chrome !