Kayce Basques

This guide teaches you how to use Chrome DevTools to view a web page's resources. Resources are thefiles 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 ofweb development andChromeDevTools.

Open resources

When you know the name of the resource that you want to inspect, theCommand Menu provides afast way of opening the resource.

1. PressControl+P orCommand+P (Mac). TheOpenFile dialog opens.

   

   Figure 1. TheOpen File dialog

2. Select the file from the dropdown, or start typing the filename and pressEnter oncethe correct file is highlighted in the autocomplete box.

   

   Figure 2. Typing a filename in theOpen File dialog

Open resources in the Network panel

SeeInspect a resource's details.

Figure 3. Inspecting a resource in theNetwork panel

Reveal resources in the Network panel from other panels

TheBrowse resources section below shows you how to view resources from various parts of theDevTools UI. If you ever want to inspect a resource in theNetwork panel, right-click theresource and selectReveal in Network panel.

Figure 4. TheReveal in Network panel option

Browse resources

Browse resources in the Network panel

SeeLog network activity.

Figure 5. Page resources in the Network Log

Browse by directory

To view a page's resources organized by directory:

1. Click theSources tab to open theSources panel.

2. Click thePage tab to show the page's resources. ThePage pane opens.

   

   Figure 6. ThePage pane

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

   • top is the main documentbrowsing context.
   • airhorner.com represents a domain. All resources nested under it come from that domain.For example, the full URL of thecomlink.global.js file is probablyhttps://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 theEditor.

   

   Figure 7. Viewing a file in theEditor

Browse by filename

By default thePage pane groups resources by directory. To disable this grouping and view eachdomain's resources as a flat list:

1. Open thePage pane. SeeBrowse by directory.

2. ClickMore Options anddisableGroup By Folder.

   

   Figure 8. TheGroup By Folder option

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

   

   Figure 9. ThePage pane after disablingGroup By Folder

Browse by file type

To group resources together based on their file type:

1. Click theApplication tab. TheApplication panel opens. By default theManifest paneusually opens first.

   

   Figure 10. TheApplication panel

2. Scroll down to theFrames pane.

   

   Figure 11. TheFrames pane

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

4. Click a resource to view it.

   

   Figure 11. Viewing a resource in theApplication panel

Browse files by type in the Network panel

SeeFilter by resource type.

Figure 12. Filtering for CSS in the Network Log