source-mapは非常に期待のできる技術だが、軽く仕様を読んでもどのように動くのかよくわからない。そこで、souce-mapを可視化するツールを作ってみた。source-mapの処理にはmozillaのJavaScriptによる実装を使った。 左がオリジナルのソースコード、右がclosure compilerで最適化したコードである。具体的なコマンドラインオプションは以下のrepositoryのMakefile参照のこと。要素から要素への線はcanvasを利用した。ChromeとFirefoxでのみ確認したので、他のブラウザではうまく表示できないかもしれない。 demo repository 改良の余地はあるものの、とりあえずこれでデバッグできるようになった。
![source-mapを可視化する - Islands in the byte stream (legacy)](https://cdn-ak-scissors.b.st-hatena.com/image/square/56a9e60f96408d1e8769e8999740b6d83fc66464/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fg%2Fgfx%2F20120422%2F20120422145257.png)