The Command Line API contains a collection of convenience functions for performing common tasks: selecting and inspecting DOM elements, displaying data in readable format, stopping and starting the profiler, and monitoring DOM events.
Note: This API is only available from within the console itself. You cannot access the Command Line API from scripts on the page.
$_$_ returns the value of the most recently evaluated expression.
In the following example, a simple expression (2 + 2) is evaluated. The $_ property is then evaluated, which contains the same value:
In the next example, the evaluated expression initially contains an array of names. Evaluating $_.length to find the length of the array, the value stored in $_ changes to become the latest evaluated expression, 4:
The $0, $1, $2, $3 and $4 commands work as a historical reference to the last five DOM elements inspected within the Elements panel or the last five JavaScript heap objects selected in the Profiles panel. $0 returns the most recently selected element or JavaScript object, $1 returns the second most recently selected one, and so on.
In the following example, an element with the class medium is selected in the Elements panel. In the Console drawer, $0 has been evaluated and displays the same element:
The image below shows a different element selected in the same page. The $0 now refers to newly selected element, while $1 returns the previously selected one:
$(selector) returns the reference to the first DOM element with the specified CSS selector. This function is an alias for the document.querySelector() function.
The following example returns a reference to the first <img> element in the document:
Right-click on the returned result and select ‘Reveal in Elements Panel‘ to find it in the DOM, or ‘Scroll in to View‘ to show it on the page.
The following example returns a reference to the currently selected element and displays its src property:
Note: If you are using a library such as jQuery that uses $, this functionality will be overwritten, and $will correspond to that library‘s implementation.
$$(selector)$$(selector) returns an array of elements that match the given CSS selector. This command is equivalent to calling document.querySelectorAll().
The following example uses $$() to create an array of all <img> elements in the current document and displays the value of each element‘s src property:
var images = $$(‘img‘);
for (each in images) {
console.log(images[each].src);
}
Note: Press Shift + Enter in the console to start a new line without executing the script.
$x(path)$x(path) returns an array of DOM elements that match the given XPath expression.
For example, the following returns all the <p> elements on the page:
$x("//p")