What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?

Question

In Google Chrome's developer tools, when I select an element, I see ==$0 next to the selected element. What does that mean?

It's the selected DOM Node id. try to select any node and write `$0` in the console and see what comes up ;) — dlock, May 03 '16 at 08:57
It's very confusing. It looks like someone wrote some javascript that they forgot to put in a script tag. I spent a good ten minutes trying to figure out where I had messed up in my code... — Kip, May 06 '16 at 03:43
check following https://developer.chrome.com/devtools/docs/commandline-api#0-4 — Mukesh, Jun 03 '16 at 09:30
I think that only the different background color in the line clicked should be enough... I see no need of adding == $0 to the html source... Bad idea. Chrome doind Chrome-ish stuff. — Sergio Abreu, Aug 20 '16 at 18:16
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4 — Pacerier, Jun 15 '17 at 09:06

score 333 · Accepted Answer · edited Aug 17 '16 at 15:08

333

It's the last selected DOM node index. Chrome assigns an index to each DOM node you select. So $0 will always point to the last node you selected, while $1 will point to the node you selected before that. Think of it like a stack of most recently selected nodes.

As an example, consider the following

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

Now you opened the devtools console and selected #sunday, #monday and #tuesday in the mentioned order, you will get ids like:

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

Note: It Might be useful to know that the node is selectable in your scripts (or console), for example one popular use for this is angular element selector, so you can simply pick your node, and run this:

angular.element($0).scope()

Voila you got access to node scope via console.

edited Aug 17 '16 at 15:08

ProllyGeek

15,517
9
53
72

answered May 03 '16 at 09:00

dlock

9,447
9
47
67

12

What is the use/benefit of this? – joe_young Jul 09 '16 at 19:56
7

I believe it can be helpful in debugging. The ability to access the inspected element using a simple selector can help in many situations during debugging. – dlock Jul 12 '16 at 22:10
12

So what good is always showing `== $0` in the UI? Anyone who knows about `$0` will already know which element it is, and it's meaningless to anyone who doesn't. – BlueRaja - Danny Pflughoeft Sep 16 '16 at 15:58
Isn't this harmful when used in production environment? Especially in Angular, you can reach an item scope within seconds.. – Luca De Nardi Oct 19 '16 at 12:40
9

@joe_young, I think the benefit is being able to quickly access elements in the console when tweaking things. Here's a video I put together demonstrating it! https://youtu.be/AKLdx8z6aDk – RoccoB Mar 24 '17 at 07:11
Useful information thanks I have one doubt, What is that meaning for "$" why using dollar instead of using some other symbol – Vijaykarthik Oct 06 '17 at 10:00
1

@LucaDeNardi Yes, it is harmful in production and every Angular developer adds this line: - $compileProvider.debugInfoEnabled(false); in their App's config, for a performance boost. However you can easily run angular.reloadWithDebugInfo(); in Console to debug when required. – Varun Sharma Feb 01 '18 at 06:48
2

FYI: $0 doesn't work at runtime: `setTimeout(() => console.log($0), 0); // $0 is not defined` Example: [![Chrome console](https://i.stack.imgur.com/gOYfm.png)](https://i.stack.imgur.com/gOYfm.png) – Osoian Marcel Jun 02 '17 at 11:11
Did you know equivalent of `angular.element($0).scope()` in Angular (v2+)? – Pardeep Jain Apr 26 '20 at 09:44
Had no idea. This is going to be really helpful for me – PJM Design Oct 01 '21 at 18:54
@OsoianMarcel at runtime the user selection of any node didn't occur yet (so nothing was yet stored in the array containing values of $0, $1, $2 and so on). It's the same as body onload happening long before any element onclick (by a human). – Eve Apr 17 '22 at 20:02
@Vijaykarthik - Of the easily typed symbols for an international spread of keyboards only $ and _ are allowed in javascript symbols. A variable can not start with a digit so the symbol must be used as a prefix. Working within those constraints, $n is a very common notation used in shells and scripting languages for passing inherently assigned arrays like arguments so it is a "natural feeling" notation for many coders. – Evan Edwards Jun 21 '22 at 21:14

score 62 · Answer 2 · answered May 03 '16 at 09:01

62

$0 returns the most recently selected element or JavaScript object, $1 returns the second most recently selected one, and so on.

Refer : Command Line API Reference

answered May 03 '16 at 09:01

Ani Menon

27,209
16
105
126

New link is at https://developer.chrome.com/blog/the-currently-selected-dom-node/ – Jespertheend Feb 23 '23 at 22:11

score 30 · Answer 3 · answered Jan 10 '17 at 10:51

The other answers here clearly explained what does it mean.I like to explain its use.

You can select an element in the elements tab and switch to console tab in chrome. Just type $0 or $1 or whatever number and press enter and the element will be displayed in the console for your use.

score 26 · Answer 4 · edited Apr 23 '22 at 13:37

This is Chrome's hint to tell you that if you type $0 on the console, it will be equivalent to that specific element.

Internally, Chrome maintains a stack, where $0 is the selected element, $1 is the element that was last selected, $2 would be the one that was selected before $1 and so on.

Here are some of its applications:

Accessing DOM elements from console: $0
Accessing their ancestor from console: $0.parentElement
Updating their properties from console: $1.classList.add(...)
Adding / updating elements' style from console: $0.style.backgroundColor="aqua"
Triggering JS events from console: $0.click()
And doing a lot more complex stuffs, like: $0.appendChild(document.createElement("div"))

Watch all of this in action:

Backing statement:

Yes, I agree there are better ways to perform these actions, but this feature can come out handy in certain intricate scenarios, like when a DOM element needs to be clicked but it is not possible to do so from the UI because it is covered by other elements or, for some reason, is not visible on UI at that moment.

score 5 · Answer 5 · answered Jul 21 '18 at 17:05

I will say It 's just shorthand syntax for get reference of html element during debugging time , normaly these kind of task will perform by these method

document.getElementById , document.getElementsByClassName , document.querySelector

so clicking on an html element and getting a reference variable ($0) in console is a huge time saving during the day

What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?

5 Answers5

This is Chrome's hint to tell you that if you type $0 on the console, it will be equivalent to that specific element.

Watch all of this in action:

Backing statement:

Linked

Related