ページのリソースを表示

Kayce Basques 氏
Kayce Basques
Twitter GitHub Glitch

このガイドでは、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 のさまざまな部分からリソースを表示する方法について説明します。[Network] パネルでリソースを調べる場合は、リソースを右クリックして [Reveal in Network] を選択します。

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

図 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. [ページ] ペインを開きます。ディレクトリ別に閲覧をご覧ください。

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

    フォルダでグループ化

    図 8. [Group By Folder] オプション

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

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

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

ファイル形式で検索

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

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

    [Application] パネル

    図 10. [アプリケーション] パネル

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

    フレーム ペイン

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

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

  4. リソースをクリックすると、そのリソースが表示されます。

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

    図 11. [アプリケーション] パネルでリソースを表示する

[ネットワーク] パネルで種類別にファイルを参照する

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

ネットワーク ログでの CSS のフィルタリング

図 12. ネットワーク ログでの CSS のフィルタリング