デバッグのために、処理されたコードを元のソース コードにマップする

DevTools で JavaScript をデバッグするときに、Web サーバーから返されるコンパイル済みの縮小されたバージョンのコードを操作する必要なく、元のソース コードを表示して操作するには、ソース マップを使用します。

ソース マッピングは、ビルド プロセスがコードをコンパイルしてミニファイして 1 つのファイルに結合した後でも、クライアント側のコードを読み取り可能でデバッグ可能な状態に保ちます。 ソース マップは、コンパイルされた縮小されたコードを元のソース コード ファイルにマップします。 DevTools では、認識できない変換およびコンパイルされたコードではなく、使い慣れた元のソース コードを読み取ってデバッグできます。

ソース マップを使用するには、ソース マップを生成できるコードをビルドするときにツールを使用する必要があります。 次のような多くのツールを使用できます。

• SASS または PostCSS。CSS のソース マップを生成できます。
• TypeScript コンパイラ。TypeScript を JavaScript にコンパイルし、ソース マップを生成して元の TypeScript コードをデバッグできます。
• CSS と JavaScript の両方のソース マップを生成できる Babel トランスパイラー。
• Webpack、Rollup、Vite、Parcel などのツールをビルドします。これは、ソース マップを生成することもできます。

この記事では、DevTools でソース マップを有効にする方法と、それらを使用してコードをデバッグする方法について説明します。 ビルド プロセスでソース マップを生成する方法については説明しません。 ソース マップを Azure Artifacts シンボル サーバーに発行する方法の詳細については、「ソース マップを Azure Artifacts シンボル サーバーに発行して元のコードを安全にデバッグする」を参照してください。

DevTools のソース マップ

ビルド ツールからのソース マップにより、DevTools は縮小されたファイルに加えて元のファイルを読み込み、縮小されたコードを元のコードに置き換えます。 以下に例を示します。

• ソース ツールでは、元のファイルを表示し、その中にブレークポイントを設定できます。
• パフォーマンス ツールでは、フレーム チャートに元の関数名を表示できます。
• コンソール ツールでは、元のファイル名と行番号をスタック トレースで確認できます。

一方、Microsoft Edge は、実際には縮小されたコードを実行して Web ページをレンダリングします。 ソース マップは DevTools でのみ使用され、開発者にソース コードを表示する場合にのみ使用されます。

DevTools は、コンパイル済みファイルで //# sourceMappingURL= コメントが見つかったときにソース マップを読み込む方法を認識しています。 たとえば、次のコメントは、 http://example.com/path/to/your/sourcemap.mapからソース マップを読み込むよう DevTools に指示します。

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

DevTools でソース マップを有効にする

ソース マップは既定で有効になっています。

ソース マップが有効になっていることを確認するには:

1. DevTools を開くには、Microsoft Edge で Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。

2. DevTools で、DevTools のカスタマイズと制御 () >[設定] () >[Preferences] をクリックします。

3. [ 基本設定 ] ページの [ ソース ] セクションで、[ JavaScript ソース マップを有効にする ] チェック ボックスと [ CSS ソース マップを有効にする ] チェック ボックスがオンになっていることを確認します。

   

4. [設定] の右上にある [閉じる] () ボタンをクリックします。

リモート ファイル パスからのソース マップの読み込みを有効にする

既定では、ソース マップ URL がリモート ファイル パスである場合 (ソース マップ URL が file:// で始まり、現在のデバイス上にないファイルをターゲットとする場合など)、DevTools はソース マップを読み込まれません。

ファイル パスからのソース マップの読み込みを有効にするには:

1. DevTools で、DevTools のカスタマイズと制御 () >[設定] () >[Preferences] をクリックします。

2. [ 基本設定 ] ページの [ ソース ] セクションで、[ DevTools によるリモート ファイル パスからのソース マップなどのリソースの読み込みを許可する] チェック ボックスをオンにします。セキュリティ上の理由から、既定で無効になっています。

ソース マップを使用したデバッグ

コードをデバッグするとき、およびソース マップが有効になっている場合、ソース マップはいくつかの場所で使用されます。

• コンソール ツールでは、ログ メッセージからソース ファイルへのリンクは、コンパイルされたファイルではなく元のファイルに移動します。

• ソース ツールでコードをステップ実行すると、左側の [ナビゲーター] ウィンドウに元のファイルが表示されます。 元のファイルを開くと、元のコードが表示され、ブレークポイントを設定できます。 ソース ツールでブレークポイントを使用したデバッグの詳細については、「ブレークポイントを使用してコードを一時停止する」を参照してください。

• [ソース] ツールで、[デバッガー] ウィンドウの [呼び出し履歴] に表示されるソース ファイルへのリンクによって、元のソース ファイルが開きます。

• パフォーマンス ツールでは、フレーム チャートには、コンパイルされた関数名ではなく、元の関数名が表示されます。

関連項目

• ソース マップを Azure Artifacts シンボル サーバーに発行して元のコードを安全にデバッグする
• Azure Artifacts シンボル サーバー ソース マップを使用して元のコードを安全にデバッグする
• ソース マップ モニター ツール

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、メギン・カーニーとポール・バカウスによって作成されています。

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。