在Chrome开发人员工具中== $ 0(两倍等于零美元)是什么意思?


310

在Google Chrome浏览器的开发人员工具中,当我选择一个元素时,==$0会在所选元素旁边看到 。这意味着什么?

屏幕截图


28
这是选定的DOM节点ID。尝试选择任何节点并$0在控制台中进行写入,然后看看会发生什么;)
死锁

33
这非常令人困惑。好像有人写了一些他们忘记放在script标签中的javascript。我花了整整十分钟的时间来弄清楚我的代码在哪里搞砸了……
Kip


2
我认为,仅需在单击的行中使用不同的背景色就足够了……我认为无需在HTML源代码中添加== $ 0……不好的主意。Chrome浏览器会出现Chrome类的东西。
塞尔吉奥·阿布雷乌

Answers:


286

这是最后选择的DOM节点索引。Chrome会为您选择的每个DOM节点分配一个索引。因此,$0将始终指向您选择的最后一个节点,而$1将指向之前选择的最后一个节点。可以将其视为一堆最近选择的节点。

例如,请考虑以下内容

<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>

现在你打开devtools控制台和选择#sunday#monday#tuesday以该顺序排列,您将获得ID,如:

$0 -> <div id="tuesday"></div> 
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>

注意: 知道节点在脚本(或控制台)中是可选的可能很有用,例如,一种流行的用法是角度元素选择器,因此您可以简单地选择节点并运行它:

angular.element($0).scope()

瞧,您可以通过控制台访问节点作用域。


9
这有什么用途/好处?
joe_young '16

6
我相信这对调试很有帮助。在调试期间的许多情况下,使用简单的选择器访问被检查元素的能力会有所帮助。
僵局

6
所以总是显示出什么好 == $0在用户界面中什么呢?任何知道的人$0都已经知道它是哪个元素,对任何不知道的人都没有意义。
BlueRaja-Danny Pflughoeft

6
@joe_young,我认为这样做的好处是可以在调整内容时快速访问控制台中的元素。这是我放在一起演示的视频!youtu.be/AKLdx8z6aDk
RoccoB

1
@LucaDeNardi是的,它对生产有害,每个Angular开发人员都添加以下行:-$ compileProvider.debugInfoEnabled(false); 在其应用程序的配置中,以提高性能。但是,您可以轻松运行angular.reloadWithDebugInfo();。在控制台中在需要时进行调试。
Varun Sharma


26

这里的其他答案清楚地解释了它的含义。我想解释它的用法。

您可以在elements标签中选择一个元素,然后切换到consoleChrome 中的标签。只需键入$0 or $1或输入任何数字,然后按Enter,该元素将显示在控制台中供您使用。

chrome开发工具的屏幕截图


13

这是Chrome的提示,它告诉您,如果您在控制台上键入$ 0,它将等效于该特定元素。

Chrome内部维护一个堆栈,其中$ 0是选定的元素,$ 1是最后选择的元素,$ 2是在$ 1之前选择的元素,依此类推。

以下是其一些应用程序:

  • 从控制台访问DOM元素:$ 0
  • 从控制台访问其属性:$ 0.parentElement
  • 从控制台更新其属性:$ 1.classList.add(...)
  • 从控制台更新CSS元素:$ 0.styles.backgroundColor =“ aqua”
  • 从控制台触发CSS事件:$ 0.click()
  • 并且做很多更复杂的事情,例如:$ 0.appendChild(document.createElement(“ div”))

观看所有这些操作:

在此处输入图片说明

支持声明:

是的,我同意有更好的方法来执行这些操作,但是在某些复杂的情况下此功能可能会派上用场,例如当需要单击DOM元素但由于它包含在DOM中而无法从中单击时其他元素,或者由于某种原因,当时在UI上不可见。


2

我会说这只是在调试时获取html元素引用的简写语法,通常此类方法将通过这些方法执行

document.getElementById , document.getElementsByClassName , document.querySelector

因此,单击html元素并在控制台中获取参考变量($ 0)白天可节省大量时间

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.