Get the selected element in the console
Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
Get the selected element in the console
If you selected an element in the Elements panel (in Chrome, Safari, Polypane or Edge) or the Inspector panel (in Firefox), you can refer to it in the console using $0 .
This shortcut will return the DOM node instance, which you can then use to do things like getting computed styles, or check DOM properties, etc.
In Chrome, Polypane and Edge, the last 4 previously selected elements are additionally available as $1 , $2 , $3 and $4 . Learn more here.
See also
- Get the recently selected DOM nodes in the console
- Fix low color contrast issues
- Monitor all events dispatched on an element
- Copy an object from the console
Last edit: 6/17/2021 — Edit page
Have ideas for other tips? We’d love you to submit them on our GitHub repository! ♥
== $0: A Nice Little Chrome Developer Tools Console Trick
If you’ve worked much in the Chrome developer tools console, you’ve probably use document.querySelector , document.getElementbyId , or something like it, to select DOM elements in order to do things to or with those elements. For instance, I could grab the body of the current page in the console like so:
If I set this equal to a variable, I could then operate on it, either by querying it about its properties or, say, removing it from the DOM completely.
Being able to do this comes in quite handy when experimenting, testing, and debugging your Javascript.
If you’ve worked much in the Chrome developer tools console, you probably know this. You may not know that the console, or Google’s Command Line API, has a number of shortcuts, or “convenience functions”, that make grabbing and operating on DOM elements event easier.
In cases such as the above, the Chrome Developer Tools console has a nifty shortcut that allows you to select elements from the DOM without using document.querySelector , document.getElementbyId , or similar commands. In the Elements panel of Chrome Developer Tools, you can click on a DOM element, when you click on a DOM element, “== $0” appears after it.
When you click on an element in the Elements panel, $0 becomes a variable that you can use in the console to refer to that element. So, I can perform the same actions I did above, just by operating on $0 .
$0 has friends: $1 , $2 , $3 and $4 . Each, including $0 , is a zero-indexed historical reference to the last five DOM elements inspected within the Elements panel. So, you can not only easily grab, query, and manipulate the currently selected DOM element, but you can do the same with any of the five most recently selected elements.
These are perhaps the simplest convenience functions provided by the Command Line API, but there are others. Check out Google’s documentation here.
If you use the React Developer Tools Extension, you can select React elements in much the same way one selects DOM elements in the Elements panel.
You can then go to the console and query or manipulate these elements by using $r .
$0 in Chrome Dev Tools
The Chrome developer tools stores your recent selection history in a special variable accessible in the console. Your most recent selection (in the elements inspector, or on the page with ‘Inspect Element’) is stored in $0 . Your second-most-recent is $1 , and so on, up through $4 .
Don’t be fooled by the $ , this trick doesn’t rely on jQuery or Zepto at all. Here’s how to prove it:
Open a new tab and paste this in the address bar:
This creates a blank webpage with nothing more than a head and body tag inside an html tag. You won’t see anything, but right click anywhere in the window and select ‘Inspect Element’. Now go to the Console (click the tab, or pull it up quickly by hitting esc ) and type in $0 . You should see that it returned <body></body> . No jQuery, no Zepto. Just magic.
Update: April 2016
Chrome is now making this even more clear, and less of a hidden trick. In the current Chrome Canary builds, you’ll see a comment ( == $0 ) next to the selected element in the Elements inspector hinting at the global available to you in the Console.
What it doesn’t hint at is the trailing $1–$4 globals which are also available. Check out the full details here in the Chrome DevTools API Reference.
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?
5 Answers 5
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
Now you opened the devtools console and selected #sunday , #monday and #tuesday in the mentioned order, you will get ids like:
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: