Chrome开发者工具-Network,过滤
网络监控(network)面板是对于前对开发来说是非常常见的一个操作区了。
此处主要梳理下强大的筛选功能
按下点开筛选漏斗之后,可以配合Command键,对网络请求类型组合筛选。

重点说下这个Filter输入框
直接输入url进行筛选是基本操作了,不需要多解释。
有个特别的小技巧,输入-在这里可以表达非逻辑,也就是排除URL中包含后面内容的请求。如果要多虑多个关键字,可以这样:-/a|b|c/
另外支持特殊关键词筛选,如下:
domain
。仅显示来自指定域的资源。您可以使用通配符字符 (*
) 来包含多个域。 例如,*.com
将显示来自以.com
结尾的所有域名的资源。 DevTools 会使用它遇到的所有域填充自动填充下拉菜单。has-response-header
。显示包含指定 HTTP 响应标头的资源。 DevTools 会使用它遇到的所有响应标头填充自动填充下拉菜单。is
。使用is:running
可以查找WebSocket
资源。larger-than
。显示大于指定大小的资源(以字节为单位)。 将值设为1000
等同于设置为1k
。method
。显示通过指定 HTTP 方法类型检索的资源。 DevTools 会使用它遇到的所有 HTTP 方法填充下拉菜单。mime-type
。显示指定 MIME 类型的资源。DevTools 会使用它遇到的所有 MIME 类型填充下拉菜单。mixed-content
。显示所有混合内容资源 (mixed-content:all
),或者仅显示当前显示的资源 (mixed-content:displayed
)。scheme
。显示通过未保护 HTTP (scheme:http
) 或受保护 HTTPS (scheme:https
) 检索的资源。set-cookie-domain
。显示具有Set-Cookie
标头并带有与指定值匹配的Domain
属性的资源。 DevTools 会使用它遇到的所有 Cookie 域填充自动填充下拉菜单。set-cookie-name
。显示具有Set-Cookie
标头并且名称与指定值匹配的资源。 DevTools 会使用它遇到的所有 Cookie 名称填充自动填充下拉菜单。set-cookie-value
。显示具有Set-Cookie
标头并且值与指定值匹配的资源。 DevTools 会使用它遇到的所有 Cookie 值填充自动填充下拉菜单。status-code
。仅显示 HTTP 状态代码与指定代码匹配的资源。 DevTools 会使用它遇到的所有状态代码填充自动填充下拉菜单。
网络请求导出功能
可以在某个请求上右键选择复制为xxx,多种格式。

建议阅读Chrome给出的官方文档