【翻译】Chrome Developer Tools: 资源面板-CSDN博客

说明：本文对Chrome Developer Tools系列翻译文章的第四篇

原文见https://developers.google.com/chrome-developer-tools/docs/resources

Chrome Developer Tools: Resources Panel

Chrome Developer Tools: 资源面板

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.

资源面板让你查看加载到查看页面的资源。它让你和HTML5的数据库、本地存储、Cookie和App缓存交互。

Follow the steps below to explore the Resources panel:

跟随下面的步骤来打开资源面板

Open the Google Closure Hovercard demo page.
打开 Google Closure Hovercard demo page
Open the Developer Tools window as described in the How to Access the Developer Tools section of this tutorial.
像在 How to Access the Developer Tools 这节描述的那样，打开开发者工具窗口

If it is not already selected, select Resources. The page's components are shown in the sidebar.
如果没有选择资源面板，选择 Resources ，页面的成员在左边栏显示

Frame resources

Click the hovercard.html resource in the sidebar.

在边栏，点击hovercard.html资源

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.

你能在Developer Tools直接访问个别的资源。从侧边栏拖放demo.css到Chrome窗口。

HTML5 Databases

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

用 Google Chrome，打开 Webkit demo of HTML storage

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

单击NoteTest数据库左边的三角，显示数据库的表。

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

在 NoteTest 数据库，有一个 WebKitStickyNotes 表。

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.

在侧边栏单击表，看到表格的内容。你也能在主窗口的尖括号提示符后运行SQL查询。输入select * from WebKitStickyNotes，在控制台的输入能够自动完成和tab自动完成通用的SQL关键字，并且对这个数据库分析表名。

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

如果你没有在演示页面的粘上的笔记输入任务文本，note栏就是空的。

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

返回Webkit 演示页面，然后在粘上的笔记本里输入一些文字，你能增加别的你喜欢的笔记。返回开发工具窗口然后在侧边栏双击WebKitStickyNotes