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.
Click the hovercard.html resource in the sidebar.
You can directly access individual resources from within the Developer Tools. Drag-and-drop demo.css from the sidebar into a Chrome window.
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.
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.
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.
Select the webkit.org cookie in the sidebar.