閱讀(8.1k) 書簽贊(0) 我要糾錯(cuò)

Chrome開發(fā)工具管理應(yīng)用存儲(chǔ)空間

2018-03-01 18:49 更新

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

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

IndexedDB

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

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

indexeddb

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

next-previous-page

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

使用面板底部的按鈕。
右鍵點(diǎn)擊或者按住 Control 鍵然后點(diǎn)擊對象存儲(chǔ)區(qū)然后在 Context （上下文）菜單中選擇 Clear 。

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

next-previous-page-1

Web SQL

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

要瀏覽可用的 Web SQL 數(shù)據(jù)庫，以樹形結(jié)構(gòu)展開 Web SQL 選項(xiàng)。
要瀏覽數(shù)據(jù)庫中可用的表，展開數(shù)據(jù)庫子樹即可。
要瀏覽表的記錄，選中表。它的屬性會(huì)在右邊的面板中顯示。
要刷新數(shù)據(jù)庫的視圖，點(diǎn)擊面板底部的刷新按鈕。

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

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

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

sql

Cookies

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

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

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

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

Name - cookie 的名稱。
Value - cookie 的值。
Domain - cookie 使用的域名。
Path - cookie 對應(yīng)的路徑。
Expires / Maximum Age - cookie 的過期時(shí)間，或者說是最大生命周期。對于會(huì)話 cookie，這個(gè)字段始終是 “Session”。
Size - cookie 包含的數(shù)據(jù)的大小，以字節(jié)為單位。
HTTP - 如果顯示了，就表示 cookies 應(yīng)該只通過 HTTP 來使用，并且 JavaScript 不能對其做出修改。
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)擊資源面板底部的清除按鈕。
右鍵點(diǎn)擊框架組并在菜單中選擇 Clear。
右鍵點(diǎn)擊表中某行 cookie 然后選擇 Clear All。

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

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

clear-all-s

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

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

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

要刷新 cookie 表，點(diǎn)擊資源面板底部的刷新按鈕 refresh 。

應(yīng)用緩存

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

app-cache

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

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 - 該資源是作為一個(gè)網(wǎng)絡(luò)接入點(diǎn)列在應(yīng)用緩存清單上的。
- Fallback - 如果該資源無法訪問則被指定為 fallback（回退）。
Size - 緩存資源的大小。

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

狀態(tài)	描述
空閑	應(yīng)用緩存處于空閑狀態(tài)
檢查	正在載入配置文件并且檢查更新
下載	資源清單發(fā)生改變，新的資源正在下載并添加到緩存中
更新準(zhǔn)備	新版本的應(yīng)用緩存已經(jīng)可以使用了
過期	應(yīng)用緩存組已經(jīng)過期

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

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

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

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

要添加鍵值對：

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

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

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

要刷新表中的數(shù)據(jù)，點(diǎn)擊面板底部的刷新按鈕 refresh 。

檢查頁面資源

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

frame-resources

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

font-resource

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

image-inspect

小提示：

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

reveal-in-network