Chrome開發者工具詳解(1)-Elements、Console、Sources面板

Chrome開發者工具面板

面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板這些功能面板。

這些按鈕的功能點如下：

Elements:查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器裏面得到反饋。
Console:記錄開發者開發過程中的日誌信息，且可以作爲與JS進行交互的命令行Shell。
Sources:斷點調試JS。
Network:從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），可以根據這個進行網絡性能優化。
Timeline:記錄並分析在網站的生命週期內所發生的各類事件，以此可以提高網頁的運行時間的性能。
Profiles:如果你需要Timeline所能提供的更多信息時，可以嘗試一下Profiles,比如記錄JS CPU執行時間細節、顯示JS對象和相關的DOM節點的內存消耗、記錄內存的分配細節。
Application:記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。
Security:判斷當前網頁是否安全。
Audits:對當前網頁進行網絡利用情況、網頁性能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS文件等。
注：這一篇主要講解前三個面板Elements、Console、Sources。

Elements面板

實時編輯DOM節點和CSS樣式

雙擊DOM樹視圖裏面的節點，可以實時編輯標籤屬性，修改的效果會立刻反應在瀏覽器裏面

點擊右側Style面板，可以實時修改CSS的屬性值，這裏面的所有樣式Name和Value都是可以編輯的;在每個屬性後面單擊可以添加新的樣式，如下圖：

點擊右側Computed面板，可以編輯左側選中的盒子模型參數，所有的值都是可以修改的;點擊不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin屬性值。

查看網頁的本地修改歷史
點擊Styles面板中修改過屬性的文件名，會跳轉到Source面板
在文件位置右擊選擇Local modifications,可以查看本地的所有修改記錄
點擊指定的時間點可以看到粉紅背景的刪除內容和綠色背景的添加內容

Console面板

控制檯輸出日誌

通過JS代碼或者命令行console.log()、console.warn()
和console.error()可以將日誌信息輸出到控制檯

console.log 顯示一般的基本日誌信息，當要顯示的基本日誌太多時可以使用console.group將相關的日誌進行分組
console.warn 顯示帶有黃色小圖標的警告信息
console.error 顯示帶有紅色小圖標的紅色的錯誤信息

console.assert 當第一個參數爲false時，纔會顯示第一個參數的值

可以根據JS條件判斷輸出不同的日誌信息

注：當需要換到下一行而不是回車的時候，請按Shift+Enter。

控制檯交互

JS表達式計算

在上一小節，我們已經看到可以在控制檯輸入JS表達式點擊Enter即可得到表達式的值，當你在控制檯輸入命令時，會彈出相應的智能提示框，你可以用Tab自動完成當前的建議項

選擇元素

快捷方式	描述
$()	返回與指定的CSS選擇器相匹配的第一個元素，等同於`document.querySelector()`
$$()	返回與指定的CSS選擇器相匹配的所有元素的數組，等同於`document.querySelectorAll()`
$x()	返回與指定的XPath相匹配的所有元素的數組

注：我在實際操作過程中發現$()並沒有按預期返回相匹配的第一個元素，而是返回了所有匹配的元素數組，我也給Google提供了這個issue，等待Google的答覆。

Sources面板

你可以在這個面板裏面調試你的JS代碼，也可以在工作區打開你的本地文件。

調試JS代碼

你可以點擊JS代碼塊前面的數字外來設置斷點，如果當前代碼是經過壓縮的話，可以點擊下方的花括號{}來增強可讀性，所有的斷點都會列出右側的斷點區。

設置斷點

斷點可以在DOM元素節點發生改變時、XHR生命週期狀態改變時、指定的事件執行時被觸發

① DOM元素節點發生改變時

在Elements面板中指定的DOM節點上右擊，在彈出的菜單中選擇Break on...，可以看到三個選擇項，比如我們選擇Subtree modifications，
那麼當選擇的節點裏面的子節點被添加、刪除、修改，則斷點就會被觸發。設置方式如下圖：

下圖是在我的系統裏添加指定省市指定醫院時由於增加了元素節點而觸發的斷點，通過單步調試可以看到會彈出一個div對話框供用戶添加數據。

② XHR生命週期狀態改變時

當XHR生命週期狀態發生改變或者XHR的URL與Sources面板右側的XHR Breakpoints欄設置的字符串匹配時，則斷點就會有觸發。

③ 指定的事件執行時

在Sources面板右側的XHR Breakpoints欄下面是Event Listener Breakpoints,列出了各種類型的事件，勾選你要監聽的事件，
在指定的事件執行時，斷點就會有觸發。

Chrome開發者工具詳解(2)-Network面板

注：這一篇主要講解面板Network，參考了Google的相關文檔，主要用於公司內部技術分享。

Chrome開發者工具面板

Elements:查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器裏面得到反饋。
Console:記錄開發者開發過程中的日誌信息，且可以作爲與JS進行交互的命令行Shell。
Sources:斷點調試JS。
Network:從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），可以根據這個進行網絡性能優化。
Timeline:記錄並分析在網站的生命週期內所發生的各類事件，以此可以提高網頁的運行時間的性能。
Profiles:如果你需要Timeline所能提供的更多信息時，可以嘗試一下Profiles,比如記錄JS CPU執行時間細節、顯示JS對象和相關的DOM節點的內存消耗、記錄內存的分配細節。
Application:記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。
Security:判斷當前網頁是否安全。
Audits:對當前網頁進行網絡利用情況、網頁性能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS文件等。

Network面板

概述

Network面板可以記錄頁面上的網絡請求的詳情信息，從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間、Request和Response等），可以根據這個進行網絡性能優化。

我把Google官方網站上介紹Network面板的圖貼到這裏，該面板主要包括5大塊窗格(Pane)：

Controls 控制Network的外觀和功能。
Filters 控制Requests Table具體顯示哪些內容。
Overview 顯示獲取到資源的時間軸信息。
Requests Table 按資源獲取的前後順序顯示所有獲取到的資源信息，點擊資源名可以查看該資源的詳細信息。
Summary 顯示總的請求數、數據傳輸量、加載時間信息。

其中 Requests Table 顯示如下信息列：

Name 資源名稱，點擊名稱可以查看資源的詳情情況，包括Headers、Preview、Response、Cookies、Timing。
Status HTTP狀態碼。
Type 請求的資源MIME類型。
Initiator 標記請求是由哪個對象或進程發起的（請求源）。
Parser：請求由Chrome的HTML解析器時發起的。
Redirect：請求是由HTTP頁面重定向發起的。
Script：請求是由Script腳本發起的。
Other：請求是由其他進程發起的，比如用戶點擊一個鏈接跳轉到另一個頁面或者在地址欄輸入URL地址。
Size 從服務器下載的文件和請求的資源大小。如果是從緩存中取得的資源則該列會顯示(from cache)
Time 請求或下載的時間，從發起Request到獲取到Response所用的總時間。
Timeline 顯示所有網絡請求的可視化瀑布流(時間狀態軸)，點擊時間軸，可以查看該請求的詳細信息，點擊列頭則可以根據指定的字段可以排序。

捕獲屏幕

Controls窗格包括的功能有網絡日誌錄製、日誌清理、捕獲屏幕、過濾器，視圖切換、保留日誌開關、Cache開關、網絡連接開關、網速閥值。

以捕獲屏幕爲例，點擊攝像機按鈕（捕獲屏幕），重新加載頁面即可捕獲屏幕。

雙擊其中的截屏可以放大顯示，在放大的圖下方可以點擊跳轉到上一幀或者下一幀。

單擊則可以查看該幀被捕獲時的網絡請求信息，並且在Overview上會有一條黃色豎線以標記該幀被捕獲的具體時間點。

查看DOMContentLoaded和load事件信息

DOMContentLoaded和load這兩個事件會高亮顯示。

DOMContentLoaded事件會在頁面上DOM完全加載並解析完畢之後觸發，不會等待CSS、圖片、子框架加載完成。
load事件會在頁面上所有DOM、CSS、JS、圖片完全加載完畢之後觸發。

DOMContentLoaded事件在Overview上用一條藍色豎線標記，並且在Summary以藍色文字顯示確切的時間。

load事件同樣會在Overview和Requests Table上用一條紅色豎線標記，在Summary也會以紅色文字顯示確切的時間。

查看具體資源的詳情

通過點擊某個資源的Name可以查看該資源的詳細信息，根據選擇的資源類型顯示的信息也不太一樣，可能包括如下Tab信息：

Headers 該資源的HTTP頭信息。
Preview 根據你所選擇的資源類型（JSON、圖片、文本）顯示相應的預覽。
Response 顯示HTTP的Response信息。
Cookies 顯示資源HTTP的Request和Response過程中的Cookies信息。
Timing 顯示資源在整個請求生命週期過程中各部分花費的時間。

針對上面4個Tab進行詳細講解一下各個功能：

① 查看資源HTTP頭信息

在Headers標籤裏面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和詳細的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。

② 查看資源預覽信息

在Preview標籤裏面可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應的預覽信息。下圖顯示的是當選擇的資源是JSON格式時的預覽信息。

③ 查看資源HTTP的Response信息

在Response標籤裏面可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應資源的Response響應內容。下圖顯示的是當選擇的資源是CSS格式時的響應內容。

④ 查看資源Cookies信息

如果選擇的資源在Request和Response過程中存在Cookies信息，則Cookies標籤會自動顯示出來，在裏面可以查看所有的Cookies信息。

⑤ 分析資源在請求的生命週期內各部分時間花費信息

在Timing標籤中可以顯示資源在整個請求生命週期過程中各部分時間花費信息，可能會涉及到如下過程的時間花費情況：

Queuing 排隊的時間花費。可能由於該請求被渲染引擎認爲是優先級比較低的資源（圖片）、服務器不可用、超過瀏覽器的併發請求的最大連接數（Chrome的最大併發連接數爲6）.
Stalled 從HTTP連接建立到請求能夠被髮出送出去(真正傳輸數據)之間的時間花費。包含用於處理代理的時間，如果有已經建立好的連接，這個時間還包括等待已建立連接被複用的時間。
Proxy Negotiation 與代理服務器連接的時間花費。
DNS Lookup 執行DNS查詢的時間。網頁上每一個新的域名都要經過一個DNS查詢。第二次訪問瀏覽器有緩存的話，則這個時間爲0。
Initial Connection / Connecting 建立連接的時間花費，包含了TCP握手及重試時間。
SSL 完成SSL握手的時間花費。
Request sent 發起請求的時間。
Waiting (Time to first byte (TTFB)) 是最初的網絡請求被髮起到從服務器接收到第一個字節這段時間，它包含了TCP連接時間，發送HTTP請求時間和獲得響應消息第一個字節的時間。
Content Download 獲取Response響應數據的時間花費。

TTFB這個部分的時間花費如果超過200ms，則應該考慮對網絡進行性能優化了，可以參見網絡性能優化方案及裏面的相關參考文檔。

查看資源的發起者(請求源)和依賴項

通過按住Shift並且把光標移到資源名稱上，可以查看該資源是由哪個對象或進程發起的（請求源）和對該資源的請求過程中引發了哪些資源（依賴資源）。

在該資源的上方第一個標記爲綠色的資源就是該資源的發起者（請求源），有可能會有第二個標記爲綠色的資源是該資源的發起者的發起者，以此類推。

在該資源的下方標記爲紅色的資源是該資源的依賴資源。

參考資料

Chrome開發者工具詳解(3)-Timeline面板

注：這一篇主要講解面板Timeline，參考了Google的相關文檔，主要用於公司內部技術分享。。

Timeline面板

Timeline面板是整個面板裏面最複雜的一個面板，涉及的東西比較多。可以利用這個面板來記錄和分析網頁運行過程中的所有活動行爲信息。
你可以充分利用這個面板來分析你的網頁的程序性能問題。

概述

下圖是從Google官方網站中介紹Timeline面板的圖貼到這裏，該面板主要包括4大塊窗格(Pane)：

Controls 錄製開關和控制錄製過程中需要記錄哪些信息。
Overview 網頁性能的概要信息。
Flame Chart CPU堆棧軌跡的可視化圖表(火焰圖)。在圖表裏面有1到3條虛豎線。
Details 當選擇一個指定的事件後，會顯示這個事件的更多信息；當沒有選擇事件時，會顯示指定的時間幀信息。

Flame Chart裏面的虛豎線含義：藍色標記DOMContentLoaded事件；綠色標記第一次的繪製時間點；紅色代表load事件。

其中第2塊Overview顯示了網頁性能相關的概要信息，可以通過鼠標或者區域邊界上的灰色滑塊來拖出一個指定區域範圍，Flame Chart會跟着局部放大顯示指定區域內的詳情信息。

可以通過鍵盤上的W,S來放大和縮小指定區域，通過A,D來向左或向右移動指定區域。

從Google把圖貼到這裏，這個窗格包含了三個圖表：

FPS 每秒幀數(Frames Per Second)。綠色柱狀條越高，則每秒幀數越高。在FPS圖表上方的紅色塊是標記一個長幀。
CPU 標記CPU資源的使用情況，這裏的面積圖標記着消耗CPU資源的各類事件。
NET 各種顏色的柱狀條分別顯示一種資源。柱狀條越長，代表獲取這個資源的時間越長。

CPU面積圖中各顏色的含義：藍色代表HTML文件；黃色代表腳本文件；紫色代表樣式文件；綠色代表媒體文件；灰色代表其它雜項文件。

NET圖表柱狀條兩種顏色的含義：較亮的部分表示等待時間（當資源被請求時，直到第一個字節被下載的時間)；較暗的部分表示傳輸時間(在第一個和最後一個字節被下載之間的時間)。

網頁錄製詳情

支持兩種網頁錄製操作：①錄製網頁加載，②錄製網頁交互。爲了便於分析，錄製的時間不宜太長、還要避免不必要的交互操作、並禁用瀏覽器的緩存和插件。

當錄製完成後，在Flame Chart(火焰圖)中點擊左側三角可以展開詳情，點擊其中的事件或者空白處，可以在Details裏面查看該事件或者總的概要信息。這裏麪包含的信息量很大，限於篇幅原因，下次有機會再作深入介紹，或者直接到Google上查看Timeline Event Reference這個參考文檔。

錄製中進行JS分析

在錄製之前點擊Controls中的JS Profile複選框，可以在時間軸中捕獲JavaScript的堆棧信息(會產生一定的性能消耗)，並且在Flame Chart(火焰圖)中會顯示所有被調用的JavaScript函數信息。

錄製中捕獲截屏

在錄製之前點擊Controls中的Screenshots複選框，可以在錄製過程中捕獲截屏，鼠標在Overview上從左向右移動則可以看到錄製的動畫。

繪製解析

在錄製之前點擊Controls中的Paint複選框，可以獲取繪製事件的更多細節信息（注意這會產生很多的性能消耗）。如果要深入瞭解網頁渲染方面的信息，可以點擊DevTools右上角的菜單，在More tools裏面選中Rendering settings，這裏麪包含了如下設置項：

Paint Flashing 高亮顯示網頁中需要被重繪的部分。
Layer Borders 顯示Layer邊界。
FPS Meter 每一秒的幀細節，幀速率的分佈信息和GPU的內存使用情況。
Scrolling Performance Issues 分析鼠標滾動時的性能問題，會顯示使屏幕滾動變慢的區域。
Emulate CSS Media 仿真CSS媒體類型，查看不同的設備上CSS樣式效果，可能的媒體類型選項有print、screen。

把上面的所有設置項勾選上，網頁的顯示效果如下：

查詢指定事件

你可以通過在DevTools上按Cmd+F(Mac)調出查詢框，來查看指定時間區域範圍內的指定類型的事件，點擊Cmd+G(Mac)或者Cmd+Shift+G(Mac)可以按事件發生的順序來查詢。

圖中查詢到了4個紅色標記着的Parse HTML事件，點擊Cmd+G焦點會在這4個事件移動。

運行時性能分析

上面大致介紹了Timeline面板上的各個功能菜單，那麼如何去利用該面板去分析和優化網頁程序的運行性能呢，由於篇幅限制，就不在這邊展開討論，感興趣的讀者直接到Google開發者文檔上查看，Google開發者文檔有最權威最新的信息。

參考文檔

Chrome開發者工具詳解(4)-Profiles面板

如果上篇中的Timeline面板所提供的信息不能滿足你的要求，你可以使用Profiles面板，利用這個面板你可以追蹤網頁程序的內存泄漏問題，進一步提升程序的JavaScript執行性能。

概述

當前使用的Chrome最新版爲54.0.2840.71，這個版本的Profiles面板比之前提供的功能更多也更強大，下面是該面板所包含的功能點：

Record JavaScript CPU Profile 用於分析網頁上的JavaScript函數在執行過程中的CPU消耗信息。
Take Heap Snapshot 創建堆快照用來顯示網頁上的JS對象和相關的DOM節點的內存分佈情況。
Record Allocation Timeline 從整個Heap角度記錄內存的分配信息的時間軸信息，利用這個可以實現隔離內存泄漏問題。
Record Allocation Profile 從JS函數角度記錄內存的分配信息。

Record JavaScript CPU Profile簡介

通過選擇Record JavaScript CPU Profile，然後點擊Start，結合你所要分析的具體場景，你可以重新加載網頁，或者在網頁上進行交互，甚至什麼都不操作。最後點擊Stop，完成記錄操作。

有三種不同的視圖可供選擇：

Chart 按時間先後順序顯示的火焰圖。

Heavy(Bottom Up) （自底向上）根據對性能的消耗影響列出所有的函數，並可以查看該函數的調用路徑。

Tree(Top Down) (自頂向下) 從調用棧的頂端（最初調用的位置）開始，顯示調用結構的總體的樹狀圖情況。

我們以Chart視圖爲例分析一下JS的執行的性能情況：

該視圖會以時間順序展示CPU的性能情況，視圖主要分成兩塊：

Overview 整個錄製結果的鳥瞰圖（概覽），柱形條的高度對應了調用堆棧的深度，也就是說柱形條高度越高，調用堆棧的深度越深。
Call Stacks 在錄製過程中被調用的函數的深入分析視圖（調用堆棧），橫軸表示時間，縱軸表示調用棧，自上而下的表示函數的調用情況。也就是說上面的函數調用在它下面的函數。

視圖中的函數顏色不同於其它的面板，這裏面的函數顏色標記是隨機顯示的。然而相同的函數調用顏色標記是相同的。

其中縱軸表示的函數調用堆棧高度僅僅函數的調用嵌套層次比較深，不表示其重要性很高，但是橫軸上一個很寬的柱形條則意味着函數的調用需要一個很長的時間去完成，那麼你就考慮去做一些優化操作，具體可以參見網絡性能優化方案及裏面的相關參考文檔。

將鼠標移到Call Stacks中的函數上可以顯示函數的名稱和時間相關的數據，會提供如下信息：

Name 函數名稱
Self time 函數的本次調用運行的時間，僅僅包含該函數本身的運行時間，不包含它所調用的子函數的時間。
Total time 函數的本次調用運行的總時間，包含它所調用的子函數的運行時間。
URL 函數定義在文件中所在的位置，其格式爲file.js:100，表示函數在file.js文件中的第100行。
Aggregated self time 在這次的錄製過程中函數調用運行的總時間，不包含它所調用的子函數的時間。
Aggregated total time 在這次的錄製過程中所有的函數調用運行的總時間，包含它所調用的子函數的時間。
Not optimized 如果優化器檢測到該函數有潛在的優化空間，那麼該函數會被列在這裏。

Take Heap Snapshot簡介

通過創建堆快照可以查看創建快照時網頁上的JS對象和DOM節點的內存分佈情況。利用該工具你可以創建JS的堆快照、內存分析圖、對比堆快照以及定位內存泄漏問題。選中Take Heap Snapshot,點擊Take Snapshot按鈕即可獲取快照，在每一次獲取快照前都會自動執行垃圾回收操作。

快照最初會存儲在渲染進程的內存之中，當我們點擊創建快照按鈕來查看時纔會被傳輸到DevTools中，當快照被加載到DevTools裏面並經過解析之後，在快照標題下方的文字顯示是數字就是可訪問到的JS對象總的大小。

堆快照提供了不同的視角來進行查看：

Summary 該視圖按照構造函數進行分組，用它可以捕獲對象和它們使用的內存情況，對於跟蹤定位DOM節點的內存泄漏特別有用。
Comparison 對比兩個快照的差別，用它可以對比某個操作前後的內存快照。分析操作前後的內存釋放情況以及它的引用計數，便於你確認內存是否存在泄漏以及造成的原因。
Containment 該視圖可以探測堆的具體內容，它提供了一個更適合的視圖來查看對象結構，有助於分析對象的引用情況，使用它可以分析閉包和進行更深層次的對象分析。
Statistics 統計視圖。

Summary視圖

該視圖會顯示所有的對象信息，點擊其中的一個對象進行展開可查看更詳細的實例信息。鼠標移動到某個對象上會顯示該對象實例的詳情信息。

圖中的各列的具體含義如下：

Constructor 顯示所有的構造函數，點擊每一個構造函數可以查看由該構造函數創建的所有對象。
Distance 顯示通過最短的節點路徑到根節點的距離。
Objects Count 顯示對象的個數和百分比。
Shallow size 顯示由特定的構造函數創建的所有對象的本身的內存總數。
Retained size 顯示由該對象及其它所引用的對象的總的內存總數。

Shallow size和Retained size的區別？Shallow size是對象本身佔用內存的大小，不包含它所引用的對象。Retained size是該對象本身的Shallow size，加上能從該對象直接或者間接訪問到對象的Shallow size之和。也就是說Retained size是該對象被GC之後所能回收到內存的總和。

在展開構造函數，則會列出該函數相關的所有對象實例，可以查看該對象的Shallow size和Retained size，在@符號後面的數字是該對象的唯一標識ID。

其中黃色的對象表示在它被某個JS所引用，而紅色的對象表示由黃色背景色引用被分離開出的節點。

這些構造函數都代表什麼含義呢？

(global property) 全局對象（比如window）和通過它引用的對象之間的中間對象，如果一個對象是由Person構造函數生成並被全局對象所引用，那麼它們的引用路徑關係就像這樣[global] > (global property) > Person。這跟常規的對象之間直接引用相比，採用中間對象主要是考慮性能的原因。全局對象的改變是很頻繁的，而非全局變量的屬性訪問最優化方案對全局變量是不適用的。
(roots) 它們可以是由引擎自己的目標創建的一些引用，這個引擎可以緩存引用的對象，但所有的這些引用都是弱引用，它們不會阻止引用對象被回收。
(closure) 一些函數閉包中的一組對象的引用。
(array, string, number, regexp) 一系屬性引用了數組(Array),字符串(String),數字(Number)或正則表達式的對象類型。
HTMLDivElement, HTMLAnchorElement, DocumentFragment等你的代碼中對元素(elements)的引用或者指定的document對象的引用。

Comparison視圖

通過比較多個快照之間的差異來找出內存泄露的對象，爲了驗證某個程序的操作不會引起內存泄露（通常會執行一個操作後再執行一個對應的相反操作，比如打開一個文檔後再關閉它，應該是沒有產生內存泄露問題的），你可以執行如下步驟：

在執行一個操作之前拍一個快照。
執行一個操作，通過你認爲可能會引起內存泄露的一次頁面交互操作。
執行一個相反的操作。
拍第二個快照，切換到Comparison視圖，並與第一個快照進行對比。

切換到Comparison視圖之後，就可以看到兩個不同的快照之間的差別。

Containment視圖

該視圖本質上就是應用程序的對象結構的“鳥瞰圖”，允許你去深入分析函數的閉包，瞭解應用程序底層的內存使用情況。

這個視圖提供了多個入口：

DOMWindow objects DOMWindow對象，即JS代碼全局對象。
Native objects 瀏覽器原生對象，比如DOM節點，CSS規則。

閉包小建議: 在快照的分析中命名函數的閉包相比匿名函數的閉包更容易區分。

Google上提供的例子和圖如下：

function createLargeClosure() {
  var largeStr = new Array(1000000).join('x');

  var lC = function() { // 匿名函數
    return largeStr;
  };

  return lC;
}

function createLargeClosure() {
  var largeStr = new Array(1000000).join('x');

  var lC = function lC() { // 命名函數
    return largeStr;
  };

  return lC;
}

Statistics視圖

該視圖是堆快照的總的分佈統計情況，這個直接上圖就可以了：

內存泄露示例

還是把Google提供的內存泄露的小例子貼出來：

DOM內存泄露可能比你想象的要大，考慮一下下面的例子-什麼時候#tree節點被釋放掉？

  var select = document.querySelector;
  var treeRef = select("#tree");
  var leafRef = select("#leaf");
  var body = select("body");

  body.removeChild(treeRef);

  //由於treeRef #tree不能被釋放
  treeRef = null;

  //由於leafRef的間接引用 #tree還是不能被釋放

  leafRef = null;
  //現在沒有被引用，#tree這個時候纔可以被釋放了

#leaf節點保持着對它的父節點(parentNode)的引用，這樣一直遞歸引用了#tree節點，所以只有當leafRef被設置成null後，#tree下面的整個樹節點纔有可能被垃圾回收器回收。

Record Allocation Timeline簡介

該工具是可以幫助你追蹤JS堆裏面的內存泄漏的另一大利器。

選中Record Allocation Timeline按鈕，點擊Start按鈕之後，執行你認爲可能會引起內存泄漏的操作，操作之後點擊左上角的停止按鈕即可。你可以在藍色豎線上通過縮放來過濾構造器窗格來僅僅顯示在指定的時間幀內的被分配的對象。

錄製過程中，在時間線上會出現一些藍色豎條，這些藍色豎條代表一個新的內存分配，這個新的內存分配都可以會有潛在的內存泄露問題。

通過展開對象並點擊它的值則可以在Object窗格中查看更多新分配的對象細節。

Record Allocation Profile簡介

從JS函數角度記錄並查看內存的分配信息。點擊Start按鈕，執行你想要去深入分析的頁面操作，當你完成你的操作後點擊Stop按鈕。然後會顯示一個按JS函數進行內存分配的分解圖，默認的視圖是Heavy (Bottom Up)，該視圖會把最消耗內存的函數顯示在最頂端。

下圖是切換到Chart視圖時具體的界面，點擊任意函數跳轉到Sources面板可以查看具體的函數信息。

參考文檔

Chrome開發者工具詳解(5)-Application、Security、Audits面板

這篇文章是Chrome開發者工具詳解這一系列的最後一篇，介紹DevTools最後的三個面板功能-Application面板、Security面板、Audits面板的基本功能：

Application面板簡介

該面板主要是記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。

這個面板跟前前面幾道硬菜（Network面板、Timeline面板、Profiles面板）比起來簡單多了，這裏就稍微作一下介紹：

Local Storage 如果你在開發過程中使用了local storage來存儲鍵值對(KVPs)，那麼你就可以通過Local Storage窗格來檢查、新增、修改、刪除這個鍵值對。
Application Cache 你可以使用Application Cache窗格去查看通過Application Cache API創建的資源。
Frames 將頁面上的資源按frame類別進行組織顯示。

Frames窗格

在上圖中可以查看到頂級的top是一個主文檔，在top下面是主文檔的Fonts、Images、Scripts、Stylesheets等資源。最後一個就是主文件自身。

在資源上右擊後在彈出菜單選擇Reveal in Network Panel，就會跳轉到Network面板並定位到該資源的位置。

你也可以在Sources面板裏面按frame類別來查看資源信息。

Security面板簡介

通過該面板你可以去調試當前網頁的安全和認證等問題並確保您已經在你的網站上正確地實現HTTPS。

HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全爲目標的HTTP通道，簡單講是HTTP的安全版。即HTTP下加入SSL層，HTTPS的安全基礎是SSL，因此加密的詳細內容就需要SSL。它是一個URI scheme（抽象標識符體系），句法類同http:體系。用於安全的HTTP數據傳輸。https:URL表明它使用了HTTP，但HTTPS存在不同於HTTP的默認端口及一個加密/身份驗證層（在HTTP與TCP之間）。
HTTPS和HTTP的區別主要爲以下四點：
① https協議需要到CA申請證書，一般免費證書很少，需要交費。
② http是超文本傳輸協議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協議。
③ http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，後者是443。
④ http的連接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。

如果網頁是安全的，則會顯示這樣一條消息：This page is secure (valid HTTPS).。

通過點擊View certificate可以查看main origin的服務器證書信息。
點擊左側可以查看指定源的連接和證書詳情。

如果網頁是不安全的，則會顯示：This page is not secure.。

該面板可以區分兩種類型的不安全的頁面：

如果被請求的頁面通過HTTP提供服務，那麼這個主源就會被標記爲不安全。
如果被請求的頁面是通過HTTPS獲取的，但這個頁面接着通過HTTP繼續從其他來源檢索內容，那麼這個頁面仍然被標記爲不安全。這就是所謂的混合內容頁面,混合內容頁面只是部分受到保護,因爲HTTP內容(非加密的內容)可以被嗅探者入侵,容易受到中間人攻擊。

點擊左側則提供一個跳轉到Network面板視圖的鏈接信息。