評估網(wǎng)絡(luò)性能

關(guān)于您的每個應(yīng)用程序的網(wǎng)絡(luò)運(yùn)營，包括詳細(xì)的時序數(shù)據(jù)，HTTP請求和響應(yīng)頭，cookies，WebSocket的數(shù)據(jù)，以及更多的網(wǎng)絡(luò)小組記錄的信息。網(wǎng)絡(luò)面板可幫助你解答您的Web應(yīng)用程序的網(wǎng)絡(luò)性能問題，如：

• 其中資源最慢時間第一個字節(jié)？
• 哪些資源加載（持續(xù)時間）的時間最長？
• 是誰發(fā)起的特定網(wǎng)絡(luò)請求？
• 多少時間花費(fèi)在各種網(wǎng)絡(luò)階段的特定資源？

關(guān)于資源定時 API

網(wǎng)絡(luò)面板使用資源計時 API，一個 JavaScript API，提供詳細(xì)的網(wǎng)絡(luò)定時數(shù)據(jù)為每個加載的資源。例如，該 API 可以告訴你準(zhǔn)確的圖像 HTTP 請求啟動時，被接收的圖像的最后一個字節(jié)時。下圖顯示了資源定時 API 提供了網(wǎng)絡(luò)定時的數(shù)據(jù)點(diǎn)。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/resource-timing-overview.png" alt="resource-timing-overview.png" />

該 API 可用于任何網(wǎng)頁，而不僅僅是 DevTools。在 Chrome 瀏覽器，它暴露了全球window.performance對象的方法。該performance.getEntries（）方法返回“資源定時對象”，一個頁面上的每個請求的資源的數(shù)組。

試試這個：打開 JavaScript 控制臺當(dāng)前頁面，輸入以下的提示，并回車：

window.performance.getEntries()[0]

試試這個：打開 JavaScript 控制臺當(dāng)前頁面，輸入以下的提示，并回車：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/getentries.png" alt="getentries.png" />

每個時間戳是微秒，即ResolutionTime規(guī)范。此 API 可 inChrome 作為window.performance.now（）方法。

網(wǎng)絡(luò)面板概述

網(wǎng)絡(luò)面板會自動記錄所有的網(wǎng)絡(luò)活動，而 DevTools 是開放的。當(dāng)你第一次打開面板時可能為空。刷新頁面開始記錄，或者干脆等待網(wǎng)絡(luò)活動發(fā)生在你的應(yīng)用程序中。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/network-overview.png" alt="network-overview.png" />

每個請求的資源被添加作為行到網(wǎng)絡(luò)表，其中包含下面列出的列。請注意以下有關(guān)網(wǎng)絡(luò)表：

• 未在下面列出的所有列在默認(rèn)情況下可見;您可以輕松地顯示或隱藏列。
• 某些列包含主字段和次級領(lǐng)域（例如：時間和等待時間）。當(dāng)觀看網(wǎng)絡(luò)表的大資源行這兩個領(lǐng)域都顯示;使用小的資源行時只有主域顯示。
• 你可以通過單擊列標(biāo)題由列的值排序表。在時間軸中列的行為有所不同：單擊其列標(biāo)題顯示的其他排序字段的菜單。見瀑布景色，排序和過濾的更多信息。

在保存導(dǎo)航網(wǎng)絡(luò)日志

默認(rèn)情況下，當(dāng)前的網(wǎng)絡(luò)日志記錄時，會導(dǎo)航到另一個頁面，或者刷新當(dāng)前頁面丟棄。要保留日志記錄在這些情況下，單擊黑色 http://wiki.jikexueyuan.com/project/chrome-devtools/images/recording-off.png" alt="recording-off.png" /> 保留日志在導(dǎo)航鍵不要在導(dǎo)航在網(wǎng)絡(luò)面板底部保存日志;新記錄被追加到表的底部。再次單擊該按鈕（紅色http://wiki.jikexueyuan.com/project/chrome-devtools/images/recording-on.png" alt="recording-on.png" /> 保留在導(dǎo)航資源）來禁用日志保存。

排序和過濾

默認(rèn)情況下，在網(wǎng)絡(luò)表的資源是由每個請求（在網(wǎng)絡(luò)“瀑布”）的開始時間進(jìn)行排序。您可以通過單擊列標(biāo)題排序表由另一列值。再次單擊該標(biāo)題更改排序順序（升序或降序）。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/sorting.png" alt="sorting.png" />

時間軸列是別人的獨(dú)特之處，點(diǎn)擊后，會顯示額外的排序字段的菜單。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/timeline-column.png" alt="timeline-column.png" />

該菜單包含以下排序選項：

• 時間軸 - 排序由每個網(wǎng)絡(luò)請求的開始時間。這是默認(rèn)的排序，并且是相同的開始時間選項排序）。
• 開始時間 - 由每個網(wǎng)絡(luò)請求的開始時間排序（同樣如由時間軸選項排序）。
• 響應(yīng)時間 - 通過排序每個請求的響應(yīng)時間。
• 結(jié)束時間 - 通過排序時，每個請求完成的時間。
• 持續(xù)時間 - 排序由每個請求的總時間。
• 延遲 - 排序由請求的開始和響應(yīng)的開始之間的時間（也被稱為“時間到第一個字節(jié)”）。

要過濾的網(wǎng)絡(luò)表，只顯示某些類型的資源，單擊內(nèi)容類型之一沿著面板的底部：文檔，樣式表，圖片，腳本，XHR，字體的 WebSockets 和其他。在下面的截圖只CSS資源顯示。要查看所有內(nèi)容類型，單擊全部過濾器按鈕。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/filter-type.png" alt="filter-type.png" />

高級過濾

除了資源類型過濾，可以過濾查詢縮小資源。在過濾器輸入字段200：例如，要查找其中有 200 狀態(tài)碼的所有資源，你可以輸入查詢的StatusCode。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/network-advanced-filter.png" alt="network-advanced-filter.png" />

請注意以下行為：過濾器查詢包含一個類型（的StatusCode）和價值（200）。過濾器查詢是不區(qū)分大小寫，所以你可以鍵入大寫或小寫。該過濾器類型為您提供了自動完成建議。使用箭頭鍵來形成一個選擇，然后按Tab鍵選擇它。該過濾器值具有自動完成這表明你重視存在于當(dāng)前的網(wǎng)絡(luò)記錄?？焖兕A(yù)覽您的查詢的結(jié)果，使用Up/Down箭頭鍵循環(huán)通過自動完成建議。結(jié)果立即出現(xiàn)，即使你不按Enter鍵或選項卡來完成選擇。否定過濾器的查詢，在前面加上一個破折號查詢（ - ），例如-StatusCode：200。

可用過濾器類型：

使用上面列表中顯示的查詢，構(gòu)建它的格式為：<過濾器類型>：<說明>。你幾乎總是要使用自動完成建議可確保您的查詢有效。

添加和刪除表中的列

您可以通過改變網(wǎng)絡(luò)表顯示的列的默認(rèn)設(shè)置。要顯示或隱藏列，右鍵+單擊或控制+單擊（僅限Mac）在表頭，然后選擇或從列表中取消選擇列名。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/add-remove-columns.png" alt="add-remove-columns.png" />

改變資源行大小

你可以用較大的資源行（默認(rèn)），或小的資源行查看網(wǎng)絡(luò)表。點(diǎn)擊藍(lán)色的 http://wiki.jikexueyuan.com/project/chrome-devtools/images/small-resource-rows.png" alt="small-resource-rows.png" /> 用小資源行切換按鈕，小行的資源在面板底部，查看小行。點(diǎn)擊該按鈕（現(xiàn)灰色的 http://wiki.jikexueyuan.com/project/chrome-devtools/images/large-resource-rows.png" alt="large-resource-rows.png" /> 大資源行）再次查看大資源行。大型行啟用一些列，以顯示兩個文本字段：一次場和二次場（時間和等待時間，例如）。當(dāng)觀看小行只有主域顯示。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/small-rows.png" alt="small-rows.png" />

瀑布視圖

在網(wǎng)絡(luò)面板瀑布查看圖形花加載每個resource.From HTTP請求到接收到響應(yīng)的最后一個字節(jié)的開始的時間。

每個資源加載時間被表示為一欄。這具有與每個資源顏色編碼的信息。每種顏色指定收到資源需要不同的步驟。Bar增長較大的代表正在為trasmitted請求更多的數(shù)據(jù)。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/network-timeline.png" alt="network-timeline.png" />該網(wǎng)絡(luò)的時間表一個簡單的網(wǎng)頁。

將鼠標(biāo)懸停在該欄本身會呈現(xiàn)完整的時序數(shù)據(jù)。這就是會呈現(xiàn)在時序的詳細(xì)信息選項卡給定資源的相同信息。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/timeline-view-hover.png" alt="timeline-view-hover.png" />

網(wǎng)絡(luò)定時信息披露上徘徊

你可以使在網(wǎng)絡(luò)設(shè)置，以查看時間表作為顏色編碼的由資源類型。如果你做網(wǎng)絡(luò)定時信息仍然是通過提示訪問。瀑布桿被顏色編碼，如下所示：

保存和復(fù)制網(wǎng)絡(luò)信息

右鍵單擊或Ctrl+單擊（僅限Mac）上下文菜單出現(xiàn)的幾個動作網(wǎng)絡(luò)表內(nèi)。鼠標(biāo)點(diǎn)擊其中的一些動作適用于資源區(qū)（如復(fù)制HTTP請求頭），而另一些適用于整個網(wǎng)絡(luò)的記錄（如保存網(wǎng)絡(luò)記錄作為一個HAR文件）。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/right-click.png" alt="right-click.png" />

下面的菜單操作應(yīng)用到選定的資源：

• 打開鏈接在新標(biāo)簽頁 - 在打開新標(biāo)簽頁中的資源。您也可以雙擊網(wǎng)絡(luò)表中的資源名稱。
• 復(fù)制鏈接地址 - 復(fù)制資源URL到系統(tǒng)剪貼板。
• 復(fù)制請求頭 - 復(fù)制HTTP請求頭到系統(tǒng)剪貼板。
• 復(fù)制響應(yīng)頭 - 復(fù)制HTTP響應(yīng)頭到系統(tǒng)剪貼板。
• 復(fù)制為卷曲 - 復(fù)制網(wǎng)絡(luò)請求作為一個cURL命令字符串到系統(tǒng)剪貼板。請參閱復(fù)制請求作為卷曲的命令。
• 重播XHR - 如果相關(guān)請求是一個XMLHttpRequest，重新發(fā)送原始XHR。

復(fù)制請求作為卷曲的命令

cURL是一個命令行工具，用于對HTTP事務(wù)。網(wǎng)絡(luò)面板的復(fù)制為卷曲命令創(chuàng)建一個HTTP請求（包括HTTP頭，SSL證書和查詢字符串參數(shù)），并將其副本卷曲命令字符串復(fù)制到剪貼板。然后，您可以粘貼串入一個終端窗口（與卷曲的系統(tǒng)上）執(zhí)行相同的請求。

下面是來自谷歌新聞主頁上XHR請求采取的一個例子cURL命令行字符串。

curl 'http://news.google.com/news/xhrd=us' -H 'Accept-Encoding: gzip,deflate,:sdch' -H 'Host: news.google.com' -H 'Accept-Language: en-US,en;q=0.8' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1510.0 Safari/537.36' -H 'Accept: */*' -H 'Referer: http://news.google.com/nwshp?hl=en&tab=wn' -H 'Cookie: NID=67=eruHSUtoIQA-HldQn7U7G5meGuvZOcY32ixQktdgU1qSz7StUDIjC_Knit2xEcWRa-e8CuvmADminmn6h2_IRpk9rWgWMdRj4np3-DM_ssgfeshItriiKsiEXJVfra4n; PREF=ID=a38f960566524d92:U=af866b8c07132db6:FF=0:TM=1369068317:LM=1369068321:S=vVkfXySFmOcAom1K' -H 'Connection: keep-alive' --compressed

節(jié)省網(wǎng)絡(luò)數(shù)據(jù)

您可以從網(wǎng)絡(luò)記錄作為HAR（HTTP Archive）文件保存數(shù)據(jù)，或記錄復(fù)制為HAR數(shù)據(jù)結(jié)構(gòu)到剪貼板。一個HAR文件包含一個JSON數(shù)據(jù)結(jié)構(gòu)，描述了網(wǎng)絡(luò)的“瀑布”。一些第三方工具可以從HAR文件中的數(shù)據(jù)重建網(wǎng)絡(luò)的瀑布。

要保存記錄：

1. 右鍵+單擊或控制+單擊網(wǎng)絡(luò)表。
2. 在出現(xiàn)的快捷菜單中，選擇下列操作之一：
   • 所有的復(fù)制為HAR - 復(fù)制網(wǎng)絡(luò)記錄在HAR格式的系統(tǒng)剪貼板。
   • 另存為HAR與內(nèi)容 - 保存所有網(wǎng)絡(luò)數(shù)據(jù)到HAR文件以及每個頁面資源。二進(jìn)制資源，包括圖像，編碼為Base64編碼的文本。

欲了解更多信息，Web性能電動工具：HTTP存檔（HAR）。

網(wǎng)絡(luò)資源的詳細(xì)信息

當(dāng)您單擊網(wǎng)絡(luò)表的資源名稱出現(xiàn)一個選項卡式窗口，其中包含以下其他詳細(xì)信息：

• HTTP請求和響應(yīng)頭
• 資源預(yù)覽
• HTTP響應(yīng)
• Cookie的名稱和值
• WebSocket的消息
• 資源網(wǎng)絡(luò)定時

HTTP頭

標(biāo)題標(biāo)簽顯示資源的請求的URL，HTTP方法和響應(yīng)狀態(tài)代碼。此外，它列出了HTTP響應(yīng)和請求頭和它們的值，以及任何查詢字符串參數(shù)。您可以查看HTTP標(biāo)頭解析和格式化，或者點(diǎn)擊查看解析/查看源代碼切換按鈕，分別毗鄰每個標(biāo)題的一節(jié)他們的源代碼形式。您還可以查看自己的解碼或URL編碼形式的參數(shù)值，點(diǎn)擊查看解碼/查看URL編碼切換按鈕旁邊的每個查詢字符串部分。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/network-headers.png" alt="network-headers.png" />

您也可以請求和響應(yīng)頭復(fù)制到剪貼板。

資源預(yù)覽

預(yù)覽選項卡顯示資源，當(dāng)可用的預(yù)覽。預(yù)覽當(dāng)前顯示圖像和JSON資源，如下所示。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/resource-preview-json.png" alt="resource-preview-json.png" />

http://wiki.jikexueyuan.com/project/chrome-devtools/images/network-image-preview.png" alt="network-image-preview.png" />

您可以查看該資源的上Responsetab格式化響應(yīng)。

HTTP響應(yīng)

響應(yīng)選項卡包含資源的未格式化的內(nèi)容。下面是被返回作為用于請求的響應(yīng)，一個JSON數(shù)據(jù)結(jié)構(gòu)的屏幕截圖。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/response.png" alt="response.png" />

您還可以查看一些資源類型格式預(yù)覽，包括JSON數(shù)據(jù)結(jié)構(gòu)和圖像。

Cookies

Cookies標(biāo)簽顯示所有在theresource的HTTP請求和響應(yīng)頭發(fā)送的cookie的表。您也可以清除所有的cookies。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/cookies.png" alt="cookies.png" />

Cookie表包含以下幾列：

WebSocket 的框架

幀標(biāo)簽顯示發(fā)送或接收通過 WebSocket 連接的消息。此選項卡才可見當(dāng)選定的資源發(fā)起的WebSocket連接。該表包含以下幾列：

消息是彩色編碼根據(jù)其類型。即將離任的文本信息顏色編碼淺綠色;收到的短信均為白色：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/websocket-text2.png" alt="websocket-text2.png" />

WebSocket的操作碼是淺黃色：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/frames-opcode.png" alt="frames-opcode.png" />

錯誤是淺紅色。

關(guān)于當(dāng)前實施的注意事項：

• 要刷新的幀數(shù)表中的新郵件到達(dá)后，點(diǎn)擊左側(cè)的資源名稱。
• 只有最后100的WebSocket消息由幀表保留。

資源網(wǎng)絡(luò)定時

定時圖表選項卡上度過涉及加載資源的各種網(wǎng)絡(luò)階段的時間。這顯示了相同的數(shù)據(jù)，當(dāng)您在在瀑布查看資源吧懸停。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/timing.png" alt="timing.png" />