View page resources

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 ofweb developmentandChrome DevTools.

Open resources

When you know the name of the resource that you want to inspect, theCommand Menuprovides a fast way of opening the resource.

1. PressControl+PorCommand+P(Mac). TheOpen Filedialog opens.

   

   Figure 1.TheOpen Filedialog

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

   

   Figure 2.Typing a filename in theOpen Filedialog

Open resources in the Network panel

SeeInspect a resource's details.

Figure 3.Inspecting a resource in theNetworkpanel

Reveal resources in the Network panel from other panels

TheBrowse resourcessection below shows you how to view resources from various parts of the DevTools UI. If you ever want to inspect a resource in theNetworkpanel, right-click the resource and selectReveal in Network panel.

Figure 4.TheReveal in Network paneloption

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 theSourcestab to open theSourcespanel.

2. Click thePagetab to show the page's resources. ThePagepane opens.

   

   Figure 6.ThePagepane

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

   • topis the main documentbrowsing context.
   • airhornerrepresents a domain. All resources nested under it come from that domain. For example, the full URL of thecomlink.global.jsfile is probably https://airhorner /scripts/comlink.global.js.
   • scriptsis a directory.
   • (index)is the main HTML document.
   • iu3is another browsing context. This context was probably created by an<iframe> element embedded in the main document HTML.
   • sw.jsis 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 thePagepane groups resources by directory. To disable this grouping and view each domain's resources as a flat list:

1. Open thePagepane. SeeBrowse by directory.

2. ClickMore Optionsand disableGroup By Folder.

   

   Figure 8.TheGroup By Folderoption

   Resources are organized by file type. Within each file type the resources are organized Alpha betically.

   

   Figure 9.ThePagepane after disablingGroup By Folder

Browse by file type

To group resources together based on their file type:

1. Click theApplicationtab. TheApplicationpanel opens. By default theManifestpane usually opens first.

   

   Figure 10.TheApplicationpanel

2. Scroll down to theFramespane.

   

   Figure 11.TheFramespane

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

4. Click a resource to view it.

   

   Figure 11.Viewing a resource in theApplicationpanel

Browse files by type in the Network panel

SeeFilter by resource type.

Figure 12.Filtering for CSS in the Network Log