Resources Panel

{% include "chrome-developer-tools/_local_variables.html" %} Resources Panel

The Resources panel lets you inspect resources that are loaded in the inspected page. It lets you interact with HTML 5 Database, Local Storage, Cookies, AppCache, etc.

Follow the steps below to explore the Resources panel:

Open the Google Closure Hovercard demo page.
Open the Developer Tools window as described in the How to Access the Developer Tools section of this tutorial.

If it is not already selected, select Resources. The page's components are shown in the sidebar.

Frame resources

Click the hovercard.html resource in the sidebar.

This lets you see the resource loaded for the page.

You can directly access individual resources from within the Developer Tools. Drag-and-drop demo.css from the sidebar into a Chrome window.

HTML5 Databases

Using Google Chrome, open the Webkit demo of HTML storage.

Click the triangle to the left of the NoteTest database to show the tables in the database.

This shows there is a single table, WebKitStickyNotes, in the NoteTest database.

To see the table's contents, click the table in the sidebar. You can also run a SQL query at the chevron prompt in the main window. Type select * from WebKitStickyNotes. The input in this console has auto-completion and tab-completion for common SQL words and phrases along with table names for the database.

The note column is empty if you have not entered any text in the sticky note on the demo page.

Return to the Webkit demo page and type some text in the sticky note - you can also add another note if you like. Return to the Developer Tools window and double click the WebKitStickyNotes table in the sidebar.

Cookies

Select the webkit.org cookie in the sidebar.

Cookies view allows you browsing cookies associated with the selected domain, as well as deleting them.