Chrome Developer Tools: Resource Panel

Note: This article is the fourth article on chrome Developer Tools translation.

See https://developers.google.com/chrome-developer-tools/docs/resources for more information

Chrome Developer Tools: Resources panelchrome Developer Tools: Resource Panel

TheResourcesPanel lets you inspect resources that are loaded in the inspected page. It lets you interact with HTML 5 database, local storage, cookies, appcache, etc.

The Resource Panel allows you to view the resources loaded to the view page. It allows you to interact with HTML5 databases, local storage, cookies, and app caches.

 

Follow the steps below to release eResourcesPanel:

Follow the steps below to open the Resource Panel

• Open the Google closure hovercard demo page.
• Open google closure hovercard demo page
• Open the Developer Tools window as described in the how to access the Developer Tools section of this tutorial.
• Open the developer tool window as described in how to access the developer tools.

• If it is not already selected, selectResources. The page's components are shown in the sidebar.
• If no resource panel is selected, selectResourcesThe members of the page are displayed on the left sidebar.

Frame Resources

ClickHovercard.htmlResource in the sidebar.

Click the hovercard.html resource on the sidebar.

This lets you see the resource loaded for the page.

You can see the resources loaded on the page.

 

You can directly access individual resources from within the developer tools. drag-and-dropDemo.cssFrom the sidebar into a Chrome Window.

You can directly access individual resources in developer tools. Drag demo.css from the sidebar to the Chrome Window.

 

HTML5 Databases

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

Use Google Chrome to open WebKit demo of HTML Storage

Click the triangle to the left ofNotetestDatabase to show the tables in the database.

ClickNotetestThe triangle on the left of the database displays the table of the database.

This shows there is a single table,Webkitstickynotes, InNotetestDatabase. InNotetestDatabase, there isWebkitstickynotesTable.

 

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. TypeSelect * 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.

Click table in the sidebar to view the table content. You can also run SQL query at the angle brackets prompt in the main window. InputSelect * From webkitstickynotesIn the console, the input can automatically complete and Tab automatically complete the common SQL keywords, and the analysis table name of this database.

TheNoteColumn is empty if you have not entered any text in the sticky note on the demo page. If you do not enter the task text in the Notes pasted on the demo page, the note column is empty.

 

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 clickWebkitstickynotesTable in the sidebar.

Go back to the WebKit demo page and enter some text in the pasted notebook. You can add other notes you like. Return to the development tool window, and double-clickWebkitstickynotes

 

Cookies

SelectWebkit.orgCookie in the sidebar.

SelectWebkit.org cookie

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