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

IndexedDB

你可以通過(guò)一個(gè)對(duì)象存儲(chǔ)記錄來(lái)審查你的 IndexedDB 數(shù)據(jù)庫(kù)和對(duì)象的存儲(chǔ)狀況及相關(guān)頁(yè)面，并且能夠清除對(duì)象存儲(chǔ)的記錄。

• 要查看可用的數(shù)據(jù)庫(kù)列表，請(qǐng)展開(kāi) IndexedDB 目錄。
• 要查看數(shù)據(jù)庫(kù)對(duì)象的存儲(chǔ)狀況，在可用的數(shù)據(jù)庫(kù)列表中選中它。

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

如果以頁(yè)面的方式查看對(duì)象存儲(chǔ)狀況，點(diǎn)擊 Previous 或者 Next Page 按鈕。你也可以通過(guò)指定記錄的鍵來(lái)選定記錄的起始分頁(yè)。

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

如果要清除對(duì)象存儲(chǔ)區(qū)，下面有兩個(gè)方法：

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

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

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

Web SQL

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

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

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

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

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

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

Cookies

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

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

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

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

選定組中的 cookie 會(huì)顯示下列字段：

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

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

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

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

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

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

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

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

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

對(duì)于該操作請(qǐng)注意以下事項(xiàng)：

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

你也可以刷新表來(lái)查看頁(yè)面 cookie 的變化。

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

應(yīng)用緩存

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

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

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

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

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

本地以及會(huì)話存儲(chǔ)

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

要?jiǎng)h除鍵值對(duì)，可采用下列方式之一：

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

要添加鍵值對(duì)：

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

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

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

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

檢查頁(yè)面資源

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

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

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

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

圖片預(yù)覽包括了維度、文件大小、MIME 類(lèi)型以及圖片 URL 等信息。

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

小提示：

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

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

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

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