クールすぎる新機能「SourceMap」で楽々Dartデバッグ

タイトルは釣りです。まだDartは対応してません。

Source MapというJavaScriptのデバッグのための仕様が提案されており、WebKitにこの機能が実装されたようです。これは、実行されるJSとそのオリジナルのソースコード*1をマッピングするデータを用意しておき、Chrome Inspectorなどのデバッガでオリジナルのソースコードを参照できるようにする仕組みです。
この仕組があれば、minifyされたJSはもちろんのこと、CoffeeScriptやDartのような別言語からJSにコンパイルする言語のデバッグが簡単になることが予想されます。

仕様としては、Closure Compilerのような処理系がソースコードをコンパイルするときにsource mapping fileを出力し*2、これをデバッガが参照して透過的にオリジナルのソースコードを参照する、というもののようです。コンパイル後のコードに以下のようなマジックコメントを書くことで、mappingファイルを参照します*3。

//@ sourceMappingURL=/path/to/file.js.map

この仕様、現在はまだドラフトですがもう試せます。FirefoxやWebkitの最新版に実装されているようです。手元で試すにはChrome Canary *4が簡単でしょう。

元のブログエントリによれば、debugger consoleの設定でsource map機能をonにして、以下のサイトを見よと書いてあります。実際にやってみるとたしかに元のソースで例外が上がっている様子が見れます。あまりに透過的なのでminifyされてないのではないかと思うくらいです。

これさえあれば、多言語をJavaScriptへ変換して実行するとデバッグが困難であるという欠点は軽減されるでしょう。JavaScriptの軛から逃れる日はもうそこまで来ています。

*1:これはJavaScriptに限らない

*2:see https://developers.google.com/closure/compiler/docs/inspector

*3:仕様ではHTTP headerにこのパスを書くこともできるようです。

*4:Chromeの新機能を試せるβ版で、正規版Chromeとは別のアプリケーションとしてインストールされます。