Hatena::ブログ(Diary)

@vvakame の日記

2012-01-28

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

| 00:55 | SourceMapでminifyされたJavaScriptを元に戻してみた - @vvakame の日記 を含むブックマーク

当初の期待としては、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 Browser のCanaryBuild を利用する。

f:id:vvakame:20120129004246p:image

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

f:id:vvakame:20120129004620p:image

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

f:id:vvakame:20120129004937p:image

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

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

サンプルプロジェクトはこちら

https://github.com/vvakame/SourceMapSample

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


参考資料

Error 404 (Not Found)!!1

Error 404 (Not Found)!!1

ku0522ku0522 2012/03/11 18:00 chromium側の中の人ですよー http://peter.sh/about/