SourceMapでminifyされたJavaScriptを元に戻してみた

当初の期待としては、CoffeeScriptコンパイルしたJavaScriptにSourceMapで元のCoffeeScriptヒモ付てそのままデバッグ出来るようになんないのかなー??て思ったんだけどなんか無理そうでした(結論)。

で、調査しはじめてみたんだけど全然情報なくてビビった。

CSS Selector Profiler, Source Mapping and Software Rendering « Peter Beverloo に情報がだいぶまとまってて超助かりました。
なんかWebKitの中の人なんじゃないのレベルで色々書かれててびっくりします。

Source Map Revision 3 Proposal - Google ドキュメント をざらーっと眺めてみたところで、JavaScript以外の言語にはなんか対応してなさそうだなーっていうのが分かってがっくり。字句解析した時に同じトークンになるような変換しか出来ないのかな?Base64 VLQとやらが全く理解できないのでよーわからんのやけど…。
CoffeeScriptとのマッピングはこのProposalでも言及されてて、Multi-level Mapping(多段マッピング?)とかって呼ばれるっぽい。

簡単に取りまとめると、圧縮されたjsのResponseHeaderに X-SourceMap: compiled.js.map みたいなのがあればいいみたい。
mapファイルの拡張子について規定はないっぽいですが、 compiled.js なら compiled.js.map がいんじゃね?みたく書いてあったのでそれに従うことにする。
試すには、Chrome 18 が必要らしいので、Chrome Canary Features For Developers - Google Chrome のCanaryBuild を利用する。


compiled.js 1つが参照されている状態。


開発コンソールの右下の設定アイコンから Script -> Enable source maps にチェックを入れます。


compiled.js が元の jquery と event.js と ui.js に展開されてデバッグとか出来るます!

でも、まだうまく動かなくてブレークポイントが1行ずれたりするんすよね…(´・ω・`)

サンプルプロジェクトはこちら
https://github.com/vvakame/SourceMapSample

WebServer.java か webserver.rb を実行すれば試せるはず。


参考資料

http://code.google.com/intl/ja/closure/compiler/docs/inspector.html
http://code.google.com/codesearch#l5BkQmivP-Y/trunk/src/com/google/debugging/sourcemap/Base64VLQ.java