The Resources Inspector gives an overview of all URI requests (such as images, scripts, stylesheets and XHR requests) initiated by a document.
The panel is split into two areas: a structured tree view of the document and all its resources, grouped by type, and a detailed resource view.
Each expandable element of the tree features a bubble with the number of resources it holds. The elements can be expanded or collapsed with a single click. Clicking on an element while holding the Shift key will expand or collapse the element and all of its resources and child elements.
You can navigate through all expanded resources in the tree with the ↑ and ↓ cursor keys.
The URL filter lets you "prune" the tree view to only show resources matching a particular substring. This makes it easy to only list particular types of files (for instance,
.js) or only resources being served from a particular domain.
Selecting a resource in the tree view provides further information about that particular resource in the detailed view on the right. Depending on the type of resource, this will include the encoding, MIME type, guessed type, size, and resolution, as well as a link to open the resource in a new tab.
The major types of resources are recognized and displayed directly in the detailed resource view. In the case of web fonts, the detailed resource view not only gives a standard preview of the font, but also allows you to edit the sample string used for the preview.