使用Network(網絡)面板評估網站的網絡性能。
Network(網絡)面板記錄在頁面上有關每個網絡操作的信息，包括詳細的時序數據，HTTP請求和響應頭，Cookie等。
TL;DR
- 使用
Network(網絡)面板記錄和分析網絡活動。 - 以聚合（所有類型）或單個資源類型查看負載信息。
- 過濾和排序資源的顯示方式。
- 保存，復制和清除網絡記錄。
- 根據您的需要自定義
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。 它在Network(網絡)面板上的兩個位置顯示：
- 在
Overview(概覽)窗格中的藍色垂直線表示這個事件。 - 在
Summary(概要)窗格中，您可以查看事件的確切時間。
當頁面完全加載時觸發load事件。 它顯示在三個地方：
- 在
Overview(概覽)窗格的紅色垂直線表示這個事件。 - 在
Requests Table(請求列表)中的紅色垂直線也表示這個事件。 - 在
Summary(概要)中，您可以查看改事件的確切時間。
查看單個資源的詳細信息
點擊資源名稱（在Requests Table(請求列表)的Name(名稱)列中）可以查看該資源的更多信息。
可用的標簽頁取決於您選擇的資源類型，但以下四個標簽頁是最常見的：
Headers(標頭) : 與資源相關的HTTP頭。Preview(預覽) : 預覽JSON，圖片和文字資源。Response(響應) : HTTP響應數據（如果有）。Timing(時序) : 資源的請求生命周期的明細分類。
查看網絡時序
點擊Timing(時序)選項卡可查看單個資源的請求生命周期的明細分類。
生命周期顯示在以下類別中花費的時間：
Queuing(排隊)Stalled(停滯)- 如果適用：
DNS lookup(DNS查找)，initial connection(初始連接)，SSL handshake(SSL握手) Request sent(請求發送)Waiting(等待)（到開始下載第一個字節的時間（TTFB））Content Download(內容下載)
您也可以將鼠標懸停在資源的Timeline(時間軸)圖表上，查看此相同的信息。
相關指南：
查看HTTP頭信息
點擊Headers顯示該資源詳細的頭信息。
Headers(頭信息)標簽頁顯示資源的請求URL，HTTP方法，和響應狀態代碼。 另外， 它列出HTTP響應和請求頭信息及他們對應的值，和任何查詢字符串參數。
您可以通過點擊view source(視圖源)或view parsed(視圖解析)鏈接查看在源或解析格式中的響應標頭，請求標頭，或查詢字符串參數。
您還可以通過點擊query string parameters(查詢字符串參數)旁邊的view URL encoded(查看URL編碼)或view decoded(查看解碼)鏈接，查看URL編碼或解碼格式的query string parameters(查詢字符串參數)。
預覽某個資源
點擊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連接發起時可見。
下面的列表描述了Frames(幀)標簽頁中表格中的每一列：
Data(數據) : 消息承載的內容。如果消息是純文本，則會顯示在此處。 如果是二進制操作碼，這個字段顯示操作碼的名稱和代碼。支持以下操作碼：Continuation FrameBinary FrameConnection Close FramePing FramePong 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(過濾器)窗格。
使用內容類型按鈕來顯示或隱藏所選內容類型的資源。
在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類型填充下拉列表。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(請求列表)中的任意標題欄可以增加或刪除列。
跳轉時保留網絡日志
默認情況下，只要重新加載當前頁面或加載不同的頁面，就會丟棄網絡活動記錄。勾選Preserve log(保留日志)復選框可以在這些情況下保留網絡日志。新記錄附加在Requests Table(請求列表)的底部。
其他資源
要了解更多優化網絡性能的技巧，請參閱以下資源：
- 使用PageSpeed Insights確定可用於你的站點的最佳實踐， 和PageSpeed優化工具可以自動化應用這些最佳實踐。
- Google Chrome中的高性能網絡論述了Chrome網絡內部配置，以及如何利用這些內容來加快網站速度。
- gzip壓縮的工作原理提供了一個很有用的gzip壓縮概述，為什么它是一個好主意。
- Web性能最佳實踐提供了一些有關於優化網頁或優化應用程序網絡性能的其他提示。
說明
翻譯自：https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading#curl
本文內容來自：Chrome DevTools谷歌瀏覽器開發者工具評估資源加載時間 – Break易站
—Author: Arvin Chen —Web Address: www.breakyizhan.com (Break易站)