2014-12-27 debugモジュールを使う

node.jsでデバッグコードを書くときはdebugをよく使っている。

一方で、ブラウザ向けのコードを書くときは普通にconsole.logを使っていて当然ながら常に出力されてしまうのだけど、 node.jsのように簡単に出力を切り替えたいと思いブラウザ版のdebugを使ってみた。

まずライブラリのダウンロードをする。

$ curl -O https://raw.githubusercontent.com/visionmedia/debug/master/dist/debug.js

HTMLは以下のようなものを書く。

<!DOCTYPE html>
<meta charset="utf-8">
<title>debug</title>
<script src="debug.js"></script>
<script>
  var log = debug('main');
  log('hello!');
</script>

このHTMLを開いて、ChromeのDevToolsを開いてコンソールを見ても何も出力されない。出力されるよう、コンソールで以下を実行してページをリロードする。

debug.enable('*');

出力させない場合は以下をコンソールから実行してページをリロードする。

debug.disable();

上記それぞれの関数が受け取る引数はnode.jsで使用する場合のDEBUG環境変数と同じものになるので、特定のログだけ表示したい場合はkey:*などでフィルタリングできる。

また、debug.enableで指定した値はlocalStorageにdebugというキーで保存される。debugはこのキーに保存された値を読み込んで出力の有無を切り替えているみたいだ。

ブラウザでも使用してみたら、やはりデバッグ出力の有無を簡単に切り替えて便利だった。今まで切り替えずにコメントアウトしたりそれを解除していたりしていて、かなり面倒だったのでどんどん使っていこうと思う。