管理應(yīng)用存儲空間

Resources 面板允許你檢查應(yīng)用程序的本地資源，包括 IndexedDB， Web SQL 數(shù)據(jù)庫，本地和會話(session)存儲，cookies，以及應(yīng)用緩存資源。你也可以快速可視化檢查應(yīng)用資源，包括圖片、字體、以及樣式表。

IndexedDB

你可以通過一個對象存儲記錄來審查你的 IndexedDB 數(shù)據(jù)庫和對象的存儲狀況及相關(guān)頁面，并且能夠清除對象存儲的記錄。

• 要查看可用的數(shù)據(jù)庫列表，請展開 IndexedDB 目錄。
• 要查看數(shù)據(jù)庫對象的存儲狀況，在可用的數(shù)據(jù)庫列表中選中它。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/indexeddb.png" alt="indexeddb" />

如果以頁面的方式查看對象存儲狀況，點擊 Previous 或者 Next Page 按鈕。你也可以通過指定記錄的鍵來選定記錄的起始分頁。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/next-previous-page.png" alt="next-previous-page" />

如果要清除對象存儲區(qū)，下面有兩個方法：

• 使用面板底部的按鈕http://wiki.jikexueyuan.com/project/chrome-devtools/images/clear.png" alt="clear" />。
• 右鍵點擊或者按住 Control 鍵然后點擊對象存儲區(qū)然后在 Context （上下文） 菜單中選擇 Clear 。

要查看數(shù)據(jù)庫的屬性，在數(shù)據(jù)庫列表中選中它即可。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/next-previous-page-1.png" alt="next-previous-page-1" />

Web SQL

你可以檢查 Web SQL 數(shù)據(jù)庫的內(nèi)容，并且對其使用 SQL 命令。

• 要瀏覽可用的 Web SQL 數(shù)據(jù)庫，以樹形結(jié)構(gòu)展開 Web SQL 選項。
• 要瀏覽數(shù)據(jù)庫中可用的表，展開數(shù)據(jù)庫子樹即可。
• 要瀏覽表的記錄，選中表。它的屬性會在右邊的面板中顯示。
• 要刷新數(shù)據(jù)庫的視圖，點擊面板底部的刷新按鈕http://wiki.jikexueyuan.com/project/chrome-devtools/images/refresh.png" alt="refresh" />。

你可以使用 SQL 命令來執(zhí)行查詢 Web SQL 數(shù)據(jù)庫，并且能以表格格式查看查詢結(jié)果。當你輸入一條命令或者表名的時候， DevTools 會提供代碼提示來告訴你支持的 SQL 命令和語句，以及數(shù)據(jù)庫中含有的全部表的名稱。

如果要在數(shù)據(jù)庫上執(zhí)行 SQL 命令：

1. 選擇包含你想查詢的表的數(shù)據(jù)庫。
2. 在右側(cè)面板中顯示的提示符下，輸入你想執(zhí)行的 SQL 語句。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/sql.png" alt="sql" />

Cookies

cookies 資源選項卡允許你查看由 HTTP 頭或者 JavaScript 所創(chuàng)建的 cookies 的詳細信息。你可以清除特定域名下的個別 cookies，或者全部 cookies。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/cookies.png" alt="cookies" />

當你展開 Cookies 目錄的時候，它會顯示主文檔下域名的列表以及全部加載的框架。選中“框架組”中的一條會顯示其全部的 cookies，包括那個框架下的全部資源。這種分組有兩個需要注意的地方：

• 源自不同域名的 cookies 可能顯示在一個組中。
• 相同的 cookie 可能出現(xiàn)在幾個組中。

選定組中的 cookie 會顯示下列字段：

• Name - cookie 的名稱。
• Value - cookie 的值。
• Domain - cookie 使用的域名。
• Path - cookie 對應(yīng)的路徑。
• Expires / Maximum Age - cookie 的過期時間，或者說是最大生命周期。對于會話 cookie，這個字段始終是 “Session”。
• Size - cookie 包含的數(shù)據(jù)的大小，以字節(jié)為單位。
• HTTP - 如果顯示了，就表示 cookies 應(yīng)該只通過 HTTP 來使用，并且 JavaScript 不能對其做出修改。
• Secure - 如果顯示了，表明該 cookie 的通信唯有加密時才能傳輸。

你可以清除（刪除）單個 cookie，選定組中的全部 cookie，或者某一個特定域名下的全部 cookie。如果給定的一個域名下的同一個 cookie 被兩個組引用，刪除該域名下所有的 cookie 會影響到這兩個組。

要清除單個 cookie，可以選擇下列兩種方式之一：

• 選擇表中的一個 cookie，然后點擊面板底部的刪除按鈕。
• 右鍵點擊某個 cookie 并選擇 Delete。

要清除特定組中的全部 cookie 有以下幾種方式：

• 點擊資源面板底部的清除按鈕http://wiki.jikexueyuan.com/project/chrome-devtools/images/clear-1.png" alt="clear" />。
• 右鍵點擊框架組并在菜單中選擇 Clear。
• 右鍵點擊表中某行 cookie 然后選擇 Clear All。

要清除特定域名下的全部 cookie：

• 鍵盤右鍵 + 點擊（或者 Ctrl + 點擊）特定域名的表中的一條 cookie。
• 在上下文菜單中，選擇 Clear All from domain，domain 指的是目標域名。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/clear-all-cookies.png" alt="clear-all-cookies" />

對于該操作請注意以下事項：

• 只有在完全相同的域名下的 cookie 會被刪除的；子域名或者頂級域名是不受影響的。
• 這只適用于 cookies 表中可見的域名。

你也可以刷新表來查看頁面 cookie 的變化。

要刷新 cookie 表，點擊資源面板底部的刷新按鈕http://wiki.jikexueyuan.com/project/chrome-devtools/images/refresh-1.png" alt="refresh" />。

應(yīng)用緩存

你可以檢查 Chrome 已經(jīng)緩存的資源，這些資源由當前文檔指明的的應(yīng)用緩存清單文件來決定。你可以查看程序應(yīng)用緩存的當前狀態(tài)（比如，空閑狀態(tài)或者下載狀態(tài)），以及瀏覽器的連接狀態(tài)。（聯(lián)機或者脫機）

http://wiki.jikexueyuan.com/project/chrome-devtools/images/app-cache.png" alt="app-cache" />

已加載的資源會以表的形式顯示，表中每個資源都包含以下屬性：

• Resource - 資源的 URL。
• Type - 已加載的資源類型，可能含有下列值：
  • Master - 由于該資源的 [配置]( The resource was added to the cache because its manifest attribute indicated that this was its cache.) 屬性表明它是緩存所以將該資源放到緩存中。
  • Explici - 該資源是顯式列在應(yīng)用緩存清單上的。
  • Network - 該資源是作為一個網(wǎng)絡(luò)接入點列在應(yīng)用緩存清單上的。
  • Fallback - 如果該資源無法訪問則被指定為 fallback（回退）。
• Size - 緩存資源的大小。

Resources 面板上利用不同顏色的圖標（綠，黃，紅）來顯示應(yīng)用緩存的當前狀態(tài)。下面試可能出現(xiàn)的狀態(tài)值以及相應(yīng)的描述：

本地以及會話存儲

本地以及會話存儲面板允許你瀏覽、編輯、創(chuàng)建和刪除使用 Web Storage API 創(chuàng)建的本地和會話存儲鍵值對。

要刪除鍵值對，可采用下列方式之一：

• 選中表中的數(shù)據(jù)，然后執(zhí)行下列操作之一：
  1. 點擊 Delete 按鈕。
  2. 按鍵盤的刪除鍵。
• 右鍵點擊或者按住 Control 再點擊數(shù)據(jù)項然后選擇 Delete。

要添加鍵值對：

• 雙擊鍵表中的空行然后輸入鍵的名稱。
• 雙擊該行中相應(yīng)的值然后輸入鍵對應(yīng)的值。

要編輯已有的鍵值對，采取下列操作之一：

• 雙擊你要編輯的位置。
• 右鍵點擊或者按住 Control 再點擊你想要編輯的數(shù)據(jù)然后選擇 Edit。

要刷新表中的數(shù)據(jù)，點擊面板底部的刷新按鈕http://wiki.jikexueyuan.com/project/chrome-devtools/images/refresh.png" alt="refresh" />。

檢查頁面資源

你可以查看主文檔的資源，包括圖片、腳本、字體以及所有加載項。頁面資源的頂級目錄是文檔項，包括主要的文檔，以及嵌套的項。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/frame-resources.png" alt="frame-resources" />

你可以展開某一項來查看按類型組織的資源，展開某個類型來查看該類型的所有資源，以及選中某一資源在右邊面板中預覽其狀態(tài)。下面是一個字體資源的預覽：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/font-resource.png" alt="font-resource" />

圖片預覽包括了維度、文件大小、MIME 類型以及圖片 URL 等信息。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/image-inspect.png" alt="image-inspect" />

小提示：

• 要打開網(wǎng)絡(luò)面板中的資源，右鍵點擊或者按住 Control 再點擊相應(yīng)資源然后選擇 Reveal In Resources Panel。在該菜單中你就可以將資源的 URL 復制到系統(tǒng)的剪貼板中，或者是在新的選項卡中打開它。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/reveal-in-network.png" alt="reveal-in-network" />

• 要查看嵌套項中對應(yīng)的盒子模型的邊界，將鼠標懸停在資源面板的某一項之上即可。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/frame-selected.png" alt="frame-selected" />