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

Sofia Emelianova
Sofia Emelianova
GitHub

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

概要

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

コンソールのソースマップの読み込みエラー。

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

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

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

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

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

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

[ステータス] 列と [エラー] 列

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

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

「js」を含まないソースマップを除外するあります。

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

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

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

[ウェブサイトを介して読み込む]チェックボックス

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

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

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

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

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

    [ソースマップを追加] を選択するを選択します。

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

    ソースマップ URL の指定。

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

    ソースマップを手動で読み込むと、元のファイルがファイルツリーに表示されます。

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