【譯】你不知道的 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

其餘系列

其餘此係列的文章，立刻就會翻譯出來，到時會貼出對應的連接在此處。

• 【譯】你不知道的 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→ 看這裏, 美麗的博客系統

做者在 Twitter 上推薦咱們的中文翻譯啦