【ASP.NET MVC系列】淺談Google Chrome瀏覽器（操做篇）（下）

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等方面。

正文

一、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 壓縮的高級概覽，並介紹了這種壓縮爲何是一種不錯的方法。
• 網頁性能最佳作法提供了更多用於優化您的網頁或應用的網絡性能的提示。

 

二、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 或火焰圖窗格中點擊右鍵並選擇相關選項，保存和打開記錄。

 

 

 

三、應用面板

（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窗格中，點擊一次按鈕註銷服務工做線程並移除其餘存儲與緩存也能夠實現此目標。

 

四、安全面板(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。
• 能夠轉載該博客，但必須著名博客來源。