【譯】你不知道的 Chrome 除錯工具技巧第二十二天：network

特別宣告

本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原作者所有。

作者在 Twitter 上推薦我們的中文翻譯啦,截圖在最後

譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，授權的記錄在這裡

正文

在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天我們把玩了一下程式碼塊，今天聊聊 Network ：

61. Hide network overview（隱藏 network overview ）

你是否經常檢視 Network 皮膚:

看看請求的時間軸
或者，可能僅僅只是檢視請求列表- 來確認狀態，大小和響應呢?

我賭你是後者，如果是這樣的話，那麼 Overview 部分中沒有任何理由可以佔用 Network 一半左右的空間。隱藏它。

62.Request initiator shows a call stack( Request initiator 顯示了呼叫堆疊資訊)

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

Network 皮膚中的 initiator 列顯示了是哪個指令碼的哪一行觸發了請求。他顯示了在呼叫堆疊中觸發請求的最後一步，除非你用的是，例如：一個本地化的 fetch API,它將會指向一些低層級的類庫的程式碼 - 例如當我們在 Angular 配合使用 Axios 或者 zone.js 的時候，這時指向的是 xhr.js

除了這些外部庫之外，你可能希望檢視程式碼的哪一部分觸發了請求。要將資訊懸停在顯示的 initiator（例如外部庫）上，你將看到完整的呼叫堆疊，包括你的檔案：

63.Filter requests by method (按照方法過濾請求)

Network 皮膚中的過濾器輸入可以接受你輸入的字串或正規表示式，僅顯示匹配的請求。但是你也可以使用它來過濾很多屬性。

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

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

64. Customise the requests table(自定義請求表)

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

所有你可以在 Network 皮膚裡展示的資訊。

要自定義顯示哪些列，只需右鍵單擊請求表標題上的任意位置。請注意，Response Headers 是一個有更多選項的完整的子選單，甚至可以定義你自己的選項。

慣例：如果你從這裡學到了一些新東西

→ 你可以點個贊再走嘛~
→ 關注我：Twitter：Tomek Sułkowski

其他系列

其他此係列的文章，馬上就會翻譯出來，到時會貼出對應的連結在此處。

寫在最後

如果你對我的翻譯表示肯定，也可以關注我一波哦~ 順便我的開源專案，求一波 star→ 看這裡, 美麗的部落格系統

【譯】你不知道的 Chrome 除錯工具技巧 第二十二天：network