提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

【Debug】 你所不知道的各种前端Debug技巧系列Network - Filter & Search Requests---第16天

amp前端 系列 技巧 --- 知道 各种 16
2023-09-27 14:27:53 时间

概览

无论是在开发简单的网站，检查一个Request 是否成功发送并收到预期的Response，还是从Network log 的时间线来分析网站效能问题，每次打开Network log 列表时，总会有一个明确的目标，此时用肉眼从所有Network log 中寻找特定的几条就非常没有效率，尤其网页较为复杂又有一堆广告、追踪码参杂时，完全是大海捞针。

本篇文章将会说明如何利用Network 面板的Filter、Search 功能快速的从Network log 海中萃取出想要分析的目标。

过滤（Filter）

Filter 的目的较为清晰，用来留下或排除特定的Request，以下是所有能在Filter 填入的规则类别。

By name

最简单的方式是直接输入字串或Regex pattern 来留下比对到的Request name，例如Domain、档案路径、档名、副档名，也可以在字串前面加一个减号来排除Request。
在这里插入图片描述
然而直接输入pattern 的过滤方式仅限于Request 的URL name，通常会搭配其他Filter 来做到更进阶的过滤。

By type

在Filter输入框右侧列出了许多Request类型，点击其中一个就会排除掉其他类型的Request，也可以按住Command来同时选择多种类型。
在这里插入图片描述
注意选择CSS类并不等于在Filter内输入.css，Request的档案类型是由Network面板判定，例如某CSS档是来自XHR/Fetch的话，就不会显示在CSS类别里。

同理选择Font类别就不会是.font结尾，而是.woff2、.ttf等等，WS (WebSocket)类别则会看到wss://开头的Request。

By properties
以属性（Property）过滤是最强大的方式，Network 面板支援的Property filter 有非常多种，最特别的是输入Property 时会跳出下拉选单，列出该Propert 在目前的Request 中能使用的值。
在这里插入图片描述
输入冒号来触发下拉选单

以下为所有可用的Property，在前方加入减号一样可以变为排除Request：

domain

domain:*.com -domain:google.com

比起直接在Filter输入网域名，可以用wildcard字元做到更弹性的过滤，例如用.com显示所有.com结尾的Request domain，加入减号来排除Domain出现google.com的Request。在这里插入图片描述
输入domain:时就能看到目前的Request记录中大概包含哪些Domain

has-response-header
has-response-header:Content-Type

以Reponse 的Header 来过滤Request。

is
is:running– WebSocketRequest
is:from-cache–来自快取的Response，包括ServiceWorker、Memory cache、Disk cache，在Network log的Size栏位会显示实际传输的网路流量，如果是来自Cache也会显示对应的类型，Memory cache相对Disk cahce效能更好，不过关闭浏览器后会被清除。
is:service-worker-initiated – 从ServiceWorker 发出的Request
is:service-worker-intercepted– 被ServiceWorker 拦截的Request。在ServiceWorker 中可以用JavaScript 实作不同的快取机制，例如将重要的档案建立快取，每次都先以快取回应并在背景更新资源，下次请求才能取得新版本。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request);
  );
});

在ServiceWorker 中拦截Fetch 事件

larger-than
larger-than:520、larger-than:8k

单位为bytes，显示网路实际传输量大于该数字的Request，因此不会显示被Cache 的资源。

method
method:GET

以GET、POST等Method过滤请求。

mime-type
mime-type:image/jpeg

过滤Response的Content-TypeHeader，如text/html、image/jpeg等等。

mixed-content
mixed-content:all、mixed-content:displayed

以HTTPS 载入HTML 后，后续载入其他HTTP 资源就称为Mixed content，其又分为两种：

Passive mixed content –无法主动攻击被影响的使用者，但内容可能被修改，如img、audio、video。
Active mixed content –在大部分的浏览器中会直接被阻挡，能做到在浏览器中执行任意JavaScript这种危险的攻击，如script、link、iframe、XHR/Fetch。

在这里插入图片描述

当网站载入Passive mixed content但还是显示出来时就会出现警告，看看更多关于Mixed content的资讯。

scheme
scheme:http、scheme:https

以Protocol过滤Request，其他如chrome-extension、data等等都可以使用。

status-code
status-code:302

以Response 的Status code 来过滤。

Cookie 系列
set-cookie-domain、set-cookie-name、cookie-path、cookie-value

由于Cookie header 可能有很多个组，很难直接用肉眼搜寻，善用Cookie 系列Property 就能快速过滤Request，例如：

set-cookie-domain:.google.com–当Response的Set-CookieHeader的Domain属性是.google.com。
-cookie-value:hello–当Request的CookieHeader值不是hello。

Hide data URLs
可以开关，效果同-scheme:data。
在这里插入图片描述
By time
在Overview 图上可以用拖拉来Filter 特定的时间区间，只留下起始时间在范围内的Request。
在这里插入图片描述
Search
Network面板上方有一个放大镜图示，点击图示或是按Command+F都会开启左侧的搜寻面板，可以在Search输入Regex pattern或字串来搜寻Request。

相较Filter 为主动利用Type、Property 等等来过滤Request，Search 则较为被动的用关键字从Header key、Response body、URL 来进行比对。
在这里插入图片描述
点击找到的Request，该Request 会显示在右方，并切换到关键字所在的分页。但有时候会有比对到图片内容等等情况，此时在Response 分页就无法显示。

小结
熟悉了Filter 和Search 的用法，下一篇文章就要开始进行Network log 的分析.

相关文章