Chrome for Developer 第四章(Chrome 开发者工具中的 控制台访问节点)

调出控制台

在元素面板中,按快捷键Esc快速调出控制台
image.png

使用 $0 引用当前选定的节点

在元素面板中选中任意DOM元素时,这个元素就会被赋给一个名为 $0 的变量,你可以在控制台中直接引用它。这是一个快速查看或者操作当前选中元素属性的方法。比如,你可以通过 $0.style.color = ‘red’ 快速改变元素的文字颜色。
动画.gif

存储为全局变量

如果需要反复引用同一个DOM元素,可以通过在元素面板中右键点击该元素并选择“存储为全局变量”来保存它。这样,浏览器会自动为你创建一个名为 temp1、temp2 等的全局变量。这对于需要在控制台中多次操作同一个元素的情况非常有用。
动画.gif

复制 JS 路径

需要在脚本或自动化测试中精确定位元素时特别有用。右键点击你想要操作的元素,选择“复制”然后是“复制 JS 路径”,这会将一个 document.querySelector() 表达式复制到你的剪贴板,该表达式是一个精确到该元素的选择器。你可以直接在控制台中粘贴并执行它,或者在你的JavaScript代码中使用它。
动画.gif

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

辰火流光

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值