リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

Source Maps を使ってみる


webアプリケーションに組み込まれるjavascriptは、デプロイ時にはminifyされた状態である事が通例になってきました。
しかしデプロイ後にエラーを発見した際、minify前のどこでエラーが起きたのか調べる事が面倒ではあります。

そこで登場したのが「Source Maps」です。
簡単に言うとminify前のソースとminify後のソースを紐付ける仕組みです。

どう使うか?

Google製おなじみの「Clouse Compiler」を使用します。

[bash]
java -jar ../compiler-latest/compiler.jar --js {INPUT.js} --create_source_map {OUTPUT.js.map} --source_map_format=V3 --js_output_file {$OUTPUT.js}
[/bash]

ヘルプは下記コマンドでも見る事ができます。

[bash]
java -jar compiler.jar --help
[/bash]

Source Mapsの存在をブラウザに通知する方法は2種類あります。

1. minifyしたソースの先頭に下記を追記する

[js]
//@ sourceMappingURL=./jquery-closure.min.js.map
[/js]

2. X-SourceMapヘッダーを追加する

[js]
X-SourceMap: ./jquery-closure.min.js.map
[/js]

あとはChromeの Settings -> General -> Enable source maps にチェックを付ければ完了です。

名称未設定-1

詳しくは Introduction to JavaScript Source Maps - HTML5 Rocks を参照ください。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

無料メルマガ

登録はたったの5秒!一週間分のコラムを毎週月曜にメールでお届けします。

Facebookもチェック