Chrome調試技巧- Network 的騷操作

前言

Network 作爲我們經常調試的 Chrome 面板，你知道它有哪些使用技巧嗎？

1. 隱藏 network overview

你經常查看 Network 面板是爲了:

• 我想看看請求的時間軸信息
• 我就想看看請求列表- 確認下請求狀態，資源大小和響應結果呢

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

2. Request initiator 顯示了調用堆棧信息

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

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

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

3. 請求過濾

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

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

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

4. 自定義請求表

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

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

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

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

5. 重新發送 XHR 的請求

如何重新發送 XHR 的請求？刷新頁面？太老套了，試試這麼做：

6. XHR/fetch 斷點

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

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

你可以添加部分 URL 作爲觸發器或監聽任何請求：