网络监控(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给出的官方文档

avatar
  Subscribe  
提醒