npm debugのブラウザでの使い方

何故npm debugなのか

• window.console.logはブラウザでしか動作せず、サーバサイドで資産を再利用しにくい
• プロダクションでログを出さない時に空の関数を代入とか泥臭い方法が必要
• 一部のログを非表示にしたりできない
• 謎にカラフル
• IE

導入

npm i -s debug

コードでの利用方法

window.myDebug= require("debug"); // ログのON/OFFの設定に使用(なくても良い)
var fooLog = require("debug")("foo"); // 名前にfooを指定
var piyoLog = require("debug")("bar:piyo"); // 名前にbar名前空間のpiyoを指定

fooLog("test log!"); // 'foo test log! +0ms'と表示
piyoLog("test piyo!"); // 'bar:piyo test piyo! +0ms'と表示

表示/非表示　設定方法

このままではログは表示されていないと思います。表示するための設定を行います。

先ほど定義したmyDebugを使用

myDebug.enable("*"); // すべて表示

localStorageを直接触る

上の例では、windowにdebugを代入しておきenableを叩きましたが、面倒なので直接設定するほうがらくだと思います。

localStorage.debug = "*"; // すべて表示
localStorage.debug = "*,-foo"; // fooのみ非表示
localStorage.debug = "*,-piyo:*"; // piyo名前空間のみ非表示
localStorage.debug = ""; // すべて非表示

Tips. socket-ioなどのログが鬱陶しい時

これが、console.logでは受けれない大きな恩恵だと思います。関連名前空間などをすべて除外できます。

localStorage.debug = "*,-engine.io-client:*,-socket.io-client:*,-socket.io-client,-socket.io-parser"

もちろんコードでこの設定を行うこともできます。その際は、require("debug").enable("")などを叩いてください。

---

console.logよりは面倒かもしれないですが、積極的に使って欲しいです。