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映射到源代码)、代码片段调试等。后面有时间再继续完善。
调试小技巧
$_
表示获取控制台的上一次执行结果(引用上一次的结果)