2013-11-07 04:41:09 +04:00
< head >
< title > Resources Panel< / title >
< / head >
< body >
2013-11-15 03:45:05 +04:00
< h1 > Resources Panel< / h1 >
2013-11-07 04:41:09 +04:00
< p > The < b > Resources< / b > 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.< / p >
< / p >
< p > Follow the steps below to explore the < strong > Resources< / strong >
panel:< / p >
< ul >
< li > Open the < a href = "http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/hovercard.html"
target="_blank">Google Closure Hovercard demo page< / a > .< / li >
< li > Open the Developer Tools window as described in the < a href = "/chrome-developer-tools/docs/overview.html#access" > How to Access the Developer Tools< / a > section of this
tutorial.< / li >
< / ul >
< ul >
< li > If it is not already selected, select < strong > Resources< / strong > .
The page's components are shown in the sidebar.
2013-11-09 05:17:39 +04:00
< div class = "screenshot" > < img src = "resources-files/resources_panel.png" > < / div >
2013-11-07 04:41:09 +04:00
< / li >
< / ul >
< h2 > Frame resources< / h2 >
< p > Click the < strong > hovercard.html< / strong > resource in the sidebar.
2013-11-09 05:17:39 +04:00
< div class = "screenshot" > < img src = "resources-files/resources_click_sidebar.png" > < / div >
2013-11-07 04:41:09 +04:00
This lets you see the resource loaded for the page.< / p >
< p > You can directly access individual resources from within the Developer
Tools. Drag-and-drop < strong > demo.css< / strong > from the sidebar into a
Chrome window.< / p >
< / ul >
< p class = "backtotop" > < a href = "#top" > Back to top< / a > < / p >
< h2 > HTML5 Databases< / h2 >
< p > Using Google Chrome, open the < a href = "http://webkit.org/demos/sticky-notes/index.html"
target="_blank">Webkit demo of HTML storage< / a > .< / p >
< p > Click the triangle to the left of the < strong > NoteTest< / strong >
database to show the tables in the database.
2013-11-09 05:17:39 +04:00
< div class = "screenshot" > < img src = "resources-files/resources_database.png" > < / div > This
2013-11-07 04:41:09 +04:00
shows there is a single table, < strong > WebKitStickyNotes< / strong > , in the
< strong > NoteTest< / strong > database.
< / p >
< p > 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
< strong > select * from WebKitStickyNotes< / strong > . The input in this console
has auto-completion and tab-completion for common SQL words and phrases
along with table names for the database.
2013-11-09 05:17:39 +04:00
< div class = "screenshot" > < img src = "resources-files/resources_sql_query.png" > < / div > The
2013-11-07 04:41:09 +04:00
< strong > note< / strong > column is empty if you have not entered any text in
the sticky note on the demo page.
< / p >
< p > 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 < strong > WebKitStickyNotes< / strong > table in the
sidebar.
2013-11-09 05:17:39 +04:00
< div class = "screenshot" > < img src = "resources-files/resources_sticky_note.png" > < / div >
2013-11-07 04:41:09 +04:00
< / p >
< p class = "backtotop" > < a href = "#top" > Back to top< / a > < / p >
< h2 > Cookies< / h2 >
< p > Select the < b > webkit.org< / b > cookie in the sidebar.
2013-11-09 05:17:39 +04:00
< div class = "screenshot" > < img src = "resources-files/resources_cookie.png" > < / div >
2013-11-07 04:41:09 +04:00
Cookies view allows you browsing cookies associated with the selected domain,
as well as deleting them.
< / p >
< p class = "backtotop" > < a href = "#top" > Back to top< / a > < / p >
< / body >
