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

dendoink發表於2018-12-29

特別宣告

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

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

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

正文

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

61. Hide network overview( 隱藏 network overview )

你是否經常檢視 Network 皮膚:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

其他系列

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

寫在最後

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

作者在 Twitter 上推薦我們的中文翻譯啦

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

相關文章