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

地址:前端面试题库

相关文章
|
1月前
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
116 2
|
1月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
248 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
3月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
66 11
|
3月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
805 1
|
3月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
305 8
|
4月前
|
Web App开发 前端开发 Java
通过设置 Chrome 解决开发调用跨域问题
通过设置 Chrome 解决开发调用跨域问题
1181 7
|
5月前
|
存储 Web App开发 JSON
【Chrome插件】如何在Chrome插件开发中处理复杂数据结构的存储?
在Chrome插件开发中,遇到问题:存储包含Map和数组的复杂数据结构到`chrome.storage.local`时,读取为空。原因在于`chrome.storage.local`只支持JSON序列化,而Map无法直接序列化。解决方案是使用`serializeMap`和`deserializeMap`方法将Map转换为数组进行存储和读取。更新的`saveMindData`和`getMindData`方法实现了数据的正确序列化和反序列化。
152 5
|
4月前
|
Web App开发 存储 监控
如何使用 Chrome DevTools 进行前端性能监控和调试?
如何使用 Chrome DevTools 进行前端性能监控和调试?
|
4月前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
4月前
|
Web App开发 JavaScript 开发者
谷歌浏览器chrome安装vue调试插件Vue-Devtools
谷歌浏览器chrome安装vue调试插件Vue-Devtools
267 0