如果選出 Chrome DevTools 里最常用的功能，那 Network 肯定是其中之一。

作為前端工程師，我們看到一個(gè)網(wǎng)頁會(huì)習(xí)慣性的打開 Chrome DevTools 看下網(wǎng)絡(luò)請(qǐng)求。

不過雖然每天都在用，還是有一些高級(jí)功能大多數(shù)人不知道。

今天就來梳理下那些很有用但是知道的人比較少的功能：

filter

一個(gè)網(wǎng)站會(huì)有很多的請(qǐng)求，當(dāng)你想查找某個(gè)請(qǐng)求的時(shí)候，是怎么過濾的呢？

關(guān)鍵詞搜索么？

但是關(guān)鍵詞搜索只能根據(jù) url 來過濾。

很多時(shí)候這樣不太夠。

比如我想搜索視頻類型的請(qǐng)求，根據(jù) url 怎么過濾？比如我想搜索大于 1M 的請(qǐng)求，根據(jù) url 怎么過濾？

這時(shí)候就可以用過濾器功能了。

輸入 mime-type，加個(gè)冒號(hào)，Chrome DevTools 就會(huì)列出當(dāng)前網(wǎng)頁的請(qǐng)求的所有 mime type，選擇某一種，就會(huì)過濾出那種 mime type 的請(qǐng)求。

比如過濾 mp4 請(qǐng)求：

過濾 webp 請(qǐng)求：

或者不根據(jù) mime-type，根據(jù)資源的大致分類來過濾：

輸入 resource-type，加個(gè)冒號(hào)或者按右方向鍵，會(huì)展示出所有的資源分類，包括 document、styleshleet、image 等：

其實(shí)這就是 Network 的這部分：

而且還可以按住 command 鍵多選。

除了資源類型外，還可以根據(jù)狀態(tài)碼過濾：

比如 200、404、500 等，只是我測試的這個(gè)頁面沒有 404 之類的請(qǐng)求。

狀態(tài)碼 0 代表被刪除或取消的請(qǐng)求，網(wǎng)絡(luò)請(qǐng)求是可以被取消的，這種就可以通過狀態(tài)碼 0 來過濾。

此外還可以根據(jù)資源的大小來過濾：

通過 larger-than 指定 100、300k、2M 等大小的限制，就可以過濾出大小大于這個(gè)值的請(qǐng)求。

還可以根據(jù)請(qǐng)求方式，是 GET、POST 等來過濾：

根據(jù)是否包含某個(gè)響應(yīng) header 來過濾：

has-response-header:Set-Cookie 過濾出來的就是有設(shè)置 cookide 的響應(yīng)的請(qǐng)求

has-response-header:access-control-allow-origin 過濾出來的就是支持跨域的請(qǐng)求

根據(jù)是否包含某個(gè) cookie 來過濾：

常用的過濾器主要有這些：

• has-response-header：過濾響應(yīng)包含某個(gè) header 的請(qǐng)求
• method：根據(jù) GET、POST 等請(qǐng)求方式過濾請(qǐng)求
• domain: 根據(jù)域名過濾
• status-code：過濾響應(yīng)碼是 xxx 的請(qǐng)求，比如 404、500 等
• larger-than：過濾大小超過多少的請(qǐng)求，比如 100k，1M
• mime-type：過濾某種 mime 類型的請(qǐng)求，比如 png、mp4、json、html 等
• is：過濾某種狀態(tài)的請(qǐng)求，比如 from cache 從緩存拿的，比如 running 還在運(yùn)行的
• resource-type：根據(jù)請(qǐng)求分類來過濾，比如 document 文檔請(qǐng)求，stylesheet 樣式請(qǐng)求、fetch 請(qǐng)求，xhr 請(qǐng)求，preflight 預(yù)檢請(qǐng)求
• cookie-name：過濾帶有某個(gè)名字的 cookie 的請(qǐng)求

當(dāng)然，這些不需要記，輸入一個(gè) - 就會(huì)提示所有的過濾器：

但是這個(gè)減號(hào)之后要去掉，它是非的意思：

和右邊的 inert 選項(xiàng)功能一樣。

而且，這些過濾器都可以組合，只要中間加個(gè)空格就行。

但是有同學(xué)會(huì)問了，這些過濾器里好像不支持根據(jù)內(nèi)容過濾呀。

確實(shí)，過濾器不支持這個(gè)，但是可以自己搜：

developer resources

看到 sourcemap 有的同學(xué)可能會(huì)問，對(duì)了，sourcemap 文件為啥在 Network 里看不到呢？

明明會(huì)下載 sourcemap 文件，為啥我從來沒看到過呢？

其實(shí)這個(gè)被 Network 過濾掉了，想看到這些文件的請(qǐng)求在另一個(gè)地方：

點(diǎn)擊 show console drawer：

打開 developer resources:

就可以看到所有的 sourcemap 請(qǐng)求了：

custom columns

請(qǐng)求的列表里展示什么列是可以自定義的：

比如 cookies 和 set-cookies 就可以看到所有攜帶和設(shè)置 cookie 的請(qǐng)求：

勾選 cache-control 可以直觀看到不同資源的緩存設(shè)置：

請(qǐng)求列表右邊有個(gè) waterfall，默認(rèn)是展示請(qǐng)求的時(shí)間，但我覺得這個(gè)沒啥用，我更喜歡看請(qǐng)求響應(yīng)的耗時(shí)：

所以我會(huì)把它換成 total duration：

這樣 waterfall 展示的就是耗時(shí)了：

可以直觀的看到請(qǐng)求的耗時(shí)，還可以排序。我覺得這個(gè)數(shù)據(jù)有用的多。

總結(jié)

今天分享了 Network 相關(guān)的小技巧：

過濾請(qǐng)求可以用 status-code、mime-type、resource-type 等過濾器，有啥過濾器可以通過 - 來提示，但是 - 是非的意思，之后要去掉，過濾器可以組合來使用。

過濾器不支持內(nèi)容過濾，這個(gè)可以自己搜索。

sourcemap 文件的請(qǐng)求不顯示在 Network 里，這個(gè)可以在 dawer 的 develop resources 面板里看到。

Network 的請(qǐng)求列表可以自定義展示的列，waterfall 也可以改展示的信息，我覺得展示 duration 有用的多。

學(xué)會(huì)了這些 Network 小技巧，相信你調(diào)試網(wǎng)絡(luò)請(qǐng)求時(shí)效率會(huì)更高。