View Page Resources With Chrome DevTools

This guide teaches you how to use Chrome DevTools to view a web page's resources. 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're familiar with the basics of web development and Chrome 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 or Command+P (Mac). The Open File dialog opens.

    The Open File dialog
    Figure 1. 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.

    Typing a filename in the Open File dialog
    Figure 2. Typing a filename in the Open File dialog

Open resources in the Network panel

See Inspect a resource's details.

Inspecting a resource in the Network panel
Figure 3. 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.

Reveal in Network panel
Figure 4. The Reveal in Network panel option

Browse resources

Browse resources in the Network panel

See Log network activity.

Page resources in the Network Log
Figure 5. Page resources in the Network Log

Browse by directory

To view a page's resources organized by directory:

  1. Click the Sources tab to open the Sources panel.
  2. Click the Page tab to show the page's resources. The Page pane opens.

    The Page pane
    Figure 6. The Page pane

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

    • top is the main document browsing context.
    • airhorner.com represents a domain. All resources nested under it come from that domain. For example, the full URL of the comlink.global.js file is probably https://airhorner.com/scripts/comlink.global.js.
    • scripts is a directory.
    • (index) is the main HTML document.
    • iu3 is another browsing context. This context was probably created by an <iframe> element embedded in the main document HTML.
    • sw.js is a service worker execution context.
  3. Click a resource to view it in the Editor.

    Viewing a file in the Editor
    Figure 7. Viewing a file in the Editor

Browse by filename

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

  1. Open the Page pane. See Browse by directory.
  2. Click More Options More Options and disable Group By Folder.

    Group By Folder
    Figure 8. The Group By Folder option

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

    The Page pane after disabling Group By Folder
    Figure 9. 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.

    The Application panel
    Figure 10. The Application panel

  2. Scroll down to the Frames pane.

    The Frames pane
    Figure 11. The Frames pane

  3. Expand the sections that you're interested in.

  4. Click a resource to view it.

    Viewing a resource in the Application panel
    Figure 11. Viewing a resource in the Application panel

Browse files by type in the Network panel

See Filter by resource type.

Filtering for CSS in the Network Log
Figure 12. Filtering for CSS in the Network Log

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.