几个常见的Chrome调试技巧,你都用过吗

文章介绍了Chrome浏览器的一些高效调试技巧,包括拖动DOM元素改变位置、右键删除或隐藏元素、在控制台使用$0引用选中元素、通过CSS选择器查找元素等,旨在提升前端开发者的工作效率。
alt

1. 拖动 dom 元素

选中一个 dom 元素,通过拖动就可以改变元素的位置。如下图: alt

2. 选中 dom 元素右键删除元素

选中一个 dom 元素右键菜单会有很多功能选项,常用的有隐藏、删除元素等。如下图: alt

3. 在控制台引用选中元素 $0

使用$0 可以在控制台引用选中元素,如下图: alt

4. $_引用上一次的结果

使用$_可以在控制台引用上一次结果,如下图: alt

5. ctrl+点击样式 会跳转到该样式代码的源文件

alt

6. saveAs 保存修改后的样式源文件

alt 保存后的样式文件打开,如下: alt

7. 根据 css 选择器查找元素 ctrl + f

ctrl + f 会弹出搜索框,我们可以根据 css 选择器、关键字等查找某个元素。如下图: alt

8. shift + enter 控制面板换行

控制面板中使用 shift + enter 可以换行,这一点在书写函数的时候比较实用。如下图: alt

9. ctrl + p 查找源文件

alt

「参考资料:」 哔哩哔哩-12 个最好用的 Chrome 浏览器调试技巧

本文由 mdnice 多平台发布

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值