In Google Chrome's developer tools, when I select an element, I see ==$0
next to the selected element. What does that mean?
$ 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.
$0 means it's the most recent selected DOM node index. with $1 being 2nd most recent and so on.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With