【譯】你不知道的 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
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。但是你同樣可以新增更多(例如 我經常新增 Methoc)。更多：
所有你可以在
Network面板裡展示的資訊。
要自定義顯示哪些列，只需右鍵單擊請求表標題上的任意位置。請注意，Response Headers 是一個有更多選項的完整的子選單，甚至可以定義你自己的選項。
慣例： 如果你從這裡學到了一些新東西
→ 你可以點個贊再走嘛~
→ 關注我：Twitter：Tomek Sułkowski
其他系列
其他此係列的文章，馬上就會翻譯出來，到時會貼出對應的連結在此處。
- 【譯】你不知道的 Chrome 除錯工具技巧 第一天：console 中的'$'
- 【譯】你不知道的 Chrome 除錯工具技巧 第二天：copying & saving
- 【譯】你不知道的 Chrome 除錯工具技巧 第三天：console methods
- 【譯】你不知道的 Chrome 除錯工具技巧 第四天：the Elements panel（元素面板）
- 【譯】你不知道的 Chrome 除錯工具技巧 第五天：console 的 log 中,讓人疑惑的案例
- 【譯】你不知道的 Chrome 除錯工具技巧 第六天：command 選單
- 【譯】你不知道的 Chrome 除錯工具技巧 第七天：非同步 consle 的趣味小竅門
- 【譯】你不知道的 Chrome 除錯工具技巧 第八天：Color picker（顏色選擇器）
- 【譯】你不知道的 Chrome 除錯工具技巧 第九天：給 console 計時
- 【譯】你不知道的 Chrome 除錯工具技巧 第十天：custom formatters（自定義格式轉換器）
- 【譯】你不知道的 Chrome 除錯工具技巧 第十一天：style editors continued（樣式編輯器後續）
- 【譯】你不知道的 Chrome 除錯工具技巧 第十二天：忍者日誌列印！(the ninja logs)
- 【譯】你不知道的 Chrome 除錯工具技巧 第十三天：物件 & 方法
- 【譯】你不知道的 Chrome 除錯工具技巧 第十四天：其他快捷鍵~
- 【譯】你不知道的 Chrome 除錯工具技巧 第十五天：Twitter day~
- 【譯】你不知道的 Chrome 除錯工具技巧 第十六天：斷點
- 【譯】你不知道的 Chrome 除錯工具技巧 第十七天：再會 console
- 【譯】你不知道的 Chrome 除錯工具技巧 第十八天：Drawer 裡的祕密
- 【譯】你不知道的 Chrome 除錯工具技巧 第十九天：深入 Drawer
- 【譯】你不知道的 Chrome 除錯工具技巧 第二十天：Workspace的黑魔法
- 【譯】你不知道的 Chrome 除錯工具技巧 第二十一天：Snippets(程式碼塊)
- 【譯】你不知道的 Chrome 除錯工具技巧 第二十二天：network
- 【譯】你不知道的 Chrome 除錯工具技巧 第二十三天：Drawer tips 後續
- 【譯】你不知道的 Chrome 除錯工具技巧 第二十四天：最後一天，元旦牛逼
寫在最後
如果你對我的翻譯表示肯定，也可以關注我一波哦~ 順便我的開源專案，求一波 star→ 看這裡, 美麗的部落格系統