読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

Source Mapsについて調べた

Web JavaScript CSS

いま話題のアレです、アレ。
いま携わってるプロジェクトの開発環境が特殊で、どうにもこうにも困ってたことがあって。
そこでこのSource Mapsが使えるんじゃなかろうか?と思った次第です!

Source Mapsの仕組み

ソースコードをMini/Unifyする時に、どのファイルとどのファイルをくっつけたかが後から追えるように、マップファイルを一緒に用意するというもの。
それだけでデバッグする時に、どこのファイルのどの行かまで追えるようになる、と。

今まではMini/Unifyされたファイルでデバッグなんてありえないと思ってたけど、この仕組を使えばそれも可能になりますね。

なんとJavaScriptだけじゃなくて、Sass/LessとかCoffeeScriptとかもOKらしい。

使い方

Mini/Unifyする

Closure compilerを実行するコマンドラインのオプションで指定するだけで良いらしい。

java -jar compiler.jar \ 
     --js myScript.js \
     --js myScript2.js \
     --create_source_map ./maps/myScripts-min.js.map \
     --source_map_format=V3 \
     --js_output_file ./all/myScripts-min.js

今はまだClosure compilerしか対応してないようです。

Source Maps対応にする

// myScripts-min.js
……
……
//@ sourceMappingURL=../maps/myScripts-min.js.map

というように、マップへのパスを記載するか

X-SourceMap: ../maps/myScripts-min.js.map

というヘッダをコンテンツ配信時に付加する必要がある、と。

ブラウザで見る

Chromeの場合はChromeDevToolsのオプションから、
[General] -> [Sources] -> [Enable source maps] にチェック

そしてページをリロードすると、あら不思議。
もちろんこのオプションをOffにしてる時は、マップファイルを取得しません。

実用的か

Twitterとか見てると割と好評ぽいですね。

開発環境でもMini/Unifyしたファイルを配信できる

本番環境と同じものを扱えるというのはメリットだと思います。
テンプレートの記述とかであっても、意識すべき部分が少しでも減るのは作業負荷軽減になりますもの。

CoffeeScriptとかSassとかそういう系

こういうプリコンパイル系のものをよりネイティブぽく扱えるようになるのは、便利になったと捉えて良いのかしら?
プロジェクトで生モノは使用しない!っていう人たちにとってはすごく便利そう。

個人的には

プロジェクトの規模やったり使ってるFw含め、環境によるところが多い気がする。
生のJsとかCssがメインな環境の場合、ちょっとファイルを修正したら即Mini/Unifyするのかというと、手動では絶対しないと思うのよね。
ファイル保存しただけでコンパイル→Mini/Unifyするサーバーサイドの仕組みとかもあるところにはあるらしいので、そういうトコで使いたいかなー。

調べてみて、そんなに自分を助けてくれなさそうな事実に気付いて驚愕している!

参考リンクたち

実際に試してみたい方はこちら

参考:font dragr | Drag and drop font testing

他にはjQueryのページとかでも見れるらしいです。

詳細なものとか

参考:Source Map Revision 3 Proposal - Google ドライブ

本家のドキュメント!

全体像を知るならコレ。

参考:Introduction to JavaScript Source Maps - HTML5 Rocks

にしてもこの記事書かれたの2012年の3月21日なんよね。