經常會聽到比如"為什麼我的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載入完的時間、頁面載入完的時間(包含資源)，如圖

就這些吧，如有不正之處，敬請指出~ 同時歡迎交流~