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. $_表示获取控制台的上一次执行结果（引用上一次的结果）
   在了解这个以前都是复制粘贴上一次的执行结果，有了这个之后还是能提高些调试效率。
   $(dom)获取第一个dom，相当于document.querySelector
$$(dom)获取所有dom(数组形式)，相当于document.querySelectorAll
2. 使用$i直接在控制台安装npm包
   step1: 安装Console Importer插件 step2: 在控制台使用命令$i('name')安装npm包，如$i('dayjs')
   在以前都要依赖项目环境来使用，有了这个就可以完全脱离项目使用npm包。
3. 重新发起请求的方式
   在和后台联调的时候，后台经常会需要前端在点一下发送请求来debugger问题。其实大可不必，后台就能自己重发请求。

• 方式一：右键选择Replay XHR（重放XHR请求）
• 方式二：右键XHR请求， 选择 Copy as fetch(可以修改参数后再执行)，然后直接在控制台执行即可

1. 一键展开所有DOM 按住opt键 + click（需要展开的最外层元素）

最后

磨刀不误砍柴工，如果能熟练掌握Chrome调试技术，一定能让我们的工作效率大幅提升。如果觉得有帮助，不妨点赞、关注支持一下，后续会继续完善调试断点的相关知识点（NodeJs断点、vscode内使用断点、sources面板上修改并同步本地代码进行调试）。如文章有不足之处、疑问或建议，希望能在下方👇🏻 留言，非常感谢。

 总结给大家推荐一个实用面试题库

 1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库