Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

Screenshot

like image 423
oneNiceFriend Avatar asked May 03 '16 08:05

oneNiceFriend


People also ask

What is $$ in Chrome console?

$ is an alias for document. querySelector . In the same vein there is $$ which is an alias for document. querySelectorAll . It is defined in the Command line (console) api.

What is $0 HTML?

$0 means it's the most recent selected DOM node index. with $1 being 2nd most recent and so on.

How do I use Chrome Developer Tools code?

Focus your cursor somewhere inside of DevTools. Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu. Start typing Snippet , select Create new snippet, then press Enter to run the command.


1 Answers

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.

like image 87
deadlock Avatar answered Oct 01 '22 00:10

deadlock