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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

  1. DevTools を開き、ソースマップが有効になっていることを確認し、[その他メニュー。] > [その他のツール] > [デベロッパー リソース] に移動します。

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

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

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

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

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

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

トラブルシューティング

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

ウェブサイトのリクエストのソースマップを最初に作成するには、[デベロッパー向けリソース] の右上にある チェックボックス。 [Enable load through target] のチェックボックスをオンにします。

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

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

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

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

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

    メニューから [ソースマップを追加] を選択する。

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

    ソースマップ URL の指定。

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

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

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