ページのリソースを表示

Kayce Basques

このガイドでは、Chrome DevTools を使用してウェブページのリソースを表示する方法について説明します。リソースとは、ページが正しく表示するために必要となるファイルのことです。リソースの例としては、CSS、JavaScript、HTML ファイル、画像などがあります。

このガイドは、読者がウェブ開発と Chrome DevTools の基本を理解していることを前提としています。

オープン リソース

検査するリソースの名前がわかっている場合は、コマンド メニューを使用してリソースをすばやく開くことができます。

  1. Ctrl+P キーまたは command+P キー（Mac）を押します。[Open File] ダイアログが開きます。

    [ファイルを開く] ダイアログ

    図 1. [Open File] ダイアログ

  2. プルダウンからファイルを選択するか、ファイル名の入力を開始し、予測入力ボックスで目的のファイルがハイライト表示されたら Enter キーを押します。

    [ファイルを開く] ダイアログでファイル名を入力する

    図 2. [Open File] ダイアログでファイル名を入力する

[ネットワーク] パネルでリソースを開く

リソースの詳細を検査するをご覧ください。

[Network] パネルでのリソースの検査

図 3. [ネットワーク] パネルでリソースを検査する

他のパネルから [ネットワーク] パネルのリソースを表示する

以下のリソースのブラウジング セクションでは、DevTools UI のさまざまな部分からリソースを表示する方法について説明します。[ネットワーク] パネルでリソースを調べる場合は、リソースを右クリックして [[ネットワーク] パネルで表示] を選択します。

ネットワーク パネルに表示

図 4. [ネットワーク パネルで表示] オプション

リソースのブラウジング

[ネットワーク] パネルでリソースをブラウジングする

ネットワーク アクティビティを記録するをご覧ください。

ネットワーク ログのページ リソース

図 5. ネットワーク ログのページ リソース

ディレクトリ別に閲覧

ディレクトリ別に整理されたページのリソースを表示するには:

  1. [ソース] タブをクリックして、[ソース] パネルを開きます。

  2. [ページ] タブをクリックして、ページのリソースを表示します。[ページ] ペインが開きます。

    ページペイン

    図 6. [ページ] ペイン

    図 6 の目立たない項目の内訳を次に示します。

    • top は、メインのドキュメントの閲覧コンテキストです。
    • airhorner.com はドメインを表します。その下にネストされたすべてのリソースは、そのドメインから取得されます。たとえば、comlink.global.js ファイルの完全な URL はおそらく https://airhorner.com/scripts/comlink.global.js です。
    • scripts はディレクトリです。
    • (index) はメインの HTML ドキュメントです。
    • iu3 もブラウジング コンテキストです。このコンテキストは、メイン ドキュメントの HTML に埋め込まれた <iframe> 要素によって作成されている可能性があります。
    • sw.js は Service Worker の実行コンテキストです。

  3. リソースをクリックしてエディタに表示します。

    エディタでファイルを表示する

    図 7. エディタでファイルを表示する

ファイル名でブラウジング

デフォルトでは、[ページ] ペインではリソースがディレクトリごとにグループ化されます。このグループ化を無効にして、各ドメインのリソースをフラットリストとして表示するには:

  1. [Page] ペインを開きます。ディレクトリでブラウジングするをご覧ください。

  2. [その他のオプション] その他のオプション をクリックし、[フォルダによるグループ化] を無効にします。

    フォルダ別にグループ化

    図 8. [フォルダによるグループ化] オプション

    リソースはファイル形式別に整理されます。各ファイル形式内でリソースは アルファベット順になっています

    [Group By Folder] を無効にした後の [Page] ペイン

    図 9. [Group By Folder] を無効にした後の [Page] ペイン

ファイル形式でブラウジング

ファイル形式に基づいてリソースをグループ化するには:

  1. [アプリケーション] タブをクリックします。[Application] パネルが開きます。デフォルトでは、[マニフェスト] ペインが最初に開きます。

    [Application] パネル

    図 10. [Application] パネル

  2. [Frames] ペインまで下にスクロールします。

    [Frames] ペイン

    図 11. [フレーム] ペイン

  3. 目的のセクションを開きます。

  4. リソースをクリックして表示します。

    [Application] パネルでリソースを表示する

    図 11. [Application] パネルでのリソースの表示

[ネットワーク] パネルで種類別にファイルをブラウジングする

リソースタイプでフィルタするをご覧ください。

ネットワーク ログで CSS をフィルタする

図 12. ネットワーク ログで CSS をフィルタする