デベロッパー リソース: ソースマップの表示と手動読み込み

Sofia Emelianova

GitHub

[デベロッパー リソース] タブを使用して、DevTools によってソースマップが正常に読み込まれるかどうかを確認します。必要に応じて、手動で読み込むことができます。

DevTools を開くと、ソースマップがあればそのマップが読み込まれます。エラーが発生した場合は、コンソールに次のようなエラーがログに記録されます。

[Developer Resources] ドロワータブでは、ソースマップの読み込みステータスを確認できます。ソースマップを手動で読み込むこともできます。

デベロッパー向けリソースを開いてステータスを確認する

ソースマップの読み込みステータスを確認するには:

1. DevTools を開き、ソースマップを有効にして、[] > [その他のツール] > [デベロッパー リソース] に移動します。

2. テーブルの次の列の値を確認します。

   • [Status] には、ソースマップの読み込みが成功したか失敗したかが表示されます。
   • Error: エラー メッセージ（ある場合）を読み取る。

URL またはエラーでリソースをフィルタ

興味のあるソースマップに焦点を当てるには、上部のテキスト ボックスにテキストを入力して、URL またはエラー メッセージにそのテキストが含まれていないソースマップを除外します。

トラブルシューティング

デフォルトでは、DevTools はウェブサイトではなくソースマップをリクエストします。このようなリクエストはクロスオリジンとして扱われる場合があり、通過しない可能性があります。

最初にウェブサイト リクエストのソースマップを指定するには、[デベロッパー リソース] の右上にある [ターゲットを介した読み込みを有効にする] をオンにします。

ソースマップの読み込みで引き続き問題が発生する場合は、次で説明するようにソースマップを手動で読み込んでみてください。

ソースマップを手動で読み込む

読み込みエラーが発生した場合や、ソースマップがない本番環境のウェブサイトで元のコードをデバッグする場合は、手動で読み込むことができます。

1. ソースマップをサポートするツールを使用してソースマップを生成する。
2. ソースマップをローカルでホストします。
3. ページで DevTools を開き、ソースマップを有効にします。

4. デプロイされた（処理済みの）ファイルを [Sources] で開き、[Editor] で右クリックし、メニューから [Add source map] を選択します。

   

5. テキスト ボックスにソースマップの URL を指定し、[Add] をクリックします。

   

6. ソースマップがデベロッパー リソースに表示され、元のファイル（デプロイされたファイルからマッピングされたもの）がファイルツリーに表示されているかどうかを確認します。

   

7. 元のファイルのデバッグに進みます。