Explore the state of any item on your page from the DevTools console using one of its evaluation capabilities.
- Evaluate an expression just by typing it.
- Select elements using one of the shortcuts.
- Access recently selected elements and objects using $0 - 4.
If there are multiple matches, ↑ and ↓ cycles through them. Pressing → selects the current suggestion. If there's a single suggestion, Tab selects it.
Use the following shortcuts to select elements:
|Shortcut & Description|
|$()||Returns the first element that matches the specified CSS selector. Shortcut for
|$$()||Returns an array of all the elements that match the specified CSS selector. Alias for
|$x()||Returns an array of elements that match the specified XPath.|
Examples of target selection:
$('code') // Returns the first code element in the document. $$('figure') // Returns an array of all figure elements in the document. $x('html/body/p') // Returns an array of all paragraphs in the document body.
as a parameter.
If you provide a DOM element,
the DevTools goes to the Elements panel and displays that element.
then it goes to the Profile panel.
When this code executes in your console on this page,
it grabs this figure and displays it on the Elements panel.
This takes advantage of the
to get the output of the last evaluated expression.
Access recently selected elements and objects
The console stores the last five used elements and objects in variables for easy access. Use $0 - 4, to access these elements from within the console. Remember computers begin counting from 0; this means the latest item is $0 and the oldest item is $4.