{{ToolsSidebar}}
ブラウザーが実行する JavaScript ソースは、開発者が作成した元のソースから何らかの方法で変換される場合があります。例えば:
このような状況では、ブラウザーがダウンロードした変換後のソースよりも、元のソースをデバッグするほうがとても容易です。ソースマップ は変換後のソースと元のソースを関連付けるファイルであり、ブラウザーが元のソースを再構成して、そのソースをデバッガーに提供できます。
デバッガーでソースマップを使用可能にするには、以下のことが必要です:
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map{{EmbedYouTube("Fqd15gHC4Pg")}}
上の動画では https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html を読み込んでいます。このページは、初めに CoffeeScript で記述して JavaScript に変換した "main.js" という名前のソースを読み込みます。変換後のソースには、ソースマップを指し示す以下のようなコメントが含まれています:
//# sourceMappingURL=main.js.mapデバッガーの ソースリストペイン では元の CoffeeScript ソースが "main.coffee" として表示されて、ほかのソースと同様にデバッグできます。
最後に、ブラウザーのバージョンによっては about:config でこの機能を有効化しなければならない場合があります。