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

Sofia Emelianova

[Developer Resources] パネルを使用して、DevTools でソースマップが正常に読み込まれるかどうかを確認します。必要に応じて、手動で読み込むことができます。

概要

DevTools を開くと、ソースマップがあれば読み込めます。障害が発生すると、コンソールに次のようなエラーが記録されます。

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

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

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

1. DevTools を開き、ソースマップが有効になっていることを確認してから、 more_vert >その他のツール >デベロッパー向けリソース。

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

   • Status: ソースマップの読み込みが成功したか失敗したかを確認します。
   • Error。エラー メッセージを読み取ることができます（存在する場合）。

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

目的のソースマップに焦点を合わせるには、上部のテキスト ボックスにテキストを入力して、URL やエラー メッセージにそのテキストを含まないソースマップを除外します。

ソースマップの読み込みに関するトラブルシューティング

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

ウェブサイトで最初にソースマップをリクエストする場合は、[デベロッパー リソース] の右上にある [ウェブサイトを介して読み込む] をオンにします。

それでもソースマップの読み込みに関する問題が解決しない場合は、次に説明するように、ソースマップを手動で読み込んでみてください。

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

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

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

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

   

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

   

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

   

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