92 строки
3.6 KiB
HTML
92 строки
3.6 KiB
HTML
|
{% include "chrome-developer-tools/_local_variables.html" %}
|
||
|
|
<html devsite>
|
||
|
|
<head>
|
||
|
|
<title>Resources Panel</title>
|
||
|
|
<meta name="project_path" value="/chrome-developer-tools/_project.yaml" />
|
||
|
|
<meta name="book_path" value="/chrome-developer-tools/_book.yaml" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" href="/chrome-developer-tools/css/local_extensions.css"/>
|
||
|
|
|
||
|
|
<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.
|
||
|
|
<div class="screenshot"><img src="/chrome-developer-tools/docs/resources-files/resources_panel.png"></div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2>Frame resources</h2>
|
||
|
|
|
||
|
|
<p>Click the <strong>hovercard.html</strong> resource in the sidebar.
|
||
|
|
<div class="screenshot"><img src="/chrome-developer-tools/docs/resources-files/resources_click_sidebar.png"></div>
|
||
|
|
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.
|
||
|
|
<div class="screenshot"><img src="/chrome-developer-tools/docs/resources-files/resources_database.png"></div>This
|
||
|
|
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.
|
||
|
|
<div class="screenshot"><img src="/chrome-developer-tools/docs/resources-files/resources_sql_query.png"></div>The
|
||
|
|
<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.
|
||
|
|
<div class="screenshot"><img src="/chrome-developer-tools/docs/resources-files/resources_sticky_note.png"></div>
|
||
|
|
</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.
|
||
|
|
<div class="screenshot"><img src="/chrome-developer-tools/docs/resources-files/resources_cookie.png"></div>
|
||
|
|
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>
|
||
|
|
</html>
|
||
|
|
|