ASP.NET MVC系列文章
【02】淺談Google Chrome瀏覽器（操作篇）（上）
【03】淺談Google Chrome瀏覽器（操作篇）（下）
【04】淺談ASP.NET框架
【07】淺談ASP.NET MVC 路由
【08】淺談ASP.NET MVC 視圖
【10】淺談jqGrid 在ASP.NET MVC中增刪改查
【13】淺談NuGet在VS中的運用
【14】淺談ASP.NET 程序發布過程
開篇概述
由於最近忙於公司產品的架構與研發，已經三個多月沒有寫博客了，收到有些朋友的來信，問為什么不及時更新博客內容呢，他們說他們正期待着某些內容。對此，非常抱歉，那么我在此也給各位朋友一些承諾，從即日起，無論再忙，也想辦法抽出時間保證每周至少一篇文章。好了，廢話不多說了，進入我們的主題吧，《詳解Google Chrome瀏覽器（操作篇）（下）》
建議大家在閱讀本篇文章前，先閱讀前面寫的兩篇文章，即詳解google Chrome瀏覽器（理論篇）和詳解Google Chrome瀏覽器（操作篇）（上） 以求在內容上的系統性、連貫性和整體性。本篇文章將接着上篇文章“詳解Google Chrome瀏覽器（操作篇）（上）”寫，主要內容包括Google Chrome DevTools NetWork,TimeLine,Application,Security等方面。
正文
1、NetWork
（1）NetWork面板截圖
（2）簡要分析
a.使用網絡面板了解請求和下載的資源文件並優化網頁加載性能。
b.網絡面板基礎。Network 面板記錄頁面上每個網絡操作的相關信息，包括詳細的耗時數據、HTTP 請求與響應標頭和 Cookie，等等。
(a)使用 Network 面板記錄和分析網絡活動。
(b)整體或單獨查看資源的加載信息。
(c)過濾和排序資源的顯示方式。
(d)保存、復制和清除網絡記錄。
(e)根據需求自定義 Network 面板。
c.資源時間軸。（詳細參照：https://developers.google.cn/web/tools/chrome-devtools/network-performance/understanding-resource-timing?hl=zh-cn）
d.帶寬限制（詳細參照：https://developers.google.cn/web/tools/chrome-devtools/network-performance/network-conditions?hl=zh-cn）
e. 過濾條件
(a).選擇框內可按照關鍵字過濾。Regex表示支持正則表達式
(b).指定條件搜索。
domain：資源所在的域，即url中的域名部分。如 domain:api.github.com
has-response-header：資源是否存在響應頭，無論其值是什么。如 has-response-header：Access-Control-Allow-Origin
is：當前時間點在執行的請求。當前可用值：running
larger-than：顯示大於指定值大小規格的資源。單位是字節(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K
method：使用何種HTTP請求方式。如 GET
mime-type：也寫作content-type，是資源類型的標識符。如 text/html
scheme：協議規定。如 HTTPS
set-cookie-name：服務器設置的cookies名稱
set-cookie-value：服務器設置的cookies的值
set-cookie-domain：服務器設置的cookies的域
status-code：HTTP響應頭的狀態碼
（3）實際操作
操作1：NetWork面板概覽
Network 面板由五個窗格組成：
a.Controls。使用這些選項可以控制 Network 面板的外觀和功能。
b.Filters。 使用這些選項可以控制在 Requests Table 中顯示哪些資源。提示：按住 Cmd (Mac) 或 Ctrl(Windows/Linux) 並點擊過濾器可以同時選擇多個過濾器。
c.Overview。 此圖表顯示了資源檢索時間的時間線。如果您看到多條豎線堆疊在一起，則說明這些資源被同時檢索。
d.Requests Table。 此表格列出了檢索的每一個資源。 默認情況下，此表格按時間順序排序，最早的資源在頂部。點擊資源的名稱可以顯示更多信息。 提示：右鍵
點擊 Timeline 以外的任何一個表格標題可以添加或移除信息列。
e.Summary。 此窗格可以一目了然地告訴您請求總數、傳輸的數據量和加載時間。
默認情況下，Requests Table 會顯示以下列。您可以添加和移除列。
- Name。資源的名稱。
- Status。HTTP 狀態代碼。
- Type。已請求資源的 MIME 類型。
- Initiator。發起請求的對象或進程。值為以下選項之一：
- Parser。Chrome 的 HTML 解析器發起請求。
- Redirect。HTTP 重定向發起請求。
- Script。腳本發起請求。
- Other。某些其他進程或操作發起請求，例如用戶通過鏈接或者在地址欄中輸入網址導航到頁面。
- Size。響應標頭（通常為數百字節）加響應正文（由服務器提供）的組合大小。
- Time。從請求開始至在響應中接收到最終字節的總持續時間。
- Timeline。Timeline 列可以顯示所有網絡請求的可視瀑布。 點擊此列的標題可以顯示一個包含更多排序字段的菜單。
操作2：記錄網絡活動
在 Network 面板打開時，DevTools 在默認情況下會記錄所有網絡活動。 要記錄活動，只需在面板打開時重新加載頁面，或者等待當前加載頁面上的網絡活動。
您可以通過 record 按鈕指示 DevTools 是否記錄。 顯示紅色 (
) 表明 DevTools 正在記錄。 顯示灰色 (
) 表明 DevTools 未在記錄。 點擊此按鈕可以開始或停止記錄，也可以按鍵盤快捷鍵 Cmd/Ctrl+e。
操作3：在記錄期間捕捉屏幕截圖
a.Network 面板可以在頁面加載期間捕捉屏幕截圖。此功能稱為幻燈片。點擊攝影機圖標可以啟用幻燈片。圖標為灰色時，幻燈片處於停用狀態 (
)。如果圖標為藍色，則說明已啟用 (
)。
重新加載頁面可以捕捉屏幕截圖。屏幕截圖顯示在概覽上方。
b.將鼠標懸停在一個屏幕截圖上時，Timeline 將顯示一條黃色豎線，指示幀的捕捉時間。
c.雙擊屏幕截圖可查看放大版本。在屏幕截圖處於放大狀態時，使用鍵盤的向左和向右箭頭可以在屏幕截圖之間導航。
操作4：查看 DOMContentLoaded 和 load 事件信息
Network 面板突出顯示兩種事件：DOMContentLoaded和Load。
解析頁面的初始標記時會觸發 DOMContentLoaded。 此事件將在 Network 面板上的兩個地方顯示：
a.Overview 窗格中的藍色豎線表示事件。
b.在 Summary 窗格中，您可以看到事件的確切時間。
頁面完全加載時將觸發 load。此事件顯示在三個地方：
a.Overview 窗格中的紅色豎線表示事件。
b.Requests Table 中的紅色豎線也表示事件。
c.在 Summary 窗格中，您可以看到事件的確切時間。
操作5：查看單個資源的詳細信息
點擊資源名稱（位於 Requests Table 的 Name 列下）可以查看與該資源有關的更多信息。
可用標簽會因您所選擇資源類型的不同而不同，但下面四個標簽最常見：
- Headers。與資源關聯的 HTTP 標頭。
- Preview。JSON、圖像和文本資源的預覽。
- Response。HTTP 響應數據（如果存在）。
- Timing。資源請求生命周期的精細分解。
操作6：查看網絡耗時
點擊 Timing 標簽可以查看單個資源請求生命周期的精細分解。
生命周期按照以下類別顯示花費的時間：
- Queuing
- Stalled
- 如果適用：DNS lookup、initial connection、SSL handshake
- Request sent
- Waiting (TTFB)
- Content Download
將鼠標懸停到 Timeline 圖表內的資源上時，您也可以看到相同的信息。
操作7：查看 HTTP 標頭
點擊 Headers 可以顯示該資源的標頭。
Headers 標簽可以顯示資源的請求網址、HTTP 方法以及響應狀態代碼。 此外，該標簽還會列出 HTTP 響應和請求標頭、它們的值以及任何查詢字符串參數。
點擊每一部分旁邊的 view source 或 view parsed 鏈接，您能夠以源格式或者解析格式查看響應標頭、請求標頭或者查詢字符串參數。
您也可以點擊相應部分旁邊的 view URL encoded 或 view decoded 鏈接，以網址編碼或解碼格式查看查詢字符串參數。
操作8：預覽資源
點擊 Preview 標簽可以查看該資源的預覽。Preview 標簽可能顯示一些有用的信息，也可能不顯示，具體取決於您所選擇資源的類型。
操作9：查看 HTTP 響應內容
點擊 Response 標簽可以查看資源未格式化的 HTTP 響應內容。 Preview 標簽可能包含一些有用的信息，也可能不包含，具體取決於您所選擇資源的類型。
操作10：查看 Cookie
點擊 Cookies 標簽可以查看在資源的 HTTP 請求和響應標頭中傳輸的 Cookie 表。 只有傳輸 Cookie 時，此標簽才可用。
下面是 Cookie 表中每一列的說明：
- Name。Cookie 的名稱。
- Value。Cookie 的值。
- Domain。Cookie 所屬的域。
- Path。Cookie 來源的網址路徑。
- Expires / Max-Age。Cookie 的 expires 或 max-age 屬性的值。
- Size。Cookie 的大小（以字節為單位）。
- HTTP。指示 Cookie 應僅由瀏覽器在 HTTP 請求中設置，而無法通過 JavaScript 訪問。
- Secure。如果存在此屬性，則指示 Cookie 應僅通過安全連接傳輸。
操作11：查看 WebSocket 框架
點擊 Frames 標簽可以查看WebSocket連接信息。
只有選定資源發起 WebSocket 連接時，此標簽才會顯示。
下表對 Frames 標簽上表格中的每一列進行了說明：
- Data。消息負載。如果消息為純文本，將在此處顯示。 對於二進制操作碼，此字段將顯示操作碼的名稱和代碼。 支持以下操作碼：
- 延續框架
- 二進制框架
- 連接關閉框架
- Ping 框架
- Pong 框架
- Length。消息負載的長度（以字節為單位）。
- Time。消息創建時的時間戳。
消息根據其類型進行彩色編碼：
- 傳出文本消息為淺綠色。
- 傳入文本消息為白色。
- WebSocket 操作碼為淺黃色。
- 錯誤為淺紅色。
有關當前實現的說明：
-
要在每條新消息到達后刷新 Frames 表，請點擊左側的資源名稱。
-
Frames 表格僅保留最后 100 條
WebSocket消息。
操作12：查看資源發起者和依賴項
按住 Shift 並將鼠標懸停在資源上，可以查看其發起者和依賴項。 本部分將您懸停的資源稱為目標。
目標上方的第一個綠色編碼資源為目標的發起者。 如果上方存在第二個也是綠色編碼的資源，那么該資源將是發起者的發起者。 目標下方紅色編碼的任何資源都是目標的依賴項。
下方的屏幕截圖中，目標是 dn/。此目標的發起者為以 rs=AA2Y 開頭的腳本。 發起者 (rs=AA2Y) 的發起者為 google.com。 最后，dn.js 是目標 (dn/) 的依賴項。
請記住，對於具有大量資源的頁面，您可能無法看到所有的發起者或依賴項。
操作13：排序請求
默認情況下，Requests Table 中的資源按照每個請求的開始時間排序，最早的請求位於頂部。
點擊列標頭可以按照該標頭下每個資源的值對表格排序。 再次點擊相同的標頭可以將排序順序更改為升序或降序。
Timeline 列與其他列不同。點擊此列時，它將顯示一個由多個排序字段組成的菜單：
- Timeline。按每個網絡請求的開始時間排序。這是默認排序方式，與按 Start Time 選項排序相同。
- Start Time。按每個網絡請求的開始時間排序（與按 Timeline 選項排序相同）。
- Response Time。按每個請求的響應時間排序。
- End Time。按每個請求完成的時間排序。
- Duration。按每個請求的總時間排序。選擇此過濾器可以確定哪些資源的加載時間最長。
- Latency。按請求開始與響應開始之間的時間排序。 選擇此過濾器可以確定哪些資源至第一字節 (TTFB) 的時間最長。
操作14：過濾請求
Network 面板提供了多種方式來過濾要顯示哪些資源。 點擊 Filter 按鈕 (
) 可以隱藏或顯示 Filters 窗格。
使用內容類型按鈕可以僅顯示選定內容類型的資源。
注：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 並點擊過濾器可以同時啟用多個過濾器。
Filter 文本字段看似非常強大。如果您在其中輸入任意字符串，Network 面板僅會顯示文件名與給定字符串匹配的資源。
Filter 文本字段還支持各種關鍵詞，這樣，您可以按照各種屬性對資源排序，例如使用 larger-than 關鍵字按文件大小進行排序。
下文列表說明了所有關鍵字。
domain。僅顯示來自指定域的資源。您可以使用通配符字符 (*) 來包含多個域。 例如，*.com將顯示來自以.com結尾的所有域名的資源。 DevTools 會使用它遇到的所有域填充自動填充下拉菜單。has-response-header。顯示包含指定 HTTP 響應標頭的資源。 DevTools 會使用它遇到的所有響應標頭填充自動填充下拉菜單。is。使用is:running可以查找WebSocket資源。larger-than。顯示大於指定大小的資源（以字節為單位）。 將值設為1000等同於設置為1k。method。顯示通過指定 HTTP 方法類型檢索的資源。 DevTools 會使用它遇到的所有 HTTP 方法填充下拉菜單。mime-type。顯示指定 MIME 類型的資源。DevTools 會使用它遇到的所有 MIME 類型填充下拉菜單。mixed-content。顯示所有混合內容資源 (mixed-content:all)，或者僅顯示當前顯示的資源 (mixed-content:displayed)。scheme。顯示通過未保護 HTTP (scheme:http) 或受保護 HTTPS (scheme:https) 檢索的資源。set-cookie-domain。顯示具有Set-Cookie標頭並帶有與指定值匹配的Domain屬性的資源。 DevTools 會使用它遇到的所有 Cookie 域填充自動填充下拉菜單。set-cookie-name。顯示具有Set-Cookie標頭並且名稱與指定值匹配的資源。 DevTools 會使用它遇到的所有 Cookie 名稱填充自動填充下拉菜單。set-cookie-value。顯示具有Set-Cookie標頭並且值與指定值匹配的資源。 DevTools 會使用它遇到的所有 Cookie 值填充自動填充下拉菜單。status-code。僅顯示 HTTP 狀態代碼與指定代碼匹配的資源。 DevTools 會使用它遇到的所有狀態代碼填充自動填充下拉菜單。
上面的一些關鍵字都提及自動填充下拉菜單。要觸發自動填充菜單，請在鍵入關鍵字時后面加一個冒號。 例如，在下面的屏幕截圖中，輸入 domain: 觸發了自動填充下拉菜單。
操作15：復制、保存和清除網絡信息
在 Requests Table 中點擊右鍵可以復制、保存或刪除網絡信息。 某些選項取決於上下文，因此，如果您希望操作單個資源，則需要右鍵點擊該資源所在的行。
下面的列表說明了每一個選項。
- Copy Response。將選定資源的 HTTP 響應復制到系統剪貼板。
- Copy as cURL。以cURL命令字符串的形式將選定資源的網絡請求復制到系統剪貼板。請參閱以cURL命令形式復制請求。
- Copy All as HAR。以HAR數據形式將所有資源復制到系統剪貼板。HAR 文件包含用於說明網絡“瀑布”的 JSON 數據結構。多款第三方工具可以依據 HAR 文件中的數據重建網絡瀑布。
- Save as HAR with Content。將所有網絡數據及每一個頁面資源保存到 HAR 文件。 二進制資源（包括圖像）以 Base64 編碼文本的形式編碼。
- Clear Browser Cache。清除瀏覽器緩存。提示：您也可以從Network Conditions抽屜式導航欄中啟用或停用瀏覽器緩存。
- Clear Browser Cookies。清除瀏覽器的 Cookie。
- Open in Sources Panel。在 Sources 面板中打開選定資源。
- Open Link in New Tab。在新標簽中打開選定資源。您也可以在 Network 表中雙擊資源名稱。
- Copy Link Address。將資源網址復制到系統剪貼板。
- Save。保存選定的文本資源。僅在文本資源上顯示。
- Replay XHR。重新發送選定的
XMLHTTPRequest。僅在 XHR 資源上顯示。
以 cURL 命令形式復制一個或所有請求
cURL 是一種用於進行 HTTP 事務的命令行工具。
在 Requests Table 中右鍵點擊某個資源，將鼠標懸停在 Copy 上，然后選擇 Copy as cURL，復制 Network 面板檢測到的所有資源的 cURL 請求的字符串。
選擇 Copy as cURL，復制 Network 面板檢測到的所有資源的 cURL 請求的字符串。
當您復制全部時，過濾將被忽略（例如，如果您過濾 Network 面板僅顯示 CSS 資源，然后按 Copy All as cURL，您將獲取所有檢測到的資源，而不只是 CSS）。
操作16：自定義 Network 面板
默認情況下，Requests Table 會使用小行顯示資源。點擊 Use large resource rows 按鈕 (
) 可以增大每一行的大小。
大行可以讓某些列顯示兩個文本字段：主要字段和次要字段。 列標頭指示次要字段的含義。
添加和移除表格列
右鍵點擊 Requests Table 中的任一標題可以添加或移除列。
導航時保留網絡日志。
默認情況下，每當您重新加載當前頁面或者加載不同的頁面時，網絡活動記錄會被丟棄。啟用 Preserve log 復選框可以在這些情況下保存網絡日志。
新記錄將附加到 Requests Table 的底部。
操作17：其他資源
要詳細了解如何優化您的應用的網絡性能，請參閱下面的資源：
- 使用PageSpeed Insights確定可以應用到您網站的性能最佳做法，以及使用PageSpeed優化工具將應用這些最佳做法的流程自動化。
- Google Chrome中的高性能網絡討論了 Chrome 網絡內部機制，以及您如何充分利用它們讓您的網站更快。
- gzip壓縮的工作原理提供了 gzip 壓縮的高級概覽，並介紹了這種壓縮為什么是一種不錯的方法。
- 網頁性能最佳做法提供了更多用於優化您的網頁或應用的網絡性能的提示。
2、TimeLine
（1）TimeLine面板
（2）簡要分析
a.使用 Chrome DevTools 的 Timeline 面板可以記錄和分析您的應用在運行時的所有活動。 這里是開始調查應用中可覺察性能問題的最佳位置。
b.執行 Timeline 記錄，分析頁面加載或用戶交互后發生的每個事件。
c.在 Overview 窗格中查看 FPS、CPU 和網絡請求。
d.點擊火焰圖中的事件以查看與其相關的詳細信息。
e.放大顯示一部分記錄以簡化分析。
（3）實際操作
操作1：Timeline 面板包含以下四個窗格：
(a).Controls。開始記錄，停止記錄和配置記錄期間捕獲的信息。
(b).Overview。 頁面性能的高級匯總。更多內容請參見下文。
(c).火焰圖。 CPU 堆疊追蹤的可視化。您可以在火焰圖上看到一到三條垂直的虛線。藍線代表 DOMContentLoaded 事件。 綠線代表首次繪制的時間。 紅線代表 load 事件。
(d).Details。選擇事件后，此窗格會顯示與該事件有關的更多信息。 未選擇事件時，此窗格會顯示選定時間范圍的相關信息。
操作2：Overview 窗格
Overview 窗格包含以下三個圖表：
a.FPS。每秒幀數。綠色豎線越高，FPS 越高。 FPS 圖表上的紅色塊表示長時間幀，很可能會出現卡頓
b.CPU。 CPU 資源。此面積圖指示消耗 CPU 資源的事件類型。
c.NET。每條彩色橫杠表示一種資源。橫杠越長，檢索資源所需的時間越長。 每個橫杠的淺色部分表示等待時間（從請求資源到第一個字節下載完成的時間）。
深色部分表示傳輸時間（下載第一個和最后一個字節之間的時間）。
橫杠按照以下方式進行彩色編碼：
- HTML 文件為藍色。
- 腳本為黃色。
- 樣式表為紫色。
- 媒體文件為綠色。
- 其他資源為灰色。
操作3：做記錄
要記錄頁面加載，請打開 Timeline 面板，打開想要記錄的頁面，然后重新加載頁面。 Timeline 面板會自動記錄頁面重新加載。要記錄頁面交互，請打開 Timeline 面板，然后按 Record 按鈕 (
) 或者鍵入鍵盤快捷鍵 Cmd+E (Mac) 或 Ctrl+E(Windows / Linux)，開始記錄。記錄時，Record 按鈕會變成紅色。執行頁面交互，然后按 Record 按鈕或再次鍵入鍵盤快捷鍵停止記錄。完成記錄后，DevTools 會猜測哪一部分記錄與您最相關，並自動縮放到那一個部分。
記錄提示
- 盡可能保持記錄簡短。簡短的記錄通常會讓分析更容易。
- 避免不必要的操作。避免與您想要記錄和分析的活動無關聯的操作（鼠標點擊、網絡加載，等等）。例如，如果您想要記錄點擊 Login 按鈕后發生的事件，請不要滾動頁面、加載圖像，等等。
- 停用瀏覽器緩存。記錄網絡操作時，最好從 DevTools 的 Settings 面板或Network Conditions抽屜式導航欄停用瀏覽器的緩存。
- 停用擴展程序。Chrome 擴展程序會給應用的 Timeline 記錄增加不相關的噪聲。 以隱身模式打開 Chrome 窗口或者創建新的Chrome用戶個人資料，確保您的環境中沒有擴展程序。
操作4：查看記錄詳細信息
在火焰圖中選擇事件時，Details 窗格會顯示與事件相關的其他信息。
一些標簽（如 Summary）適用於所有事件類型。其他標簽則僅對特定事件類型可用。了解與每個記錄類型相關的詳細信息。
操作5：在記錄期間捕捉屏幕截圖
Timeline 面板可以在頁面加載時捕捉屏幕截圖。此功能稱為幻燈片。
在您開始記錄之前，請在 Controls 窗格中啟用 Screenshots 復選框，以便捕捉記錄的屏幕截圖。 屏幕截圖顯示在 Overview 窗格下方。
操作6：分析 JavaScript
開始記錄前，請啟用 JS Profile 復選框，以便在您的時間線記錄中捕捉 JavaScript 堆棧。 啟用 JS 分析器后，您的火焰圖會顯示調用的每個 JavaScript 函數。
操作7：分析繪制
開始記錄前，請啟用 Paint 復選框，以便獲取有關 Paint 事件的更多數據分析。 啟用繪制分析並點擊 Paint 事件后，新 Paint Profiler 標簽會出現在 Details 窗格中，后者顯示了許多與事件相關的更精細信息。
操作8：渲染設置
打開主 DevTools 菜單，然后選擇More tools > Rendering settings 訪問渲染設置，這些設置在調試繪制問題時非常有用。渲染設置會作為一個標簽顯示在 Console 抽屜式導航欄（如果隱藏，請按 esc 顯示抽屜式導航欄）旁邊
操作9：搜索記錄
查看事件時，您可能希望側重於一種類型的事件。例如，您可能需要查看每個 Parse HTML 事件的詳細信息。在 Timeline 處於焦
點時，按 Cmd+F (Mac) 或 Ctrl+F (Windows / Linux) 以打開一個查找工具欄。鍵入您想要檢查的事件類型的名稱，如 Event。工具
欄僅適用於當前選定的時間范圍。選定時間范圍以外的任何事件都不會包含在結果中。利用上下箭頭，您可以按照時間順序在結果中移動。
所以，第一個結果表示選定時間范圍內最早的事件，最后一個結果表示最后的事件。每次按向上或向下箭頭會選擇一個新事件，因此，您可以
在 Details 窗格中查看其詳細信息。按向上和向下箭頭等同於在火焰圖中點擊事件。
操作10：在 Timeline 部分上放大
您可以放大顯示一部分記錄，以便簡化分析。使用 Overview 窗格可以放大顯示一部分記錄。 放大后，火焰圖會自動縮放以匹配同一部分。
要在 Timeline 部分上放大，請執行以下操作：
- 在 Overview 窗格中，使用鼠標拖出 Timeline 選擇。
- 在標尺區域調整灰色滑塊。
選擇部分后，可以使用 W、A、S 和 D 鍵調整您的選擇。 W 和 S 分別代表放大和縮小。 A 和 D 分別代表左移和右移。
操作11：保存和打開記錄
您可以在 Overview 或火焰圖窗格中點擊右鍵並選擇相關選項，保存和打開記錄。
3、應用面板
（1）Application面板
（2）簡要分析
a.在 Chrome 52 之后資源面板更名為應用面板。
b.使用資源面板檢查加載的所有資源，包括IndexedDB與Web SQL數據庫，本地和會話存儲，cookie，應用程序緩存，圖像，字體和樣式表。
c.查看和修改本地存儲與會話存儲。
d.檢查和修改 IndexedDB 數據庫。
e.對 Web SQL 數據庫執行語句。
f.查看應用緩存和服務工作線程緩存。
g.點擊一次按鈕即可清除所有存儲、數據庫、緩存和服務工作線程。
（3）實際操作
操作1：本地存儲
a.如果您使用本地存儲存儲鍵值對 (KVP)，則可以從 Local Storage 窗格中檢查、修改和刪除這些 KVP。
說明：
- 雙擊鍵或值可以修改相應的值。
- 雙擊空白單元格可以添加新 KVP。
-
點擊 KVP ，然后按 Delete 按鈕 (
) 可以刪除該 KVP。 只需點擊一次按鈕，即可從Clear storage窗格擦除所有本地存儲數據。 -
如果您使用一種可以創建、刪除或修改 KVP 的方式與頁面交互，則不會看到這些更改實時更新。 點擊 refresh 按鈕 (
) 可以查看您的更改。
操作2：Session storage
Session Storage 窗格與 Local Storage 窗格的工作方式相同。 參閱上面的本地存儲部分，了解如何查看和編輯會話存儲。
操作3：IndexedDB
a.使用 IndexedDB 窗格可以檢查、修改和刪除 IndexedDB 數據。展開 IndexedDB 窗格時，IndexedDB 下的第一個級別是數據庫。 如果存在多個活動的數據庫
，您會看到多個條目。 在下面的屏幕截圖中，頁面只有一個活動的數據庫。
b.點擊數據庫的名稱可以查看該數據庫的安全源、名稱和版本。
c.展開數據庫可以查看其鍵值對 (KVP)。
d.使用 Start from key 文本字段旁的箭頭按鈕可以在 KVP 的頁面之間移動。展開值並雙擊可以編輯該值。在您添加、修改或刪除值時，這些更改不會實時更新。
點擊 refresh 按鈕可以更新數據庫。
e.在 Start from key 文本字段中輸入鍵可以過濾出值小於該值的所有鍵。
說明：
在您添加、修改或刪除值時，這些更改不會實時更新。 點擊 refresh 按鈕 () 可以更新數據庫。點擊 Clear Object Store 按鈕 (
) 可以刪除數據庫
中的所有數據。 從Clear storage窗格中，點擊一次按鈕注銷服務工作線程並移除其他存儲與緩存也可以實現此目標。
4、安全面板(Security)
（1）Security面板
（2）簡要分析
a.使用安全面板調試混合內容問題，證書問題等等。
b.提供了重要的安全性和數據完整性。
c.在Chrome DecTools中使用Security面板調試安全問題前，請確保您已經在自己的網站上恰當地實現了https。
d.使用 Security Overview 可以立即查看當前頁面是否安全。
e.檢查各個源以查看連接和證書詳情（安全源）或找出具體哪些請求未受保護（非安全源）。
（3）實際操作
操作1： Security Overview
a.要查看頁面的整體安全性，請打開 DevTools，然后轉至 Security 面板。您首先會看到 Security Overview,Security Overview 會一目了然地告訴您頁面是否安全。
安全頁面會通過消息 This page is secure (valid HTTPS). 指示。
b.點擊 View certificate 查看主源的服務器證書。 非安全頁面會通過消息 This page is not secure. 指示。
c.Security 面板可以區分兩種非安全頁面。 如果請求的頁面通過 HTTP 提供，則主源會被標記為不安全。
d.如果請求的頁面通過 HTTPS 檢索，但頁面會繼續使用 HTTP 檢索其他源的內容，然后頁面仍然會被標記為不安全。這稱為混合內容頁面。 混合內容頁面僅受部分保護
，因為 HTTP 內容可以被嗅探器獲取到且易受到中間人攻擊。
e.點擊 View request in Network Panel 打開 Network 面板的過濾視圖，然后查看具體是哪些請求通過 HTTP 提供。 這將顯示來自所有源的所有未受保護的請求。
操作2：檢查源
a.使用左側面板可以檢查各個安全或非安全源。點擊安全源查看該源的連接和證書詳情。
b.如果您點擊非安全源，Security 面板會提供 Network 面板過濾視圖的鏈接。
c.點擊鏈接可以查看具體是源的哪些請求通過 HTTP 提供。
總結
本篇主要對Network,TimeLine,Application,Security做了簡要分析，並做了簡要的操作指示。
到目前為止，對Google的講解基本結束了，若大家存在什么問題，可以把問題通過郵件發送給我，也可以在博客下面提問題。
參看文獻：
【01】http://www.cnblogs.com/ys-ys/p/5625409.html
【02】https://developers.google.cn/web/tools/chrome-devtools/evaluate-performance/timeline-tool?hl=zh-cn
【03】https://developers.google.cn/web/tools/chrome-devtools/manage-data/local-storage?hl=zh-cn
【04】https://developers.google.cn/web/tools/chrome-devtools/?hl=zh-cn#_9
【05】https://developers.google.cn/web/tools/chrome-devtools/security?hl=zh-cn
- 感謝您的閱讀，若有不足之處，歡迎指教，共同學習、共同進步。
- 博主網址：http://www.cnblogs.com/wangjiming/。
- 極少部分文章利用讀書、參考、引用、抄襲、復制和粘貼等多種方式整合而成的，大部分為原創。
- 如您喜歡，麻煩推薦一下；如您有新想法，歡迎提出，郵箱：2016177728@qq.com。
- 可以轉載該博客，但必須著名博客來源。