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

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 のカスタマイズと制御 () >[設定] () >[基本設定] の順にクリックします。

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

   

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

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

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

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

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

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

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

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

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

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

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

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

関連項目

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

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