このガイドでは、Chrome DevTools を使用してウェブページのリソースを表示する方法を説明します。リソースとは、ページが正しく表示するために必要なファイルです。リソースの例としては、CSS、JavaScript、HTML ファイル、画像などがあります。
このガイドは、ウェブ開発と Chrome DevTools の基本に精通していることを前提としています。
リソースを開く
検査するリソースの名前がわかっている場合は、コマンド メニューを使用してリソースを簡単に開くことができます。
Ctrl+P キーまたは Command+P キー(Mac)を押します。[Open File] ダイアログが開きます。
図 1. [Open File] ダイアログ
プルダウンからファイルを選択するか、ファイル名の入力を開始して、オートコンプリート ボックスで正しいファイルがハイライト表示されたら Enter キーを押します。
図 2. [Open File] ダイアログでファイル名を入力する
[ネットワーク] パネルでリソースを開く
リソースの詳細を検査するをご覧ください。
図 3. [ネットワーク] パネルでリソースを調べる
[ネットワーク] パネルのリソースを他のパネルから表示する
以下のリソースのブラウジング セクションでは、DevTools UI のさまざまな部分からリソースを表示する方法について説明します。[Network] パネルでリソースを調べる場合は、リソースを右クリックして [Reveal in Network] を選択します。
図 4. [ネットワーク パネルに表示] オプション
リソースのブラウジング
[ネットワーク] パネルでリソースを参照する
ネットワーク アクティビティを記録するをご覧ください。
図 5. ネットワーク ログのページリソース
ディレクトリでブラウジング
ディレクトリ別に整理されたページのリソースを表示するには:
- [ソース] タブをクリックして、[ソース] パネルを開きます。
[ページ] タブをクリックして、ページのリソースを表示します。[ページ] ペインが開きます。
図 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 の実行コンテキストです。
リソースをクリックすると、エディタに表示されます。
図 7. エディタでファイルを表示する
ファイル名で検索
デフォルトでは、[ページ] ペインはディレクトリごとにリソースをグループ化します。グループ化を無効にして、各ドメインのリソースをフラットリストとして表示するには:
- [ページ] ペインを開きます。ディレクトリ別に閲覧をご覧ください。
その他のオプション をクリックし、[フォルダでグループ化] を無効にします。
図 8. [Group By Folder] オプション
リソースはファイル形式別に整理されています。各ファイル形式内ではリソースがアルファベット順になっています。
図 9. [Group By Folder] を無効にした後の [ページ] ペイン
ファイル形式で検索
ファイル形式に基づいてリソースをグループ化するには:
[Application] タブをクリックします。[アプリケーション] パネルが開きます。デフォルトでは、[Manifest] ペインは通常最初に開きます。
図 10. [アプリケーション] パネル
[Frames] ペインまで下にスクロールします。
図 11. [フレーム] ペイン
目的のセクションを展開します。
リソースをクリックすると、そのリソースが表示されます。
図 11. [アプリケーション] パネルでリソースを表示する
[ネットワーク] パネルで種類別にファイルを参照する
リソースタイプでフィルタするをご覧ください。
図 12. ネットワーク ログでの CSS のフィルタリング