Web ページを構成するリソース ファイルを表示する

Web ページを構成するリソースは、Microsoft Edge DevTools の複数のツール (または パネル) 内から表示できます。

• ネットワーク ツール
• ソース ツール
• アプリケーション ツール

リソースは、Web ページを構成するファイルです。 リソースの例を次に示します。

• CSS ファイル
• JavaScript ファイル
• HTML ファイル
• イメージ ファイル

関連項目:

• Mozilla.org での Web 開発について学習する
• DevTools の概要

コマンド メニューからリソース ファイルを開く

検査する Web ページのリソース ファイルの名前がわかっている場合は、DevTools の [コマンド メニュー] を 使用すると、そのリソースをすばやく見つけて開く方法が提供されます。

1. 新しいウィンドウまたはタブで、 アクセシビリティ テスト機能のデモなどの Web ページに移動します。 (その Web ページのソース ファイルは 、MicrosoftEdge/Demos > devtools-a11y-testing にあります)。

2. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または 、Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。

3. DevTools にフォーカスがある場合は、 Ctrl + P (Windows、Linux) または Command + P (macOS) を押します。 または、 DevTools の [DevTools のカスタマイズと制御 ] () ボタンをクリックし、[ ファイルを開く] を選択します。 コマンド メニューが開き、[ファイルを 開く ] の一覧が表示されます。

   

4. より大きい (>) プロンプトがある場合は、 Backspace キーを押して [ファイルを開く ] プロンプトにアクセスします。

5. ファイル名の入力を開始し、オートコンプリート ボックスで正しいファイルが強調表示されたら Enter キーを押すか、ドロップダウン リストからファイルを選択します。

   

ネットワーク ツールでリソース ファイルを参照する

ネットワーク ツールでは、.html、.css、.js、イメージ ファイルなど、現在の Web ページを構成するリソース ファイルを検査できます。 特定のリソースの詳細を取得する方法については、「ネットワーク アクティビティの検査」の「リソースの詳細を検査する」を参照してください。

1. 新しいウィンドウまたはタブで、 ネットワーク アクティビティの検査デモなどの Web ページに移動します。 (その Web ページのソース ファイルは 、MicrosoftEdge/Demos > network-tutorial にあります)。

2. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

3. DevTools の アクティビティ バーで、[ ネットワーク ] タブを選択します。そのタブが表示されない場合は、[ その他のツール ] () ボタンをクリックします。

4. 左上の [ネットワーク ログの記録 ] ボタンが選択されていることを確認します (赤)。

5. ページを最新の情報に更新してください。 既定では、[ すべての フィルター] ボタンが選択されているため、すべての Web ページのリソース ファイルが ネットワーク ツールに一覧表示され、リソース ファイルごとに 1 行表示されます。

   

6. リソースを選択して表示します。 たとえば、index.htmlを表示するnetwork-tutorial パスを選択します。

   

ページ リソースによって生成されるネットワーク アクティビティを表示する方法の詳細については、ネットワーク アクティビティの検査に関する記事の「ネットワーク アクティビティをログに記録する」を参照してください。

ネットワーク ツールでフィルター処理してファイルの種類別にリソース ファイルを参照する

ネットワーク ツールでは、現在の Web ページを構成するリソース ファイルの一覧を表示するときに、.cssファイルや.js ファイルのみを表示するなど、一覧表示するリソースの種類をフィルター処理できます。

たとえば、CSS ファイルのみを表示するには、

1. 新しいウィンドウまたはタブで、 ネットワーク アクティビティの検査デモなどの Web ページに移動します。 (その Web ページのソース ファイルは 、MicrosoftEdge/Demos > network-tutorial にあります)。

2. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

3. DevTools の アクティビティ バーで、[ ネットワーク ] タブを選択します。そのタブが表示されない場合は、[ その他のツール ] () ボタンをクリックします。

4. ページを最新の情報に更新してください。 既定では、[ すべての フィルター] ボタンが選択されているため、Web ページのすべてのリソース ファイルが ネットワーク ツールに一覧表示されます。

5. [ CSS ] をクリックして、CSS ファイルのみをフィルター処理して表示します。 main.css ファイルのみが一覧表示されます。

   

詳細については、「ネットワーク アクティビティの検査」の「リソースの種類でフィルター処理する」を参照してください。

他のツールからネットワーク ツールにリソース ファイルを表示する

Web ページのリソース ファイルを一覧表示するさまざまなツールで、 ネットワーク ツールでリソース ファイルを検査するには、リソース ファイルを右クリックし、[ ネットワーク パネルで表示] を選択します。 ネットワーク ツールが開いている間に、最初に Web ページを更新する必要がある場合があります。

たとえば、[ソース] ツールの [ページ] タブのリソース リストから [ネットワーク] ツールに移動するには、次のようにします。

1. 新しいウィンドウまたはタブで、 ネットワーク アクティビティの検査デモなどの Web ページに移動します。 (その Web ページのソース ファイルは 、MicrosoftEdge/Demos > network-tutorial にあります)。

2. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

3. DevTools の アクティビティ バーで、[ ネットワーク ] タブを選択します。そのタブが表示されない場合は、[ その他のツール ] () ボタンをクリックします。

4. Ctrl + R キーを押してページを更新します。 Web ページを構成する受信リソース ファイルが [ ネットワーク ] タブに行として追加されるようになりました。 network-tutorial/ フォルダー行は HTML ページを表します。この場合は 、index.html。

5. DevTools の アクティビティ バーで、[ ソース ] タブをクリックします。

6. 左上の [ ページ ] タブで、リソース ファイルを右クリックし、[ ネットワーク パネルで表示] を選択します。

   

   [ ネットワークで表示] パネル のメニュー項目が一覧にない場合は、[ ネットワーク ] ツールに移動し、左上の [ ネットワーク ログの記録 ] ボタンが選択されていることを確認して (赤)、ページを更新します。

ソース ツールの [ページ] タブでリソース ファイルをフォルダー別に参照する

[ソース] ツールを使用すると、次のように、Web ページのリソース ファイルをディレクトリ別に整理して表示できます。

1. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

2. DevTools の アクティビティ バーで、[ ソース ] タブを選択します。そのタブが表示されない場合は、[ その他のツール ] () ボタンをクリックします。

3. 左上の [ ナビゲーター ] ウィンドウで、[ ページ ] タブを選択します。

4. 既定では、リソース ファイルはフォルダー別にグループ化されます。 リソースがすべてファイル名でアルファベット順に表示されている場合は、[ページ] タブの右側にある [その他のオプション] () ボタンをクリックし、[フォルダー別にグループ化] を選択します。

   

   [ ページ ] タブには、次のようなさまざまなノードの種類が含まれています。

   ページ項目	説明
   top	ブラウザー タブ、ブラウザー ウィンドウ、フレームなど、メインドキュメント閲覧コンテキスト。 「コンテキストの参照」または「<iframe>: インライン フレーム要素」を参照してください。
   microsoftedge.github.io	ドメイン。 その下に入れ子になっているすべてのリソースは、そのドメインから取得されます。 たとえば、 buttons.js ファイルの完全な URL が https://microsoftedge.github.io/Demos/devtools-a11y-testing/buttons.js。
   Demos/devtools-a11y-testing, css, photos	ディレクトリ。
   devtools-a11y-testing/	メイン HTML ドキュメント。
   buttons.js	ページ上のボタンの押下を処理するスクリプト。

5. リソース ファイルを選択して、ソース ツールのエディターで表示します。

   

ソース ツールの [ページ] タブでファイル名で並べ替えられたリソース ファイルを参照する

既定では、[ソース] ツールの [ページ] タブは、リソース ファイルをフォルダー別にグループ化します。 代わりに、1 つのアルファベット順の一覧にグループ化された各ドメインのすべてのリソース ファイルを表示するには:

1. 新しいウィンドウまたはタブで、 アクセシビリティ テスト機能のデモなどの Web ページに移動します。 (その Web ページのソース ファイルは 、MicrosoftEdge/Demos > devtools-a11y-testing にあります)。

2. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

3. DevTools の アクティビティ バーで、[ ソース ] タブを選択します。そのタブが表示されない場合は、[ その他のツール ] ([) ボタンをクリックします。

4. 左上の [ ナビゲーター ] ウィンドウで、[ ページ ] タブを選択します。

5. [ その他のオプション ] () をクリックし、[ フォルダー別にグループ化 ] オプションをオフにします。

   

   各ドメインのすべてのリソース ファイル ( Top など) は、1 つのアルファベット順の一覧にまとめられます。

   

アプリケーション ツールの [フレーム] ツリーでファイルの種類別にリソース ファイルを参照する

ファイルの種類別にグループ化された Web ページ リソースを表示する方法の 1 つは、アプリケーション ツールの [フレーム] ツリーを使用することです。

1. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

2. DevTools の アクティビティ バーで、[ アプリケーション ] タブを選択します。そのタブが表示されない場合は、[ その他のツール ] ([) ボタンをクリックします。

   アプリケーション ツールが開き、既定では最初に [マニフェスト] ウィンドウが表示されます。

   

3. [ フレーム ] ウィンドウまで下にスクロールし、目的のフォルダーを展開します。

   

4. リソースを選択して 、アプリケーション ツールで表示します。

   

注

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、ケイス・バスクによって作成されています。

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。