次の方法で共有


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

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

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

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

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

関連項目:

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

検査する 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 行表示されます。

    ネットワーク ログに一覧表示されている Web ページ リソース ファイル (1 行につき 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 ファイルのみが一覧表示されます。

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

    ソース ツールの [ページ] タブのフォルダー別にグループ化された Web ページのリソース ファイル

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

    ページ項目 説明
    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国際ライセンスに基づきライセンスされています