經常會聽到比如"為什么我的js代碼沒執行啊？","我明明發送了請求，為什么反應？","我這個網站怎么加載的這么慢？"這類的問題，那么問題既然存在，就需要去解決它，需要解決它，首先我們得找對導致問題的原因，才能"對癥下藥"。

每個文件的載入、每次發送的請求也都是一次網絡交互，所以在這個面板中，我們能夠看到我們所需要的js文件是否被加載？我們所請求的接口到底返回了沒有？我們能夠知道哪個文件拖慢了整個web頁的加載過程？Netwrok面板中會記錄應用程序的每一次網絡交互信息，每次交互的詳細時間、HTTP請求頭和響應頭、cookies、WebSocket的數據等等...

面板的資源數據依賴的是javascript的資源計時api，對于每一個資源的加載都提供詳細的同步數據。比如，明確列出當一個http開始請求的時間及最后字節接收完的時間以及詳細過程。我們也可以通過window.performance.getEntries()方法獲取資源加載列表，下面給出列表中第一個對象的屬性截圖。

簡單過一遍這些屬性的含義(這些屬性都是只讀的)

connectEnd：瀏覽器與服務器完成建立用以檢索資源的網絡連接的時間戳

connectStart：瀏覽器與服務器開始建立用以檢索資源的網絡連接的時間戳

damainLookupEnd：瀏覽器完成資源的域名解析的時間戳

damainLookupStart：瀏覽器開始進行資源的域名解析的時間戳

duration：資源請求從開始到結束的時間差

entryType：PerformanceEntry對象的類型，該對象封裝一個單一的性能指標作為性能表的一部分，此類型值

是"frame","mark","measure","navigation","resource","server"的其中一個。

fetchStart：瀏覽器開始獲取資源的時間戳

initiatorType：資源文件的類型

name：資源的url

redirectEnd：接收到重定向資源的最后一個響應字節的時間戳

redirectStart：啟動重定向以獲取資源的開始時間戳

requestStart：瀏覽器從服務器請求資源的開始時間戳

responseEnd：瀏覽器接收到資源最后一個字節的時間戳，或者關閉傳輸連接的時間戳

responseStart：瀏覽器接收到服務器的響應的第一個字節的時間戳

secureConnectionStart：瀏覽器開始握手協議，以保護當前連接的安全性，握手開始的時間

startTime：瀏覽器開始獲取資源前的時間戳(整個過程的開始時間)

workerStart：如果當前上下文是"worker"，返回開始獲取資源的時間戳，否則返回0(應該是應用于雙工通信的)

回到Network，我們來看看這個面板

認識Network

記錄按鈕

處于打開狀態時會在此面板進行網絡連接的信息記錄，關閉后則不會記錄。

清除記錄

清除當前的網絡連接記錄信息。

捕獲截屏

記錄頁面加載過程中一些時間點的頁面渲染情況，截圖根據可視窗口截取，如下圖所示。

過濾條件

自定義

選擇框內可輸入過濾關鍵字進行資源列表的過濾，如下圖所示。

圖中"regex"選擇框勾選可支持正則匹配。

也可進行指定條件的搜索，如下圖。

指定條件有哪些？

domain：資源所在的域，即url中的域名部分。如 domain:api.github.com

has-response-header：資源是否存在響應頭，無論其值是什么。如 has-response-header：Access-Control-Allow-Origin

is：當前時間點在執行的請求。當前可用值：running

larger-than：顯示大于指定值大小規格的資源。單位是字節(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

method：使用何種HTTP請求方式。如 GET

mime-type：也寫作content-type，是資源類型的標識符。如 text/html

scheme：協議規定。如 HTTPS

set-cookie-name：服務器設置的cookies名稱

set-cookie-value：服務器設置的cookies的值

set-cookie-domain：服務器設置的cookies的域

status-code：HTTP響應頭的狀態碼

按鈕組

根據按鈕規定的條件進行篩選，比如下圖過濾出圖片。

顯得太高端，竟然還可以瀏覽圖片。

按鈕組有: All,XHR,JS,CSS,Img,Media,Font,Doc(Document),WS(WebSocket),Manifest,Other。

資源列表樣式

資源列表詳細信息和縮略信息的顯示。

保存日志

在頁面重新加載或者url改變時保留日志(包括資源列表和時間軸上的數據)。

是否緩存

當打開開發者工具時生效，打開這個開關，則頁面資源不會存入緩存，可以從Status欄的狀態碼看文件請求狀態。

限流控制(網速模擬)

模擬不同網速下的環境加載當前頁面，直接看圖就能知道怎么用了。

時間軸

圖中有兩條線，一條藍色的，一條橙色的。

藍色線代表DOM已加載完成，橙色線表示頁面加載完(包括資源引用)，也可以用代碼對這兩個事件進行監聽，在這兩個事件完成的時間點做對應的操作。

window.addEventListener('DOMContentLoaded',function(e){e.cancelBubble = true;console.log(window.performance.now());},true);window.addEventListener('load',function(e){e.cancelBubble = true;console.log(window.performance.now());},true);

回到時間軸，來探查它給我們提供了什么信息。

配合資源列表的timeline使用，我們選中一段時間內的資源加載情況來看看。

圖中截取的大致時間是5.2~5.75左右的一小截，沒一條多色線代表一個資源的網絡交互情況，上面的時間軸中有2個資源是剛開始進行網絡連接，有3個資源已經加載完畢，還有1個資源全程都在加載過程中；然后對應資源列表中的timeline字段，能夠發現情況其實和上面是一樣的，并且在這里還能夠明確的看到這是哪個文件及其詳細信息。

然后將鼠標放到timeline中的多色線上，還能夠看到資源請求的詳細信息，如圖所示。

可以明確的看出一條資源的列隊、停滯、代理協議、初始化連接、SSL協議、發送request、等待及內容下載所耗的時間。

既然都說這么多了，就將timeline從資源列表中提取出來提前講了吧，點擊timeline列的標題，會有一些選項，這里介紹下這些選項。

Start Time：根據每個網絡請求的發送時間排序，也是默認排序

Respone Time：根據每個網絡請求的響應時間排序

End Time：根據每個網絡請求的完成時間排序

Total Duration：根據每個網絡請求的總耗時排序

Latency：根據每個網絡請求的發送請求時間點和得到響應時間點的時間差排序

資源列表

資源列表展示了所有資源請求的信息，字段也是很多，在下面都會列出來，但不會每一個都進行詳細探討(以詳細模式的為案例吧，縮略模式的也包含在里面)。

Name(Path)：資源的名稱和url

Status(Text)：HTTP請求狀態碼及文字說明

Type：所請求的資源的MIME類型

Method：HTTP請求發送方式

Domain：資源所在域

Cookies：網絡請求所產生的cookies的數量

Size(Content)：size是響應頭和響應體相加的大小規格，content是資源解碼內容的大小規格

Time(Latency)：time是整個網絡交互所耗的總時間，從發送請求到接收最后一個字節，latency是響應時加載第一個字節的時間
Timeline：時間軸(已介紹，略過...)

此外還有Cache-Control(緩存操作，網頁緩存由 HTTP消息頭中的Cache-control控制)、Connection(連接狀態，如 keep-alive)、Connection Id(連接id)、Content-Encoding(連接解碼，如 gzip)、Content-Length(內容長度)、ETag(Entity Tag，資源的實體標簽)、Initiator(觸發點)、Keep-Alive(據說功能是使客戶端到服務器端的連接持續有效)、Last-Modified(最后修改時間)、Priority(優先級)、Protocol(協議)、Remote Address(遠程地址)、Scheme(協議模式)、Set-Cookies(服務端設置cookies)、Vary(瀏覽器與服務器的編碼協議規定)

以上各個知識點可自行搜索，網上資料不少哦(指的是google...)

資源的詳細信息

Headers：Header面板列出資源的請求url、HTTP方法、響應狀態碼、請求頭和響應頭及它們各自的值、請求參數等等。如圖所示

Preview：預覽面板，用于資源的預覽。

Response：響應信息面板包含資源還未進行格式處理的內容，如常見的json數據，當然，下面的截圖不符合之前說的json數據，而是jsonp的...

Cookies：cookies面板顯示該資源請求中所傳輸的所有cookies信息，并以表格形式展示。

Timing：資源請求的詳細信息，上面有描述。如圖

還有WebSocket面板，在需要實現雙工通信的時候會有，暫時未涉及到，不是很了解，之后如有理解到再做補全。

右鍵菜單

Copy Request Headers：復制HTTP請求頭到系統剪貼板

Copy Response Headers：復制HTTP響應頭到系統剪貼板

Copy Response：復制HTTP響應內容到系統剪貼板

Copy as cURL：將網絡請求作為一個curl的命令字符復制到系統剪貼板(curl是一種開源的命令行工具和庫，用于配合url語法進行數據傳輸)

Copy All as HAR：將網絡請求記錄信息以HAR格式復制到系統剪貼板(what is HAR file)

Save as HAR with Content：將資源的所有的網絡信息保存到HAR文件中(.har文件)

Clear Browser Cache：清除瀏覽器緩存

Clear Browser Cookies：清除瀏覽器cookies

Open in Sources Panel：當前選中資源在Sources面板打開

Open Link in New Tab：在新tab打開資源鏈接

Copy Link Address：復制資源url到系統剪貼板

Save：保存當前資源文件到本地

信息歸總

主要展示了一些基本的統計信息，請求總次數、傳輸總大小，總耗時多少、DOM加載完的時間、頁面加載完的時間(包含資源)，如圖

from:?http://www.cnblogs.com/ys-ys/p/5625409.html

總結

以上是生活随笔為你收集整理的Chrome 开发工具之Network的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。