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

Sofia Emelianova

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

キーポイント: ソースマップを使用してデバッグを簡単に行う方法については、ソースマップを使用してデプロイするのではなく、元のコードをデバッグするをご覧ください。

概要

DevTools を開くと、ソースマップ（存在する場合）の読み込みが試行されます。失敗した場合、コンソールに次のようなエラーが記録されます。

[デベロッパー リソース] パネルでは、ソースマップの読み込みステータスを確認したり、ソースマップを手動で読み込んだりできます。

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

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

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

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

   • ステータス: ソースマップの読み込みが成功したか失敗したかを確認できます。
   • [エラー] をクリックして、エラー メッセージ（ある場合）を読み取ります。

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

関心のあるソースマップだけに絞り込むには、上部のテキスト ボックスにテキストを入力して、URL またはエラー メッセージにこのテキストが含まれていないソースマップを除外します。

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

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

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

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

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

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

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

4. デプロイされた（処理済み）ファイルを [ソース] で開き、[エディタ] で右クリックして、メニューから [ソースマップを追加] を選択します。

   

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

   

6. ソースマップが [Developer Resources] に表示され、元のファイル（デプロイされたファイルからマッピングされたファイル）がファイルツリーに表示されていることを確認します。

   

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