面板上包含了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面板

實時編輯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自動完成當前的建議項

• 選擇元素
  

注： 我在實際操作過程中發現$()並沒有按預期返回相匹配的第一個元素，而是返回了所有匹配的元素陣列，我也給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,列出了各種型別的事件，勾選你要監聽的事件，
在指定的事件執行時，斷點就會有觸發。

Network面板

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

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

1. Controls 控制Network的外觀和功能。
2. Filters 控制Requests Table具體顯示哪些內容。
3. Overview 顯示獲取到資源的時間軸資訊。
4. Requests Table 按資源獲取的前後順序顯示所有獲取到的資源資訊，點選資源名可以檢視該資源的詳細資訊。
5. 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並且把游標移到資源名稱上，可以檢視該資源是由哪個物件或程序發起的（請求源）和對該資源的請求過程中引發了哪些資源（依賴資源）。

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

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

Timeline面板

Timeline面板是整個面板裡面最複雜的一個面板，涉及的東西比較多。可以利用這個面板來記錄和分析網頁執行過程中的所有活動行為資訊。
你可以充分利用這個面板來分析你的網頁的程式效能問題。

概述

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

1. Controls 錄製開關和控制錄製過程中需要記錄哪些資訊。
2. Overview 網頁效能的概要資訊。
3. Flame Chart CPU堆疊軌跡的視覺化圖表(火焰圖)。在圖表裡面有1到3條虛豎線。
4. Details 當選擇一個指定的事件後，會顯示這個事件的更多資訊；當沒有選擇事件時，會顯示指定的時間幀資訊。
5. Flame Chart裡面的虛豎線含義：藍色標記DOMContentLoaded事件；綠色標記第一次的繪製時間點；紅色代表load事件。
   

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

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

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

1. FPS 每秒幀數(Frames Per Second)。綠色柱狀條越高，則每秒幀數越高。在FPS圖表上方的紅色塊是標記一個長幀。
2. CPU 標記CPU資源的使用情況，這裡的面積圖示記著消耗CPU資源的各類事件。
3. 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開發者文件有最權威最新的資訊。

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檢視

通過比較多個快照之間的差異來找出記憶體洩露的物件，為了驗證某個程式的操作不會引起記憶體洩露（通常會執行一個操作後再執行一個對應的相反操作，比如開啟一個文件後再關閉它，應該是沒有產生記憶體洩露問題的），你可以執行如下步驟：

1. 在執行一個操作之前拍一個快照。
2. 執行一個操作，通過你認為可能會引起記憶體洩露的一次頁面互動操作。
3. 執行一個相反的操作。
4. 拍第二個快照，切換到Comparison檢視，並與第一個快照進行對比。
   

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

Containment檢視

該檢視本質上就是應用程式的物件結構的“鳥瞰圖”，允許你去深入分析函式的閉包，瞭解應用程式底層的記憶體使用情況。

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

• DOMWindow objects DOMWindow物件，即JS程式碼全域性物件。
• Native objects 瀏覽器原生物件，比如DOM節點，CSS規則。

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Statistics檢視

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

記憶體洩露示例

還是把Google提供的記憶體洩露的小例子貼出來：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

#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面板可以檢視具體的函式資訊。

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面板檢視的連結資訊。

中間人攻擊(Man-in-the-Middle Attack,“MITM攻擊”)是一種“間接”的入侵攻擊，這種攻擊模式是通過各種技術手段將受入侵者控制的一臺計算機虛擬放置在網路連線中的兩臺通訊計算機之間，這臺計算機就稱為“中間人”。

Audits面板

對當前網頁進行網路利用情況、網頁效能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS檔案等。

選中Network Utilization、Web Page Performance，點選Run按鈕，將會對當前頁面進行網路利用率和頁面的效能優化作出診斷，並給出相應的優化建議。