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

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

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

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

connectEnd：瀏覽器與服務(wù)器完成建立用以檢索資源的網(wǎng)絡(luò)連接的時間戳

connectStart：瀏覽器與服務(wù)器開始建立用以檢索資源的網(wǎng)絡(luò)連接的時間戳

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

damainLookupStart：瀏覽器開始進(jìn)行資源的域名解析的時間戳

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

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

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

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

initiatorType：資源文件的類型

name：資源的url

redirectEnd：接收到重定向資源的最后一個響應(yīng)字節(jié)的時間戳

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

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

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

responseStart：瀏覽器接收到服務(wù)器的響應(yīng)的第一個字節(jié)的時間戳

secureConnectionStart：瀏覽器開始握手協(xié)議，以保護(hù)當(dāng)前連接的安全性，握手開始的時間

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

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

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

認(rèn)識Network

記錄按鈕

處于打開狀態(tài)時會在此面板進(jìn)行網(wǎng)絡(luò)連接的信息記錄，關(guān)閉后則不會記錄。

清除記錄

清除當(dāng)前的網(wǎng)絡(luò)連接記錄信息。

捕獲截屏

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

過濾條件

自定義

選擇框內(nèi)可輸入過濾關(guān)鍵字進(jìn)行資源列表的過濾，如下圖所示。

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

也可進(jìn)行指定條件的搜索，如下圖。

指定條件有哪些？

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

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

is：當(dāng)前時間點在執(zhí)行的請求。當(dāng)前可用值：running

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

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

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

scheme：協(xié)議規(guī)定。如 HTTPS

set-cookie-name：服務(wù)器設(shè)置的cookies名稱

set-cookie-value：服務(wù)器設(shè)置的cookies的值

set-cookie-domain：服務(wù)器設(shè)置的cookies的域

status-code：HTTP響應(yīng)頭的狀態(tài)碼

按鈕組

根據(jù)按鈕規(guī)定的條件進(jìn)行篩選，比如下圖過濾出圖片。

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

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

資源列表樣式

資源列表詳細(xì)信息和縮略信息的顯示。

保存日志

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

是否緩存

當(dāng)打開開發(fā)者工具時生效，打開這個開關(guān)，則頁面資源不會存入緩存，可以從Status欄的狀態(tài)碼看文件請求狀態(tài)。

限流控制(網(wǎng)速模擬)

模擬不同網(wǎng)速下的環(huán)境加載當(dāng)前頁面，直接看圖就能知道怎么用了。

時間軸

圖中有兩條線，一條藍(lán)色的，一條橙色的。

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

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使用，我們選中一段時間內(nèi)的資源加載情況來看看。

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

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

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

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

Start Time：根據(jù)每個網(wǎng)絡(luò)請求的發(fā)送時間排序，也是默認(rèn)排序

Respone Time：根據(jù)每個網(wǎng)絡(luò)請求的響應(yīng)時間排序

End Time：根據(jù)每個網(wǎng)絡(luò)請求的完成時間排序

Total Duration：根據(jù)每個網(wǎng)絡(luò)請求的總耗時排序

Latency：根據(jù)每個網(wǎng)絡(luò)請求的發(fā)送請求時間點和得到響應(yīng)時間點的時間差排序

資源列表

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

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

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

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

Method：HTTP請求發(fā)送方式

Domain：資源所在域

Cookies：網(wǎng)絡(luò)請求所產(chǎn)生的cookies的數(shù)量

Size(Content)：size是響應(yīng)頭和響應(yīng)體相加的大小規(guī)格，content是資源解碼內(nèi)容的大小規(guī)格

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

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

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

資源的詳細(xì)信息

Headers：Header面板列出資源的請求url、HTTP方法、響應(yīng)狀態(tài)碼、請求頭和響應(yīng)頭及它們各自的值、請求參數(shù)等等。如圖所示

Preview：預(yù)覽面板，用于資源的預(yù)覽。

Response：響應(yīng)信息面板包含資源還未進(jìn)行格式處理的內(nèi)容，如常見的json數(shù)據(jù)，當(dāng)然，下面的截圖不符合之前說的json數(shù)據(jù)，而是jsonp的...

Cookies：cookies面板顯示該資源請求中所傳輸?shù)乃衏ookies信息，并以表格形式展示。

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

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

右鍵菜單

Copy Request Headers：復(fù)制HTTP請求頭到系統(tǒng)剪貼板

Copy Response Headers：復(fù)制HTTP響應(yīng)頭到系統(tǒng)剪貼板

Copy Response：復(fù)制HTTP響應(yīng)內(nèi)容到系統(tǒng)剪貼板

Copy as cURL：將網(wǎng)絡(luò)請求作為一個curl的命令字符復(fù)制到系統(tǒng)剪貼板(curl是一種開源的命令行工具和庫，用于配合url語法進(jìn)行數(shù)據(jù)傳輸)

Copy All as HAR：將網(wǎng)絡(luò)請求記錄信息以HAR格式復(fù)制到系統(tǒng)剪貼板(what is HAR file)

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

Clear Browser Cache：清除瀏覽器緩存

Clear Browser Cookies：清除瀏覽器cookies

Open in Sources Panel：當(dāng)前選中資源在Sources面板打開

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

Copy Link Address：復(fù)制資源url到系統(tǒng)剪貼板

Save：保存當(dāng)前資源文件到本地

信息歸總

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。