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

简介: 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、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
使用vue快速开发一个带弹窗的Chrome插件
使用vue快速开发一个带弹窗的Chrome插件
64 0
使用vue快速开发一个带弹窗的Chrome插件
|
6月前
|
Web App开发 开发者
利用chrome控制台调试post请求
利用chrome控制台调试post请求
140 0
|
3月前
|
Web App开发 前端开发 JavaScript
超实用的Chrome DevTools调试技巧
超实用的Chrome DevTools调试技巧
|
7月前
|
Web App开发 存储 前端开发
使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
38 0
|
1月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
25 0
|
6月前
|
Web App开发 Android开发 开发者
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
54 0
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
|
3月前
|
Web App开发 JSON 前端开发
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
38 0
|
7月前
|
Web App开发 前端开发 JavaScript
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码
教会你如何高效使用Chrome调试与检测你的CSS代码
150 0
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码
|
7月前
|
Web App开发
谷歌关闭跨域限制.(生成一个开发浏览器),Chrome关闭跨域
谷歌关闭跨域限制.(生成一个开发浏览器),Chrome关闭跨域
391 0
|
8月前
|
Web App开发 JavaScript 前端开发
VUE系列——Chrome安装Vue调试插件
VUE系列——Chrome安装Vue调试插件