View Page Resources With Microsoft Edge DevTools

This guide teaches you how to use Microsoft Edge DevTools to view the resources of a web page. Resources are the files that a page needs in order to display correctly. Examples of resources include CSS, JavaScript, and HTML files, as well as images.

This guide assumes that you are familiar with the basics of web development and Microsoft Edge DevTools.

Open resources

When you know the name of the resource that you want to inspect, the Command Menu provides a fast way of opening the resource.

  1. Press Control+P (Windows) or Command+P (macOS). The Open File dialog opens.

    Figure 1

    The Open File dialog
    The Open File dialog

  2. Select the file from the dropdown, or start typing the filename and press Enter once the correct file is highlighted in the autocomplete box.

    Figure 2

    Typing a filename in the Open File dialog
    Typing a filename in the Open File dialog

Open resources in the Network panel

See Inspect the details of a resource.

Figure 3

Inspecting a resource in the Network panel
Inspecting a resource in the Network panel

Reveal resources in the Network panel from other panels

The Browse resources section below shows you how to view resources from various parts of the DevTools UI. If you ever want to inspect a resource in the Network panel, right-click the resource and select Reveal in Network panel.

Figure 4

The Reveal in Network panel option
Reveal in Network panel

Browse resources

Browse resources in the Network panel

See Log network activity.

Figure 5

Page resources in the Network Log
Page resources in the Network Log

Browse by directory

To view the resources of a page organized by directory:

  1. Click the Sources tab to open the Sources panel.

  2. Click the Page tab to show the resources of the page. The Page pane opens.

    Figure 6

    The Page pane
    The Page pane

    Here is a breakdown of the non-obvious items in Figure 6:

    Page item Description
    top The main document browsing context.
    airhorner.com The domain. All resources nested under it come from that domain. For example, the full URL of the comlink.global.j file is probably https://airhorner.com/scripts/comlink.global.js.
    scripts A directory.
    (index) The main HTML document.
    sw.js A service worker runtime context.
  3. Click a resource to view it in the Editor.

    Figure 7

    Viewing a file in the Editor
    Viewing a file in the Editor

Browse by filename

By default the Page pane groups resources by directory. To disable this grouping and view the resources for each domain as a flat list:

  1. Open the Page pane. See Browse by directory.

  2. Click More Options ... and disable Group By Folder.

    Figure 8

    The Group By Folder option
    The Group By Folder option

    Resources are organized by file type. Within each file type the resources are organized alphabetically.

    Figure 9

    The Page pane after disabling Group By Folder
    The Page pane after disabling Group By Folder

Browse by file type

To group resources together based on their file type:

  1. Click the Application tab. The Application panel opens. By default the Manifest pane usually opens first.

    Figure 10

    The Application panel
    The Application panel

  2. Scroll down to the Frames pane.

    Figure 11

    The Frames pane
    The Frames pane

  3. Expand the sections in which you are interested.

  4. Click a resource to view it.

    Figure 12

    Viewing a resource in the Application panel
    Viewing a resource in the Application panel

Browse files by type in the Network panel

See Filter by resource type.

Figure 13

Filtering for CSS in the Network Log
Filtering for CSS in the Network Log

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.