chrome调试秘籍，让你的开发速度飞起来

Filter过滤

过滤器最简单的用法当然是直接输入过滤的字符，但这远远不够🤗。除了直接输入，我们还希望能排除不需要看到的请求、能多条件过滤、能根据指定的列过滤。输入的字符默认根据name属性搜索。具体方法如下：

1. 排除过滤（反向搜索）

在要搜索的字符前加-value，表示反向搜索，如下图，过滤出name中不含png的请求：

2. 多条件搜索

每个搜索间用空格斜杆空格隔开,如图排除gif并过滤出有@字符的请求：

3. 使用正则匹配

直接输入正则表达式，匹配想要的结果。
结合反向搜索（正则表达式前加-，如：-/.../）可以排除满足正则表达式的请求。
此方式搜索，功能非常强大，能满足大部分搜索场景

4. 指定列搜索 或 特性搜索

搜索出大于15KB的资源，如图：

其它的一些属性或特性就不一一示例了，大家可以去自行尝试：

5. Console等其它过滤框同样适用以上的搜索方式

debugger断点

1. 条件断点

满足某条件时，断点才会生效
使用：在行号处点击右键再选择条件断点，再刷新页面执行并触发条件时断点。

2. 事件断点

在处理事件相关的bug时非常有用，可以在页面触发指定事件时断点，如图：

3. Dom节点断点

当节点发生变化时（新增、编辑、删除）断点，并且会定位到修改DOM的那一行

说明：
1.subtree modifications 当前DOM子节点有任何变化时触发断点
2. attribute modifications 当前DOM本身属性有任何变化时触发断点
3. node removeal 当前DOM节点被移除时触发断点

4. 异常断点

在开发过程中一定会用到到断点，能帮助我们自动定位到异常问题，及时修复。

5. 其它断点

除此之外，还有XHR请求断点、异常断点、vscode编辑器中的断点、sources面板上直接修改代码（spa页面需map映射到源代码）、代码片段调试等。后面有时间再继续完善。

调试小技巧

1. $_表示获取控制台的上一次执行结果（引用上一次的结果）