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