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 を利用する。
開発コンソールの右下の設定アイコンから 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