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、前端面试题库 (面试必备) 推荐:★★★★★
地址:前端面试题库
chrome调试秘籍,让你的开发速度飞起来的更多相关文章
- 强烈IDEA这些插件,让你的开发速度飞起来!
大家好,我是大彬~ 俗话说:工欲善其事必先利其器.今天给大家介绍几款我自己经常用的 IDEA 插件,很强大,助力大家开发. 插件安装 以IDEA为例,进入settings->Plugins-&g ...
- 强烈推荐 16 款 IDEA 插件,让你的开发速度飞起来!
当前使用的IDEA版本是2020.1.随着IDEA版本的升级,有些插件不再支持,而有些插件变成了收费插件,这些插件将不再推荐.以下列举的,都是亲测可以在2020.1版本的IDEA中使用的插件. 1 g ...
- 前端开发神一样的工具chrome调试技巧
前端开发神一样的工具chrome调试技巧 文章来自 Colin-UED // 与您分享前端开发知识 主页 Javascript HTML CSS NodeJs User Experience FE ...
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...
- Chrome调试手机页面
新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chro ...
- 利用chrome调试JavaScript代码
看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...
- 如何加速golang写业务的开发速度
如何加速golang写业务的开发速度 不要忌讳panic golang写业务代码经常会被吐槽,写业务太慢了,其中最大的吐槽点就是,处理各种error太麻烦了.一个项目中,会有30%或者更多的是在处理e ...
- 调试 - Chrome调试
调试 - Chrome调试 打开开发人员工具 Ctrl+Shift+i可以打开开发人员工具. 功能面板 NetWork功能面板 在当前页面打开调试工具,刷新页面后点击NetWork可以查看当前页面的H ...
- chrome调试技巧和插件介绍
14 个你可能不知道的 JavaScript 调试技巧 五种前端开发必备的调试技术 日志的艺术 吐血推荐珍藏的Chrome插件 吐血推荐珍藏的 Chrome 插件(二)
- atitit.为什么 java开发要比php开发速度慢??
atitit.为什么 java开发要比php开发速度慢?? 1. 界面开发方面vs php 1 2. 架构繁琐 1 3. 环境配置复杂 1 4. 类库jar包冲突(严重) 1 5. 配置文件热部署的缺 ...
随机推荐
- [C++Primer] 第二章 变量和基本类型
第二章 变量和基本类型 引用 引用定义的时候必须初始化. 引用初始化之后无法重新绑定到其它对象上. 引用本身并不是对象,所以没有指向引用的引用(不管如何多层引用,引用的还是源对象) 下面用一个简单的例 ...
- (10)go-micro微服务发送邮件
目录 一 获取QQ邮箱Pass 二 安装gomail 三 初始化发送邮件 四 发送注册邮件 五 发送重置密码邮件 六 最后 一 获取QQ邮箱Pass 1.登录QQ邮箱 2.点击设置,点击账户,下拉找到 ...
- 上传图片文件并立即显示到页面使用 javascript实现鼠标拖动画矩形框以及实现固定区域内随意拖动
首先,你要设计好鼠标事件处理方法,主要是鼠标左键点击,左键释放,还有鼠标移动方法其次,要了解容什么方式,画一个矩形,设计一个方法:DrawRectgle(左上角,右下角),并且要确定当调用这个方法时, ...
- vscode配置rust开发
需要安装的插件 设置为idea开发的快捷键 设置code fmt为rust
- Java 进阶P-5.1+P-5.2
城堡游戏 一.城堡游戏介绍:1.这个程序的任务是通过玩家的输入的方向(纯文字)在虚构的城堡内移动(以纯文字作为移动后的返回结果).2.这个程序接受help.bye.go south.go north. ...
- Longbow.Tasks
Longbow.Tasks 概述 大体分为了Scheduler(调度任务),Storage(持久化),Trigger(触发器),Task(任务)和逻辑模块,大体流程为通过逻辑代码进行实例化相关类,根据 ...
- .Net 7 高端玩法,自定义一个CLR运行时
前言: 曾几何时,一直想自己定制一个CLR运行时玩玩.满足下技术控的虚荣心,本篇带你一步一步打造一个属于自己的.Net 7运行时. 概括 假设你的电脑已经安装了.Net,并且运行正常.在进行自定义运行 ...
- Feign远程调用 (介绍与使用)
Feign远程调用 Feign是代替RestTemplate进行远程调用的组件,避免了RestTemplate手写复杂的url容易出错的问题,并提高代码的可读性 使用Feign步骤 1)引入依赖 哪个 ...
- Dijkstra求最短路 I(朴素算法)
这道题目又是一个新算法,名叫Dijkstra 主要思路是:输入+dist和vis初始化(都初始化为0x3f)+输入g(邻接矩阵)+Dijkstra函数 Dijkstra函数:先将dist[ ...
- spring cloud alibaba sentinel 运行及简单使用
1.官网 英文:https://github.com/alibaba/Sentinel 中文:https://github.com/alibaba/Sentinel/wiki/%E4%BB%8B%E7 ...