Network 作為我們經(jīng)常調(diào)試的 Chrome 面板，你知道它有哪些使用技巧嗎？

1. 隱藏 network overview

你經(jīng)常查看 Network 面板是為了:

• 我想看看請求的時間軸信息
• 我就想看看請求列表- 確認下請求狀態(tài)，資源大小和響應(yīng)結(jié)果呢

我賭你是后者，如果是這樣，那么 Overview 的部分就沒有任何理由占用 Network 接近一半的空間。隱藏它！

2. Request initiator 顯示了調(diào)用堆棧信息

initiator 可以翻譯為 啟動器，但是太過生硬，大家理解意思就好。

Network 面板中的 initiator 這一列顯明了是哪個腳本的哪一行觸發(fā)了請求。它顯示了在調(diào)用堆棧中觸發(fā)請求的最后一步。但如果你用的是，例如：一個本地化的 fetch API， 那它將會指向一些低層級的類庫的代碼 - 例如 當我們在 Angular 配合使用 Axios 或者 zone.js 的時候，這時指向的是 xhr.js

除了這些外部庫之外，如果你希望查看代碼的哪一部分觸發(fā)了請求。 將鼠標懸停在顯示的 initiator（例如 外部庫）上，你將看到完整的調(diào)用堆棧，包括你的文件：

3. 請求過濾

Network 面板中的過濾器輸入框接受字符串或正則表達式，對應(yīng)顯示匹配的請求。 但是你也可以使用它來過濾很多屬性。

只需輸入 例如 method 或者 mime-type :

image

如果想要顯示所有可能的關(guān)鍵字，在空白的輸入框按下 [ctrl] + [space]

4. 自定義請求表

在請求表中，你可以看到有關(guān)每個請求的幾條信息，例如：Status， Type， Initiator， Size和 Time。但是你同樣可以添加更多(例如 我經(jīng)常添加 Method)。更多：

你可以添加所有 Network 面板里展示出來的信息。

要自定義顯示哪些列，右鍵單擊請求表標題上的任意位置。

請注意，Response Headers 是一個有更多選項的完整的子菜單，甚至可以定義你自己的選項。

5. 重新發(fā)送 XHR 的請求

如何重新發(fā)送 XHR 的請求？刷新頁面？太老套了，試試這么做：

6. XHR/fetch 斷點

在某一特定時刻，你想要對已發(fā)送的 “ajax” 請求進行捕獲怎么做呢？ 可以使用 XHR/fetch breakpoint 。

這些只能在 Source 面板中設(shè)置。（我也同樣希望可以直接在 Network 面板中設(shè)置，但事實并非如此）

你可以添加部分 URL 作為觸發(fā)器或監(jiān)聽任何請求：