

The following example returns all the elements that contain elements: $x ( "//p" ) $x(path) returns an array of DOM elements that match the given XPath expression.įor example, the following returns all the elements on the page: $x ( "//p" ) Note: Press Shift + Enter in the console to start a new line without executing the script. querySelector ( '.devsite-header-background' ) ) This modified version of the previous example uses $$() to create an array of all elements that appear in the current document after the selected Node: let images = $$ ( 'img', document. The default value of this parameter is document. This function also supports a second parameter, startNode, that specifies an element or Node from which to search for elements. The following example uses $$() to create an array of all elements in the current document and displays the value of each element's src property: let images = $$ ( 'img' ) This command is equivalent to calling om( document.querySelectorAll()). $$(selector) returns an array of elements that match the given CSS selector. 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. The following example returns a reference to the first img element that is a descendant of devsite-header-background, and displays its src property: This function also supports a second parameter, startNode, that specifies an 'element' or Node from which to search for elements. The following example returns a reference to the currently selected element and displays its src property: 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 first element in the document: When called with one argument, this function is a shortcut for the document.querySelector() function. $(selector) returns the reference to the first DOM element with the specified CSS selector. The $0 now refers to newly selected element, while $1 returns the previously selected one: # $(selector ) The image below shows a different element selected in the same page. In the Console drawer, $0 has been evaluated and displays the same element: In the following example, an img element is selected in the Elements panel.

$0 returns the most recently selected element or JavaScript object, $1 returns the second most recently selected one, and so on. 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. Evaluating $_.length to find the length of the array, the value stored in $_ changes to become the latest evaluated expression, 4: # $0 - $4 In the next example, the evaluated expression initially contains an array of names. The $_ property is then evaluated, which contains the same value: In the following example, a simple expression ( 2 + 2) is evaluated. $_ returns the value of the most recently evaluated expression. Looking for console.log(), console.error(), and the rest of the console.* functions? See Console API Reference. They won't work if you try to call them in your scripts. const options = )Ĭonsole.These functions only work when you call them from the Chrome DevTools Console. Using modern async/await javascript sintax you could do it as follow below.
