source-mapを可視化する

source-mapは非常に期待のできる技術だが、軽く仕様を読んでもどのように動くのかよくわからない。そこで、souce-mapを可視化するツールを作ってみた。source-mapの処理にはmozillaのJavaScriptによる実装を使った。

左がオリジナルのソースコード、右がclosure compilerで最適化したコードである。具体的なコマンドラインオプションは以下のrepositoryのMakefile参照のこと。要素から要素への線はcanvasを利用した。ChromeFirefoxでのみ確認したので、他のブラウザではうまく表示できないかもしれない。

改良の余地はあるものの、とりあえずこれでデバッグできるようになった。