經常會聽到比如"為什麼我的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
記錄按鈕
處于打開狀态時會在此面闆進行網絡連接配接的資訊記錄，關閉後則不會記錄。
清除記錄
清除目前的網絡連接配接記錄資訊。
捕獲截屏
記錄頁面加載過程中一些時間點的頁面渲染情況，截圖根據可視視窗截取，如下圖所示。
過濾條件
自定義
選擇框内可輸入過濾關鍵字進行資源清單的過濾，如下圖所示。