Chome開發者工具

時間 2019-11-30

標籤 chome 開發者工具欄目職業生涯简体版

原文原文鏈接

參考：css

開發者工具中文文檔：http://www.css88.com/doc/chrome-devtools/html

https://www.cnblogs.com/charliechu/p/5948448.htmlgit

https://blog.csdn.net/Letasian/article/details/78461438github

https://www.jianshu.com/p/3c8629d99d0aweb

https://blog.csdn.net/qq_24924483/article/details/56488135sql

Chrome 開發者工具

Chrome 開發者工具是一套內置在Google Chrome中Web開發和調試工具。使用開發者工具來重演，調試和剖析網站。chrome

注意：尋找最新版本的Chrome 開發者工具，Chrome Canary老是有最新的DevTools。shell

打開Chrome 開發者工具

a.直接在頁面上點擊右鍵，而後選擇審查元素或者檢查；數據庫

b.直接F12鍵；瀏覽器

c.快捷鍵Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)打開。

開發者工具面板

面板上包含了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文件等。

1、Elements面板（元素面板）

使用「元素」面板能夠經過自由操縱DOM和CSS來重演網站的佈局和設計。

能夠檢查並實時編輯頁面中的HTML和CSS。

在Elements(元素)面板中隨時檢查並編輯 DOM 樹中的任何元素。
在Styles(樣式)窗格中查看和更改應用於任何選定元素的CSS規則。
在Computed(計算)窗格中查看和編輯所選元素的盒模型。
在Sources(源代碼)面板中查看您在本地網頁上所作的任何更改。

1.修改DOM樹中的任何元素

只需雙擊選中元素進行修改便可

2.實時編輯一個樣式

在Styles(樣式)窗格中，能夠實時編輯樣式屬性名稱和值。全部樣式都是可編輯的，除了那些灰色的（如user agent stylesheet中的樣式，它們就咱們一般說的瀏覽器的默認樣式表）。

要編輯名稱或值，只要單擊它就能夠了，而後進行修改，而後按Tab或Enter鍵保存修改。

默認狀況下，咱們修改的CSS不是永久的，當您從新加載頁面時，修改的內容就會丟失。若是您想要在頁面從新加載時保留您的修改，請設置持續創做。

持續創做https://developers.google.com/web/tools/setup/setup-workflow

3.檢查和編輯盒模型參數

使用Computed(計算)窗格。盒模型中的全部值都是可編輯的，只需點擊它們就能夠了。

同心矩形包含當前元素的padding, border 和 margin屬性的top, bottom, left, right值。

對於非靜態定位的元素，還顯示了position矩形，包含top, right,bottom, 和left 屬性的值。

盒子簡介：

html中的每個標籤都是一個盒子，而且這個盒子有四個屬性，以下：

    content(內容) 通常指網頁中的文字或圖片
    padding(內邊距，填充) 盒子與內容的間隙，且會增長盒子的大小
    border(邊框) 盒子自己的邊框
    margin(外邊距，邊界) 盒子之間的間隙

其中盒模型又分爲標準盒模型和怪異盒模型，在標準盒模型中有內容尺寸、盒子尺寸、區域尺寸。

在使用margin、padding、border時不影響內容尺寸，使用padding、border會增長盒子尺寸，使用margin、padding、border時都會增長區域尺寸。因爲margin、padding的使用會影響區域尺寸和盒子尺寸，所以在使用時建議在盒子與盒子之間使用margin、盒子內使用padding，而盒子自己則儘可能使用auto。

對於position: fixed和position: absolute元素，（盒模型）中心字段包含了所選元素的實際的offsetWidth × offsetHeight像素尺寸。跟Styles(樣式)窗格中的屬性值同樣，全部值均可以經過雙擊來修改。然而，改變值不保證生效，由於這取決於具體元素的定位細節。

4.查看本地修改及歷史

在Styles(樣式)窗格中，單擊您修改過的文件（灰色的沒法修改）。DevTools將跳轉到Sources(源代碼)面板中。
右鍵單擊該文件。
選擇Local modifications(本地修改)

點擊連接後自動跳到Souces頁面

5.取消更改

若是您還沒有設置持續創做，你只要從新加載頁面，全部實時編輯內容都會丟失。

假設您已設置持續創做，想要撤消更改：

使用Ctrl + Z（Windows）或 Cmd + Z（Mac）快速撤消經過Elements(元素)面板對DOM或樣式的細微更改。
要撤消對文件進行的全部本地修改，打開Sources(源代碼)面板，而後選擇文件名旁邊的revert(還原)。

2、Console(控制檯面板)

在開發期間，可使用控制檯面板記錄診斷信息。或者使用它做爲 shell,在頁面上與JavaScript交互。

使用控制檯面板
進行信息交互

瞭解如何：打開DevTools Console(控制檯)，堆疊冗餘消息或在本身的行上顯示它們，清除或保持輸出或將其保存到文件，過濾輸出，以及瞭解其餘Console(控制檯)設置。

以專用面板形式，或做爲任何其餘面板的抽屜式面板的形式，打開Console(控制檯)。
堆疊冗餘消息或在本身的行上顯示它們。
清除或保持頁面之間的輸出，或將其保存到文件。
按嚴重性級別，經過隱藏網絡消息，或經過正則表達模式過濾輸出。

1.打開控制檯

以專用面板形式打開 Console(控制檯)：直接點擊Console

或做爲任何其餘面板的抽屜式面板形式打開：

打開控制檯面板

要打開專用的控制檯面板，請執行如下之一操做：

按 Ctrl+Shift+J（Windows / Linux）或Cmd+Opt+J（Mac）。
若是 DevTools 已打開，請按Console(控制檯)按鈕。

打開控制檯面板時，控制檯抽屜式窗格會自動摺疊隱藏。

打開控制檯抽屜式窗格

要在任何其餘面板打開控制檯抽屜式窗格，請執行如下之一操做：

在 DevTools 獲取焦點時按Esc鍵。
點擊Customize and control DevTools(自定義並控制DevTools，也叫開發者工具主菜單)按鈕，而後選擇Show console(顯示控制檯)。

2.信息棧

若是連續地重複信息，不會在新行上打印出每一個信息實例，控制檯會「堆疊」重複信息，並在左邊顯示一個數字，表示消息重複的次數。

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

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

若是您喜歡每一個日誌獨佔一行，請在 DevTools settings(設置)中啓用Show timestamps(顯示時間戳)。

因爲每一個信息的時間戳不一樣，每條信息都顯示在其本身單獨的行上。

3.控制歷史的信息操做

能夠經過執行如下任一操做來清除Console(控制檯)的歷史記錄：

在Console(控制檯)中右鍵單擊，而後選擇Clear console(控制檯)。
在控制檯中鍵入clear()。
在JavaScript代碼中調用console.clear()。
使用快捷鍵Ctrl+L（Mac，Windows，Linux）

保留歷史記錄

勾選Console(控制檯)頂部的Preserve log(保留日誌)複選框，能夠在頁面刷新或頁面跳轉時保留控制檯歷史記錄。信息將被存儲，直到您清除Console(控制檯)信息或關閉tab頁。

或者在控制檯右擊 save as 將控制檯輸出記錄保存到日誌文件中

執行上下文

在下面的截圖中的top下拉菜單被稱爲Execution Context Selector(執行上下文選擇器)。

您一般會看到上下文設置爲top（頁面的頂部框架）。

其餘框架和擴展在其本身的上下文中起做用。要使用這些其餘上下文，您須要從下拉菜單中選擇它們。例如，若是您想查看 pixel 該上下文中存在的變量，您須要在Execution Context Selector(執行上下文選擇器)下拉菜單中選擇它。

Console(控制檯)默認爲top上下文，除非經過檢查另外一個上下文中的元素來訪問DevTools。例如，若是您檢查<iframe>中的<p>元素，那麼DevTools將Execution Context Selector(執行上下文選擇器)設置爲<iframe>的上下文。

當你在top以外的上下文中工做時，DevTools 的Execution Context Selector(執行上下文選擇器)高亮顯示爲紅色，以下面的截圖所示。這是由於開發人員不多須要在top以外的上下文中工做。它能夠很容易混淆，當你輸入一個變量，期待獲得一個值的時候，可能只能看到它是一個 undefined（由於它在不一樣的上下文中定義）。

附加設置

打開 DevTools 的 settings(設置)，轉到General(常規)選項卡，而後向下滾動到Console(控制檯)部分能夠進一步對控制檯進行設置。

設置	描述
Hide network messages (隱藏網絡消息)	默認狀況下，控制檯報告網絡問題。勾選此選項將指示控制檯不顯示這些錯誤的日誌。例如，將不記錄404和500這種系列的錯誤。
Log XMLHttpRequests (記錄 XMLHttpRequests )	決定控制檯是否要記錄每一個XMLHttpRequest。
Preserve log upon navigation (跳轉時保留日誌)	在頁刷新或頁面跳轉期間保留控制檯歷史記錄。
Show timestamps (顯示時間戳)	當調用控制檯方法的時候，爲顯示在控制檯上的每一個消息預置時間戳。這個主要用於在發生特定事件時進行調試。這將禁用消息棧（message stacking）。
Enable custom formatters (啓用自定義格式)	控制JavaScript對象的格式。
Autocomplete from history (從歷史記錄中自動完成)	控制檯會記住你的歷史消息記錄，輕鬆實現自動完成功能，輸入時前面會有藍色的箭頭圖標,如圖：

3、Sources(源代碼面板)

在「源代碼」面板中，能夠斷點調試 JavaScript 。或者經過Workspaces（工做區）鏈接本地文件，使用開發者工具實時編輯。

斷點調試
調試混淆代碼
使用開發者工具的Workspaces（工做區）創建永久性

遍歷代碼

設置斷點

當暫停腳本時，Scope(做用域)窗格將顯示那個時刻全部當前定義的屬性。

僅當腳本暫停時，Scope(做用域)窗格纔會有內容。當您的頁面正在運行時，Scope(做用域)窗格顯示空白。

Scope(做用域)窗格顯示定義在本地(函數內部)，閉包，和全球的屬性。

若是屬性旁邊有一個剪頭圖標，則表示它是一個對象。單擊剪頭圖標能夠展開對象並查看其屬性。

有時屬性會變淡。例如，下面截圖中，屬性constructor比confirm屬性更淡。

顏色較暗的屬性是可枚舉的。顏色較淡的屬性是不可枚舉的。有關詳細信息，請參閱如下 Stack Overflow 中的問題：Chrome開發人員工具做用域窗格中的顏色是什麼意思？

簡單來講就是：若是屬性顯示爲暗灰色，則表示它不可枚舉。所以，當您遍歷對象的屬性時，它不會顯示出來

調用堆棧

靠近邊欄頂部的是Call Stack(調用堆棧)窗格。當代碼在斷點處暫停時，Call Stack(調用堆棧)窗格顯示執行路徑，按時間逆序，將代碼帶到該斷點。這有助於理解如今執行到哪裏，它是如何到達這裏的，是調試的一個重要因素。

使用斷點調試代碼：

https://www.jianshu.com/p/e6ba1fee8e7d

4、Network(網絡面板）

使用「網絡」面板瞭解請求和下載的資源文件，並優化您的網頁加載性能。

Network(網絡)面板記錄在頁面上有關每一個網絡操做的信息，包括詳細的時序數據，HTTP請求和響應頭，Cookie等。

使用Network(網絡)面板記錄和分析網絡活動。
以聚合（全部類型）或單個資源類型查看負載信息。
過濾和排序資源的顯示方式。
保存，複製和清除網絡記錄。
根據您的須要自定義Network(網絡)面板。

網絡面板包含5個窗格：

Controls(控件): 使用這些選項能夠控制 Network(網絡)面板的外觀和功能。
Filters(過濾器): 使用這些選項能夠控制在請求列表中顯示哪些資源。提示：按住Cmd（Mac）或Ctrl（Window / Linux），而後點擊過濾器能夠同時選擇多個過濾器。
Overview(概覽): 這個圖表顯示檢索資源的時間軸。若是您看到多個垂直堆疊的欄，這意味着這些資源被同時檢索。
Requests Table(請求列表): 此列表列出了檢索的每一個資源。默認狀況下，此表按時間順序排序，也就是最先的資源在頂部。單擊資源名稱能夠得到更多信息。提示：右鍵單擊列表的任何標題欄能夠以添加或刪除信息列。
Summary(概要): 概要窗格告訴您請求的總數，傳輸的數據量，和加載時間。

默認狀況下，請求表列顯示如下列。您能夠添加和刪除列（右鍵單擊列表的任何標題欄能夠以添加或刪除信息列）。

Name(名稱) : 資源的名稱。
Status(狀態) : HTTP狀態代碼。
Type(類型) : 請求的資源的MIME類型。
Initiator(發起人) : 發起請求的對象或進程。它可能有如下幾種值：
- Parser(解析器) : Chrome的HTML解析器發起了請求。
- Redirect(重定向) : HTTP重定向啓動了請求。
- Script(腳本) : 腳本啓動了請求。
- Other(其餘) : 一些其餘進程或動做發起請求，例如用戶點擊連接跳轉到頁面，或在地址欄中輸入網址。
Size(尺寸) : 響應頭的大小（一般是幾百字節）加上響應數據，由服務器提供。
Time(時間) : 總持續時間，從請求的開始到接收響應中的最後一個字節。
Timeline(時間軸) : Timeline列顯示全部網絡請求的視覺瀑布。點擊此列的標題欄會顯示其餘排序字段的菜單。

記錄網絡活動

當網絡面板打開時，DevTools默認記錄全部網絡活動。要記錄，只需在面板打開時從新加載頁面，或者等待當前加載的頁面上的網絡活動。

您能夠經過record(記錄)按鈕來判斷DevTools是否正在記錄。當它是紅色（）， DevTools正在記錄。當它爲灰色（）時， DevTools不記錄。單擊此按鈕開始或中止錄製，或按鍵盤快捷鍵Cmd + E（Mac）或Ctrl + E（Window / Linux）。

在錄製過程當中截屏

Network(網絡)面板能夠在頁面加載過程當中捕獲屏幕截圖。此功能稱爲Filmstrip(幻燈片)。

點擊camera(攝像機)圖標能夠啓用Filmstrip(幻燈片)。當圖標爲灰色時，表示Filmstrip(幻燈片)停用（）。當圖標爲藍色時，表示Filmstrip(幻燈片)被啓用（）。

從新載入頁面能夠捕獲屏幕截圖。屏幕截圖顯示在Overview(概覽)窗格的上方。

當您將鼠標懸停在某個屏幕截圖上的時候，Timeline(時間軸)會顯示一條垂直的黃線，指示該幀是什麼時候被捕獲的。

雙擊屏幕截圖能夠放大它。當屏幕截圖被放大時，使用鍵盤的左右箭頭鍵在屏幕截圖之間切換（上一張，下一張）。

查看DOMContentLoaded和load事件信息

Network(網絡)面板會高亮顯示兩個事件：DOMContentLoaded和load。

DOMContentLoaded和load介紹：https://www.cnblogs.com/caizhenbo/p/6679478.html

從頁面空白到展現出頁面內容，就是HTML文檔被加載和解析完成，會觸發DOMContentLoaded事件

load，頁面上全部的資源（圖片，音頻，視頻等）被加載之後纔會觸發load事件，簡單來講，頁面的load事件會在DOMContentLoaded被觸發以後才觸發。

當頁面的初始的標記被解析完時，會觸發DOMContentLoaded。它在Network(網絡)面板上的兩個位置顯示：

在Overview(概覽)窗格中的藍色垂直線表示這個事件。
在Summary(概要)窗格中，您能夠查看事件的確切時間。

當頁面徹底加載時觸發load事件。它顯示在三個地方：

在Overview(概覽)窗格的紅色垂直線表示這個事件。
在Requests Table(請求列表)中的紅色垂直線也表示這個事件。
在Summary(概要)中，您能夠查看改事件的確切時間。

查看單個資源的詳細信息

點擊資源名稱（在Requests Table(請求列表)的Name(名稱)列中）能夠查看該資源的更多信息。

可用的標籤頁取決於您選擇的資源類型，但如下四個標籤頁是最多見的：

Headers(標頭) : 與資源相關的HTTP頭。
Preview(預覽) : 預覽JSON，圖片和文字資源。
Response(響應) : HTTP響應數據（若是有）。
Timing(時序) : 資源的請求生命週期的明細分類。

查看HTTP頭信息

點擊Headers顯示該資源詳細的頭信息。

Headers(頭信息)標籤頁顯示資源的請求URL，HTTP方法，和響應狀態代碼。另外，它列出HTTP響應和請求頭信息及他們對應的值，和任何查詢字符串參數。

status code ：http 狀態碼 https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin

http協議報頭詳解

您能夠經過點擊view source(視圖源)或view parsed(視圖解析)連接查看在源或解析格式中的響應標頭，請求標頭，或查詢字符串參數。

您還能夠經過點擊query string parameters(查詢字符串參數)旁邊的view URL encoded(查看URL編碼)或view decoded(查看解碼)連接，查看URL編碼或解碼格式的query string parameters(查詢字符串參數)。

http請求頭部＋響應碼

　　表1 公共頭部

字段	說明
Remote Address	請求的遠程地址
Request URL	請求的域名
Request Method	頁面請求的方式：GET/POST
Status Code	請求的返回狀態

表2 請求頭

字段	說明
Accept	表示瀏覽器支持的 MIME 類型
Accept-Encoding	瀏覽器支持的壓縮類型
Accept-Language	瀏覽器支持的語言類型，而且優先支持靠前的語言類型
Cache-Control	指定請求和響應遵循的緩存機制
Connection	當瀏覽器與服務器通訊時對於長鏈接如何進行處理：close/keep-alive
Cookie	向服務器返回cookie，這些cookie是以前服務器發給瀏覽器的
Host	請求的服務器URL
Referer	該頁面的來源URL
User-Agent	用戶客戶端的一些必要信息

表3 返回頭

字段	說明
Cache-Control	告訴瀏覽器或者其餘客戶，什麼環境能夠安全地緩存文檔
Connection	當client和server通訊時對於長連接如何進行處理
Content-Encoding	數據在傳輸過程當中所使用的壓縮編碼方式
Content-Type	數據的類型
Date	數據從服務器發送的時間
Expires	應該在何時認爲文檔已通過期，從而再也不緩存它？
Server	服務器名字。Servlet通常不設置這個值，而是由Web服務器本身設置
Set-Cookie	設置和頁面關聯的cookie
Transfer-Encoding	數據傳輸的方式

1xx：信息，請求收到，繼續處理
2xx：成功，行爲被成功地接受、理解和採納
3xx：重定向，爲了完成請求，必須進一步執行的動做
4xx：客戶端錯誤，請求包含語法錯誤或者請求沒法實現
5xx：服務器錯誤，服務器不能實現一種明顯無效的請求

查看網絡時序

點擊Timing(時序)選項卡可查看單個資源的請求生命週期的明細分類。

生命週期顯示在如下類別中花費的時間：

Queuing(排隊)
Stalled(停滯)
若是適用：DNS lookup(DNS查找)， initial connection(初始鏈接)， SSL handshake(SSL握手)
Request sent(請求發送)
Waiting(等待)（到開始下載第一個字節的時間（TTFB））
Content Download(內容下載)

預覽某個資源

點擊Preview(預覽)標籤頁能夠查看某些資源的預覽。Preview(預覽)標籤頁可能顯示或不顯示任何有用的信息，具體取決於您選擇查看的資源類型。

查看HTTP響應內容

點擊Response(響應)標籤頁能夠查看該資源未格式化的HTTP響應內容。 Response(響應)標籤頁可能包含或可能不包含任何有用的信息，具體取決於您選擇查看的資源類型。

查看cookies

儲存在用戶本地終端上的數據，用於辨別用戶身份

點擊Cookies標籤頁能夠查看資源的HTTP請求和響應頭信息中傳輸的Cookie列表。此標籤頁僅在傳輸Cookie時可用。

如下是Cookie列表中每一個列的說明：

Name(名稱) : Cookie的名稱。
Value(值) : Cookie的值。
Domain(域) : Cookie所屬的域。
Path(路徑) : Cookie來自的網址路徑。
Expires / Max-Age(到期/最大可用時間) : Cookie的有效期或max-age屬性的值。
Size(尺寸) : Cookie的大小（以字節爲單位）。
HTTP : 表示Cookie只能由瀏覽器在HTTP請求中設置，且沒法使用JavaScript訪問。
Secure(安全) : 此屬性的存在表示Cookie只能經過安全鏈接傳輸(HTTPS協議傳輸)。

查看WebSocket幀

點擊Frames(幀)標籤頁能夠查看WebSocket鏈接信息。此標籤頁僅在所選資源由WebSocket鏈接發起時可見。

WebSocket簡介

下面的列表描述了Frames(幀)標籤頁中表格中的每一列：

Data(數據) : 消息承載的內容。若是消息是純文本，則會顯示在此處。若是是二進制操做碼，這個字段顯示操做碼的名稱和代碼。支持如下操做碼：
- Continuation Frame
- Binary Frame
- Connection Close Frame
- Ping Frame
- Pong Frame
Length(長度) :消息承載內容的長度（以字節爲單位）。
Time(時間) :建立消息時的時間戳。

消息根據其類型進行顏色編碼：

發出的文本消息是淺綠色的。
收到的文本消息是白色的。
WebSocket操做碼是淺黃色。
錯誤是淺紅色的。

有關實時的注意事項：

要在消息到達後刷新Frames(幀)列表，請點擊左側的資源名稱。
Frames(幀)列表只保留最近的100條WebSocket消息。

查看資源發起者和依賴關係

按住Shift並移動鼠標到資源上可查看它的發起者和依賴關係。這部分是你鼠標懸停的資源的target(目標)引用。

從target(目標)往上查找,第一個顏色編碼爲綠色的資源是target(目標)的發起者。若是存在第二個顏色編碼爲綠色資源，那麼這個是發起者的發起者。從target(目標)向下查找，任何顏色編碼爲紅色的資源都是target的依賴。

在下面的截圖中，target(目標)是dn/。target(目標)的發起者是以rs=AA2Y...開頭的腳本。發起者（rs=AA2Y...）的發起者是google.com。最後，dn.js是target(目標)(dn/)的依賴項。

請注意，對於擁有大量資源的網頁，您可能沒法查看全部發起者或依賴關係。

排序請求

默認狀況下，Requests Table(請求列表)中的資源按每一個請求的開始時間排序，最先開始的請求在最上面。

點擊Requests Table(請求列表)中列的標題欄，能夠按照該標題下的每一個資源的值對列表進行排序。再次單擊相同的標題欄可將排序順序更改成升序或降序。

Timeline時間軸列與其餘列不一樣。當點擊時，它顯示一個排序字段的菜單：

Timeline(時間軸) : 按每一個網絡請求的開始時間排序。這是默認排序，它與Start Time(開始時間)選項相同。
Start Time(開始時間) : 按每一個網絡請求的開始時間排序（與按Timeline(時間軸) 選項排序相同）。
Response Time(響應時間) : 按每一個請求的響應時間排序。
End Time(完成時間/結束時間) : 按每一個請求完成的時間排序。
Duration(持續時間) : 按每一個請求的總時間排序。選擇這個過濾器能夠肯定哪一個資源須要加載最長的時間。
Latency(延遲時間) : 按請求開始和響應開始之間的時間排序。選擇這個過濾器能夠肯定哪一個資源下載第一個字節（TTFB）的延遲時間最長。

使用過濾器

Network(網絡)面板提供了許多方法來過濾顯示哪些資源。點擊filters(過濾器)按鈕（）以隱藏或顯示Filters(過濾器)窗格。

使用內容類型按鈕來顯示或隱藏所選內容類型的資源。

注意: 按住 Ctrl (Windows/Linux)Cmd (Mac) 或者 Cmd (Mac)，而後點擊過濾器能夠同時啓用多個過濾器。

在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類型) : 顯示指定MIME類型的資源。 DevTools使用它遇到的全部MIME類型填充下拉列表。

MIME (Multipurpose Internet Mail Extensions) 是描述消息內容類型的因特網標準。

MIME 消息能包含文本、圖像、音頻、視頻以及其餘應用程序專用的數據。
mixed-content(混合內容) : 顯示全部混合內容資源（mixed-content:all）或僅顯示當前顯示的內容（mixed-content:displayed）。
scheme(協議) : 顯示經過不受保護的HTTP（scheme:http）或受保護的HTTPS（scheme:https）檢索的資源。
set-cookie-domain(cookie域) : 顯示具備Set-Cookie頭,而且其Domain屬性與指定值匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的全部Cookie域。
set-cookie-name(cookie名) : 顯示具備Set-Cookie頭,而且名稱與指定值匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的全部Cookie名。
set-cookie-value(cookie值) : 顯示具備Set-Cookie頭,而且值與指定值匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的全部cookie值。
status-code(狀態碼) : 僅顯示其HTTP狀態代碼與指定代碼匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的全部狀態碼。

上面的某些關鍵字提到了自動填充下拉菜單。要觸發自動完成菜單，鍵入關鍵字後跟一個冒號。例如，在如下截圖中，輸入domain:觸發了自動完成下拉菜單。

複製，保存和清除網絡信息

右鍵單擊Requests Table(請求列表)以複製，保存或刪除網絡信息。一些選項是上下文相關的，因此若是你想在單個資源上操做，您須要右鍵單擊該資源行。下面的列表描述了每一個選項。

Copy Response(複製響應) : 將所選資源的HTTP響應複製到系統剪貼板。
Copy as cURL(複製爲cURL) : 將所選資源的網絡請求做爲cURL命令字符串複製到系統剪貼板。請參閱將複製請求爲cURL命令。
Copy All as HAR(所有複製爲HAR) : 將全部資源複製到系統剪貼板做爲HAR數據。 HAR文件包含描述網絡「瀑布」的JSON數據結構。一些第三方工具可使用HAR文件中的數據重建網絡瀑布。有關詳細信息，請參閱Web性能強大工具：HTTP歸檔（HAR）。
Save as HAR with Content(另存爲帶內容的HAR) : 將全部網絡數據與每一個頁面資源一塊兒保存到HAR文件中。二進制資源（包括圖像）被編碼爲Base64編碼文本。
Clear Browser Cache(清除瀏覽器緩存) : 清除瀏覽器高速緩存。提示：您也能夠從Network Conditions(網絡條件)抽屜式窗格中啓用或禁用瀏覽器緩存。
Clear Browser Cookies(清除瀏覽器Cookie) : 清除瀏覽器的Cookie。
Open in Sources Panel(在源文件面板中打開) : 在Sources(源文件)面板中打開選定的資源。
Open Link in New Tab(在新標籤頁中打開連接) : 在新標籤頁中打開所選資源。您還能夠在Requests Table(請求列表)中雙擊資源名稱。
Copy Link Address(複製連接地址) : 將資源URL複製到系統剪貼板。
Save(保存) : 保存所選的文本資源。僅顯示在文本資源上。
Replay XHR(從新發送XHR) : 從新發送所選的XMLHTTPRequest。僅顯示在XHR資源上。

將一個或全部請求複製爲cURL命令

cURL是用於進行HTTP處理的命令行工具。

右鍵單擊Requests Table(請求列表)中的資源，將鼠標懸停在Copy(複製)上，而後選擇Copy as cURL(複製爲cURL)，能夠拷貝一個cURL請求字符串，只要該資源已經被Network(網絡)面板檢測到。

選擇Copy All as cURL(所有複製爲cURL)能夠複製Network(網絡)面板檢測到的全部資源的cURL請求字符串。

複製所有時，將忽略過濾（例如，若是您過濾Network(網絡)面板，來僅顯示CSS資源，而後按Copy All as cURL(所有複製爲cURL)，你會獲得全部檢測到的資源，而不僅有CSS）。

自定義`Network`(網絡)面板

默認狀況下，Requests Table(請求列表)一個資源只顯示很小的一行。單擊Use large resource rows(使用大資源行)按鈕（）以增長每行的大小。

大行可以使一些列能夠顯示兩個文本字段：主要字段和次要字段。列的標題欄指示輔助字段的含義。

增長和刪除列

右鍵單擊Requests Table(請求列表)中的任意標題欄能夠增長或刪除列。

5、Profiles(分析面板)

演示界面：https://googlechrome.github.io/devtools-samples/jank/

面板介紹：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/#set_up_the_demo

運行時性能是頁面在運行時執行的方式，而不是加載。對於分析頁面的響應，動畫和空閒階段很是有用。

模擬移動CPU

移動設備的CPU功率遠低於臺式機和筆記本電腦。每當您對頁面進行概要分析時，請使用CPU限制來模擬您的頁面在移動設備上的執行狀況。

在DevTools中，單擊「 性能」選項卡。
確保已啓用「 屏幕截圖」複選框。
單擊捕獲設置 。DevTools顯示與其如何捕獲性能指標相關的設置。
對於CPU，請選擇6x減速。DevTools限制你的CPU，使其比平時慢6倍

記錄運行時性能

在DevTools中，單擊「 錄製」 。DevTools在頁面運行時捕獲性能指標。
等幾秒鐘。
單擊中止。DevTools中止記錄，處理數據，而後在「性能」面板上顯示結果。

分析結果

分析每秒幀數

測量任何動畫性能的主要指標是每秒幀數（FPS）。當動畫以60 FPS運行時，用戶會很高興。

看看FPS圖表。每當你在FPS上方看到一個紅色條時，就意味着幀速率降低到很低，可能會損害用戶體驗。一般，綠色條越高，FPS越高。
在FPS圖表下方，您能夠看到CPU圖表。中相應的顏色 CPU圖表對應於顏色摘要選項卡，在性能板的底部。CPU圖表充滿顏色的事實意味着CPU在錄製期間被最大化。每當你看到CPU長時間達到最大值時，就會找到減小工做量的方法。
將鼠標懸停在FPS，CPU或NET圖表上。DevTools顯示該頁面的截圖。左右移動鼠標以重放錄製內容。這稱爲擦洗，它對手動分析動畫的進展很是有用。
在「 框架」部分中，將鼠標懸停在其中一個綠色方塊上。DevTools向您顯示該特定幀的FPS。每幀可能遠低於60 FPS的目標。

另外：打開FPS表

另外一個方便的工具是FPS儀表，它在頁面運行時提供FPS的實時估算。

按 Control+ Shift+ P（Windows，Linux）或 Command+ Shift+ P（Mac）打開命令菜單。
開始Rendering在Command菜單中鍵入，而後選擇Show Rendering。
在「 渲染」選項卡中，啓用FPS Meter。視口的右上角會出現一個新的疊加層。
禁用FPS儀表，而後按Escape關閉「 渲染」選項卡。

請注意摘要選項卡。若是未選擇任何事件，此選項卡會顯示活動明細。該頁面花費了大部分時間進行渲染。因爲性能是減小工做量的藝術，所以您的目標是減小渲染工做所花費的時間。
展開主要部分。隨着時間的推移，DevTools會向您顯示主線程上的活動火焰圖。x軸表示隨時間的記錄。每一個條狀結構表明一個活動。更長的條形意味着事件須要更長時間。y軸表示調用堆棧。當您看到事件堆疊在彼此之上時，意味着上層事件致使較低事件。
還有不少數據，經過在Overview（包括 FPS，CPU和NET圖表）上單擊，按住並拖動鼠標來放大單個Animation Frame Fired事件。「 主要」部分和「 摘要」 選項卡僅顯示錄製的選定部分的信息。
圖：放大單個動畫幀觸發事件注：縮放另外一種方法是把重點放在主要經過單擊其背景或選擇事件部分，而後按 W，A，S，D 鍵。
請注意動畫幀觸發 事件右上角的紅色三角形。每當您看到一個紅色三角形時，都會警告可能存在與此事件相關的問題。
注意：每當執行回調時都會發生動畫幀觸發事件 requestAnimationFrame()。
單擊動畫幀觸發事件。「 摘要」選項卡如今顯示有關該事件的信息。注意揭示連接。單擊它會致使DevTools突出顯示啓動 動畫幀觸發事件的事件。另請注意app.js：94連接。單擊它會跳轉到源代碼中的相關行。

6、`Application`(應用)面板

在 Application(應用)面板檢查和管理 Storage(存儲)、 Databases(數據庫)和 Caches(緩存)。

查看和編輯本地和會話存儲。
檢查和修改 IndexedDB 數據庫。
在Web SQL數據庫上執行語句。
查看 Application 和 Service Worker 緩存。
單擊按鈕，清除全部存儲，數據庫，緩存和service workers。

Local storage（本地存儲）

若是您使用local storage(本地存儲)來存儲鍵值對(KVP)，您能夠在Local Storage(本地存儲)窗格中檢查，修改和刪除這些鍵值對(KVP)。

雙擊某個鍵或值來編輯該值。
雙擊一個空單元格能夠添加一個新的鍵值對(KVP)。
單擊鍵值對(KVP)，而後按delete(刪除)按鈕（）刪除該KVP。您能夠從Clear storage(清除存儲)窗格單擊一個按鈕來清除全部本地存儲數據。
若是您在與某個頁面交互中建立，刪除或修改鍵值對(KVP)，您不會實時看到這些變化更新。點擊refresh(刷新)按鈕（）來查看這些更改。

Session storage（會話存儲）

Session Storage(會話存儲)窗格的工做方式與Local Storage(本地存儲)窗格相同。查看上面的本地存儲部分，瞭解如何查看和編輯會話存儲。

IndexedDB

使用IndexedDB窗格檢查、修改和刪除 IndexedDB 數據。

當您展開IndexedDB窗格時，下面的第一級是數據庫。若是有多個數據庫處於活動狀態，那麼您將看到多個條目。在下面的屏幕截圖中，頁面中只有一個活動狀態的數據庫。

單擊數據庫的名稱能夠查看該數據庫的安全來源（主機地址），名稱和版本。

展開數據庫能夠查看其鍵值對(KVP)。

使用Start from key(從鍵開始)文本字段旁邊的箭頭按鈕能夠切換鍵值對(KVP)的頁面。

展開一個值，而後雙擊能夠編輯該值。添加，修改或刪除值時，這些更改將不會實時更新。單擊refresh(刷新)按鈕以更新數據庫。

在Start from key(從鍵開始)文本字段中輸入一個鍵值，以篩選出小於該值的全部鍵。

當你添加，修改或刪除值時，這些更改將不會實時更新。單擊點擊refresh(刷新)按鈕（）來更新數據庫。

單擊clear object store(清除對象儲存)按鈕（）能夠從數據庫中刪除全部數據。您還能夠經過單擊Clear storage(清除存儲)窗格來完成此操做,以及註銷service workers並刪除其餘存儲和緩存。

Web SQL

使用 Web SQL 窗格查詢和修改 Web SQL 數據庫。

單擊數據庫名稱能夠打開該數據庫控制檯。你能夠在這裏執行數據庫語句。

點擊一個數據庫表查看該表的數據

你不能在這裏更新值，可是你能夠經過數據庫控制檯更新（見上文）。
點擊列頭能夠按列排序該表。
你對錶所作的更改不會實時更新。點擊refresh(刷新)按鈕（）來查看你的更新。
在 Visibile columns(可見列)文本字段裏中輸入用空格或逗號來分隔的列名稱，將僅顯示的那些列。

Application Cache（應用緩存）

使用 Application Cache(應用緩存)窗格來檢查資源和經過應用緩存 API建立的規則.

每一行表明一個資源。

Type列將具備下列值之一：

Master - 在資源上的 manifest 屬性表示此緩存是它的主人。
Explicit - 此資源在清單中明確列出.
Network - 該清單指定的資源必須來自網絡。
Fallback - 在 Resource 列中的URL 被回退爲另外一個URL(不在 DevTools中顯示).

在表的底部有狀態圖標指示您的網絡鏈接和應用程序緩存的狀態。應用程序緩存能夠具備如下狀態：

IDLE - 高速緩存中有沒有新的變化.
CHECKING - 該清單正在讀取和已檢查更新.
DOWNLOADING - 資源是被添加到緩存中.
UPDATEREADY - 緩存在一個新版本中可使用.
OBSOLETE - 正在刪除緩存.

Service Worker Caches

Application(應用)面板上的Cache Storage(緩存存儲)窗格容許您檢查，修改和調試使用（service worker）緩存API建立的緩存。請查看下面的指南以得到更多幫助。

清除 service workers, storage, databases, 和 caches

有時你只須要清除特定來源的全部數據。Application(應用)面板上的Clear storage(清除存儲)窗格容許您選擇性地註銷service workers，存儲和高速緩存。若要清除數據，只需勾選組件旁邊的複選框，而後單擊Clear site data(清除站點數據)。該操做將刪除Clear storage(清除存儲)簽下列出的源的全部數據。