MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

開発ツール

ソースマップを使用する

このページは、Firefox 52 以降の Firefox Nightly および Firefox Developer Edition で使用できる JavaScript デバッガーについて説明します。

これより前のバージョンの Firefox や Firefox Beta および Release については、デバッガー (Firefox 52 より前) をご覧ください。

このバージョンのデバッガーを使用できる環境で旧デバッガーに戻す必要がある場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に false を設定してください。

ブラウザーが実行する JavaScript ソースは、開発者が作成した元のソースから何らかの方法で変換される場合があります。例えば:

  • より効率よくサーバーから提供するためにコンバインおよび ミニファイ されることがよくあります。
  • CoffeeScriptTypeScript のような言語からコンパイルするように、ページで実行する JavaScript が機械生成されることがあります。

このような状況では、ブラウザーがダウンロードした変換後のソースよりも、元のソースをデバッグするほうがとても容易です。ソースマップ は変換後のソースと元のソースを関連付けるファイルであり、ブラウザーが元のソースを再構成して、そのソースをデバッガーに提供できます。

デバッガーでソースマップを使用可能にするには、以下のことが必要です:

  • ソースマップを生成します。
  • 変換後のソースに、ソースマップを指し示すコメントを含めます。コメントは以下のような構文です:
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

上の動画では https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html を読み込んでいます。このページは、初めに CoffeeScript で記述して JavaScript に変換した "main.js" という名前のソースを読み込みます。変換後のソースには、ソースマップを指し示す以下のようなコメントが含まれています:

//# sourceMappingURL=main.js.map

デバッガーの ソースリストペイン では元の CoffeeScript ソースが "main.coffee" として表示されて、ほかのソースと同様にデバッグできます。

最後に、ブラウザーのバージョンによっては about:config でこの機能を有効化しなければならない場合があります。

  1. ブラウザーを開いて about:config と入力します。
    How to open about:config inside firefox.
  2. 動作保証対象外であることを受け入れます。
    Accept about:config warranty.
  3. devtools.source-map.locations.enabled を検索して true に設定します。
    Change the sourcemap boolean value for devtools.

ドキュメントのタグと貢献者

 このページの貢献者: yyss, SatoshiOhata
 最終更新者: yyss,