ASP.NET MVC系列文章
【01】淺談Google Chrome浏覽器（理論篇）
【02】淺談Google Chrome浏覽器（操作篇）（上）
【03】淺談Google Chrome浏覽器（操作篇）（下）
【04】淺談ASP.NET架構
【05】淺談ASP.NET MVC運作過程
【06】淺談ASP.NET MVC 控制器
【07】淺談ASP.NET MVC 路由
【08】淺談ASP.NET MVC 視圖
【09】淺談ASP.NET MVC 視圖與控制器傳遞資料
【10】淺談jqGrid 在ASP.NET MVC中增删改查
【11】淺談ASP.NET 頁面之間傳值的幾種方式
【12】淺談緩存技術在ASP.NET中的運用
【13】淺談NuGet在VS中的運用
【14】淺談ASP.NET 程式釋出過程
【15】淺談資料注解和驗證
【16】淺談依賴注入
【17】淺談表單和HTML輔助方法
【18】淺談基于APS.NET身份驗證
【19】淺談ASP.NET MVC 模型
【20】淺談ASP.NET MVC 單元測試
【21】淺談ASP.NET MVC網絡安全;
【22】淺談ASP.NET MVC八大類擴充
【23】再談ASP.NET MVC Routing
【24】淺談ASP.NET 進階話題
【25】淺談大型ASP.NET MVC項目（含DEMO）
【26】下一系列：ASP.NET WebAPI
開篇概述
由于最近忙于公司産品的架構與研發，已經三個多月沒有寫部落格了，收到有些朋友的來信，問為什麼不及時更新部落格内容呢，他們說他們正期待着某些内容。對此，非常抱歉，那麼我在此也給各位朋友一些承諾，從即日起，無論再忙，也想辦法抽出時間保證每周至少一篇文章。好了，廢話不多說了，進入我們的主題吧，《詳解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
-
has-response-header
-
is
is:running
WebSocket
-
larger-than
1000
1k
-
method
-
mime-type
-
mixed-content
mixed-content:all
mixed-content:displayed
-
scheme
scheme:http
scheme:https
-
set-cookie-domain
Set-Cookie
Domain
-
set-cookie-name
Set-Cookie
-
set-cookie-value
Set-Cookie
-
status-code
上面的一些關鍵字都提及自動填充下拉菜單。要觸發自動填充菜單，請在鍵入關鍵字時後面加一個冒号。 例如，在下面的螢幕截圖中，輸入
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
以 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面闆
a.使用 Chrome DevTools 的 Timeline 面闆可以記錄和分析您的應用在運作時的所有活動。 這裡是開始調查應用中可覺察性能問題的最佳位置。
b.執行 Timeline 記錄，分析頁面加載或使用者互動後發生的每個事件。
c.在 Overview 窗格中檢視 FPS、CPU 和網絡請求。
d.點選火焰圖中的事件以檢視與其相關的詳細資訊。
e.放大顯示一部分記錄以簡化分析。
操作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.點選一次按鈕即可清除所有存儲、資料庫、緩存和服務工作線程。
操作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面闆
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/。
- 極少部分文章利用讀書、參考、引用、抄襲、複制和粘貼等多種方式整合而成的，大部分為原創。
- 如您喜歡，麻煩推薦一下；如您有新想法，歡迎提出，郵箱：[email protected]。
- 可以轉載該部落格，但必須著名部落格來源。