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映射到源代码)、代码片段调试等。后面有时间再继续完善。
调试小技巧
$_
表示获取控制台的上一次执行结果(引用上一次的结果)
在了解这个以前都是复制粘贴上一次的执行结果,有了这个之后还是能提高些调试效率。$(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(需要展开的最外层元素)
最后
磨刀不误砍柴工,如果能熟练掌握Chrome调试技术,一定能让我们的工作效率大幅提升。如果觉得有帮助,不妨点赞、关注
支持一下,后续会继续完善调试断点的相关知识点(NodeJs断点、vscode内使用断点、sources面板上修改并同步本地代码进行调试)。如文章有不足之处、疑问或建议,希望能在下方 留言,非常感谢。
总结给大家推荐一个实用面试题库
1、前端面试题库 (面试必备) 推荐:★★★★★
地址:前端面试题库
最新文章
- Django模版语言 格式化显示 后台datatime()时间
- iOS 使用xib后获取view的frame出错的问题
- 简单好用的sshfs -- 通过ssh映射远程路径(转)
- HttpURL
- Web服务器(CassiniDev的裁减版)
- SQL server自定义函数实例
- UVA442 Matrix Chain Multiplication 矩阵运算量计算(栈的简单应用)
- Innodb buffer pool/redo log_buffer 相关
- 完美PNG半透明窗体解决方案
- liunx下NetworkManager导致网卡不能启动
- C# / MSSQL / WinForm / ASP.NET - SQLHelper中返回SqlDataReader数据
- linux视频学习3(shell和网络)
- Python+Requests接口测试教程(2):
- vue实现打印功能的两种方法
- Flink学习(二)Flink中的时间
- 关于DB Link
- # 2019-2020-3 《Java 程序设计》第三周总结
- 洛谷P1088 火星人【STL】【思维】
- 详说 Block Formatting Contexts (块级格式化上下文)
- JavaScript Array 对象常用方法
热门文章
- mysql 复制数据
- 网络流棋盘模型 | P3355 骑士共存问题 P4304 [TJOI2013]攻击装置
- VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动
- 关于v-deep有你想知道的一切
- 在spring boot3中使用native image
- java入门与进阶 P-3.2+P-3.3+P3.4
- 论文翻译:2022_2022_TEA-PSE 2.0:Sub-Band Network For Real-Time Personalized Speech Enhancement
- 【SW】利用3D打印机打印 PCB 钢网的方法
- Monkey 命令
- 【多线程】交替输出abc