chrome调试秘籍，让你的开发速度飞起来
前言
熟练使用调试工具，势必能大幅提高我们的开发效率，达到事半功倍的效果。废话不多说，直接进入主题。
Filter过滤
过滤器最简单的用法当然是直接输入过滤的字符，但这远远不够🤗。除了直接输入，我们还希望能排除不需要看到的请求、能多条件过滤、能根据指定的列过滤。输入的字符默认根据name属性搜索。
具体方法如下：
1. 排除过滤（反向搜索）
在要搜索的字符前加-value，表示反向搜索，如下图，过滤出name中不含png的请求：
2. 多条件搜索
每个搜索间用空格斜杆空格隔开,如图排除gif并过滤出有@字符的请求：
3. 使用正则匹配
直接输入正则表达式，匹配想要的结果。
结合反向搜索（正则表达式前加-，如：-/.../）可以排除满足正则表达式的请求。
此方式搜索，功能非常强大，能满足大部分搜索场景
4. 指定列搜索 或 特性搜索
搜索出大于15KB的资源，如图：
其它的一些属性或特性就不一一示例了，大家可以去自行尝试：
5. Console等其它过滤框同样适用以上的搜索方式
debugger断点
1. 条件断点
满足某条件时，断点才会生效
使用：在行号处点击右键再选择条件断点，再刷新页面执行并触发条件时断点。
2. 事件断点
在处理事件相关的bug时非常有用，可以在页面触发指定事件时断点，如图：
3. Dom节点断点
当节点发生变化时（新增、编辑、删除）断点，并且会定位到修改DOM的那一行
说明：
-
subtree modifications当前DOM子节点有任何变化时触发断点 -
attribute modifications当前DOM本身属性有任何变化时触发断点 -
node removeal当前DOM节点被移除时触发断点
4. 异常断点
在开发过程中一定会用到到断点，能帮助我们自动定位到异常问题，及时修复。
5. 其它断点
除此之外，还有XHR请求断点、异常断点、vscode编辑器中的断点、sources面板上直接修改代码（spa页面需map映射到源代码）、代码片段调试等。后面有时间再继续完善。
调试小技巧
-
$_表示获取控制台的上一次执行结果（引用上一次的结果）在了解这个以前都是复制粘贴上一次的执行结果，有了这个之后还是能提高些调试效率。
$(dom)获取第一个dom，相当于document.querySelector$$(dom)获取所有dom(数组形式)，相当于document.querySelectorAll -
使用
$i直接在控制台安装npm包step1: 安装Console Importer插件
step2: 在控制台使用命令
$i('name')安装npm包，如$i(‘dayjs’)在以前都要依赖项目环境来使用，有了这个就可以完全脱离项目使用npm包。
-
重新发起请求的方式
在和后台联调的时候，后台经常会需要前端在点一下发送请求来debugger问题。其实大可不必，后台就能自己重发请求。
-
方式一：右键选择Replay XHR（重放XHR请求） -
方式二：右键XHR请求， 选择 Copy as fetch(可以修改参数后再执行)，然后直接在控制台执行即可 -
一键展开所有DOM 按住opt键 + click（需要展开的最外层元素）
文章出自：https://juejin.cn/post/7138217104678846494
作者：tager
原文始发于微信公众号（前端24）：chrome调试秘籍，让你的开发速度飞起来
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/216801.html
