Analyzing page resources

The Resources panel allows you to view the complete set of resources that are loaded by a web page. You can view and interact with resources such as CSS and JavaScript, check image content and information, and view which font sets are used on the page. In addition, the Resources panel allows you to view and interact with the client-side resources created by your page, including cookies, databases, storage objects, and application cache, if they exist.

The Resources panel

You can click the Resources icon on the toolbar to display the Resources panel.

Screen showing the Resources panel

The Resources panel displays a complete list of the resources that the WebKit engine must request and load to render the webpage, as well as any client-side resources created and used by the web page. You can also use the Resources panel to view the content of any resource file. Resources are organized in the panel into the following categories:

  • Frames: Contains the resources for each frame displayed in the content, including images, fonts, scripts, stylesheets, and other content resources, such as embedded video or Flash files. Subframes within the main window are displayed as subfolders beneath the main Frames folder.
  • Databases: Contains all the database tables that are associated with your content or app.
  • Local Storage: Contains all Local Storage objects, that is, storage objects which persist after a browser session has ended.
  • Session Storage: Contains all Session Storage objects, that is, storage objects which are only valid for the current browser session.
  • Cookies: Contains all the cookies associated with the webpage or app.
  • Application Cache: Contains the resources included in the manifest of an offline web application.

View resource content

  1. Click the Resources icon on the toolbar to display the Resources panel.
  2. In the list in the left pane of the Resources panel, double-click a category to show the resources and subgroups. Continue to drill down until you locate the resource you are interested in viewing.
  3. Double-click the resource in the left pane. The right pane displays the contents of that resource. For example, selecting an image resource displays the image itself, as well as the file size and URL of the image file. Selecting a script or style sheet displays the content of that script or style sheet.

View resource network information

You can quickly see additional information about a specific resource by viewing the resource in the Network panel, which displays information such as file size and transfer rate information.

  1. In the list in the left pane of the Resources panel, double-click a category to show the resources and subgroups. Continue to drill down until you locate the resource you are interested in.
  2. Right-click the resource and click Reveal in Network Panel. Web Inspector opens the Network panel and briefly highlights the selected resource.

Last modified: 2014-05-14



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus