Console Utilities API Reference

The Console Utilities API contains a collection of convenience commands for performing common tasks: selecting and inspecting DOM elements, displaying data in readable format, stopping and starting the profiler, and monitoring DOM events.

Warning

The following commands only work in the Microsoft Edge DevTools Console. The commands do not work if run from your scripts.

Looking for console.log(), console.error(), and the rest of the console.* methods? See Console API Reference.

Recently Evaluated Expression

$_

Returns the value of the most recently evaluated expression.

In the following figure, a simple expression (2 + 2) is evaluated. The $_ property is then evaluated, which contains the same value.

$_ is the most recently evaluated expression

In the following figure, 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.

$_ changes when new commands are evaluated

Recently Selected Element Or JavaScript Object

$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 Memory panel.

$0
$1
$2
$3
$4

In the following figure, an img element is selected in the Elements panel. In the Console drawer, $0 has been evaluated and displays the same element.

The $0

In the following figure, the image shows a different element selected in the same page. The $0 now refers to the newly selected element, while $1 returns the previously selected one.

The $1

Query Selector

$(selector, [startNode])

Returns the reference to the first DOM element with the specified CSS selector. This method is an alias for the document.querySelector() method.

In the following figure, a reference to the first <img> element in the document is returned.

The $('img')

Hover on the returned result, open the contextual menu (right-click), and select Reveal in Elements Panel to find it in the DOM or Scroll in to View to show it on the page.

In the following figure, a reference to the currently selected element is returned and the src property is displayed.

The $('img').src

This method also supports a second parameter, startNode, that specifies an "element" or Node from which to search for elements. The default value of the parameter is document.

In the following figure, the first img element is found after the title--image and displays the src properly is returned.

The $('img', document.querySelector('title--image')).src

Note

If you are using a library such as jQuery that uses $, the functionality is overwritten, and $ corresponds to the implementation from that library.

Query Selector All

$$(selector, [startNode])

Returns an array of elements that match the specified CSS selector. This method is equivalent to calling the document.querySelectorAll() method.

In the following code sample and figure, use $$() to create an array of all <img> elements in the current document and display the value of the src property for each element.

var images = $$('img');
for (each in images) {
    console.log(images[each].src);
}

Using $$() to select all images in the document and display the sources

This method also supports a second parameter, startNode, that specifies an element or Node from which to search for elements. The default value of the parameter is document.

In the following code sample and figure, a modified version of the previous code sample and figure uses $$() to create an array of all <img> elements that appear in the current document after the selected Node.

var images = $$('img', document.querySelector(`title--image`));
for (each in images) {
   console.log(images[each].src);
}

Using $$() to select all images that appear after the specified <div> element in the document and display the sources

Note

Press Shift+Enter in the console to start a new line without running the script.

XPath

$x(path, [startNode])

Returns an array of DOM elements that match the specified XPath expression.

In the following code sample and figure, all of the <p> elements on the page are returned.

$x("//p")

Using an XPath selector

In the following code sample and figure, all of the <p> elements that contain <a> elements are returned.

$x("//p[a]")

Using a more complicated XPath selector

Similar to the other selector commands, $x(path) has an optional second parameter, startNode, that specifies an element or Node from which to search for elements.

Using an XPath selector with startNode

clear

clear()

Clears the console of the history.

clear()

copy

copy(object)

The copy(object) method copies a string representation of the specified object to the clipboard.

copy($0)

debug

debug(method)

Note

The Chromium issue #1050237 is tracking a bug with the debug() function. If you encounter the issue, try using breakpoints instead.

When you request the specified method, the debugger is invoked and breaks inside the method on the Sources panel allowing you to step through the code and debug it.

debug("debug");

Breaking inside a method with debug()

Use undebug(method) to stop breaking on the method, or use the UI to disable all breakpoints.

For more information on breakpoints, see Pause Your Code With Breakpoints.

dir

dir(object)

Displays an object-style listing of all of the properties for the specified object. This method is an alias for the console.dir() method.

Evaluate document.head in the Console to display the HTML between the <head> and </head> tags. In the following code sample and figure, an object-style listing is displayed after using console.dir() in the Console.

document.head;
dir(document.head);

Logging document.head with dir() method

For more information, see the console.dir() entry in the Console API.

dirxml

dirxml(object)

Prints an XML representation of the specified object, as seen in the Elements tab. This method is equivalent to the console.dirxml() method.

inspect

inspect(object/method)

Opens and selects the specified element or object in the appropriate panel: either the Elements panel for DOM elements or the Memory panel for JavaScript heap objects.

In the following code sample and figure, the document.body opens in the Elements panel.

inspect(document.body);

Inspecting an element with inspect()

When passing a method to inspect, the method opens the document in the Sources panel for you to inspect.

getEventListeners

getEventListeners(object)

Returns the event listeners registered on the specified object. The return value is an object that contains an array for each registered event type (such as click or keydown). The members of each array are objects that describe the listener registered for each type. In the following code sample figure, all of the event listeners registered on the document object are listed.

getEventListeners(document);

Output of using getEventListeners(document)

If more than one listener is registered on the specified object, then the array contains a member for each listener. In the following figure, there are two event listeners registered on the document element for the click event.

Multiple listeners

You may further expand each of the following objects to explore the properties.

Expanded view of listener object

keys

keys(object)

Returns an array containing the names of the properties belonging to the specified object. To get the associated values of the same properties, use values().

For example, suppose your application defined the following object.

var player1 = { "name":  "Ted", "level": 42 }

In the following code samples and figure, the result assumes player1 was defined in the global namespace (for simplicity) prior to typing keys(player1) and values(player1) in the console.

keys(player1)

values(player1)

The keys() and values() commands

monitor

monitor(method)

Logs a message to the console that indicates the method name along with the arguments that are passed to the method when it was called.

function sum(x, y) {
    return x + y;
}
monitor(sum);

The monitor() method

Use unmonitor(method) to cease monitoring.

monitorEvents

monitorEvents(object[, events])

When one of the specified events occurs on the specified object, the event object is logged to the console. You may specify a single event to monitor, an array of events, or one of the generic events types that are mapped to a predefined collection of events. See the following code sample and figure.

The following monitors all resize events on the window object.

monitorEvents(window, "resize");

Monitoring window resize events

The following defines an array to monitor both resize and scroll events on the window object.

monitorEvents(window, ["resize", "scroll"]);

You may also specify one of the available types of events, strings that map to predefined sets of events. The table below displays the available event types and the associated event mappings.

Event type Corresponding mapped events
mouse "click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "mousewheel"
key "keydown", "keypress", "keyup", "textInput"
touch "touchcancel", "touchend", "touchmove", "touchstart"
control "blur", "change", "focus", "reset", "resize", "scroll", "select", "submit", "zoom"

In the following code sample, the key event type corresponding to key events on an input text field are currently selected in the Elements panel.

monitorEvents($0, "key");

In the following figure the sample output after typing a character in the text field is displayed.

Monitoring key events

profile

profile([name])

Starts a JavaScript CPU profiling session with an optional name. The profileEnd() method completes the profile and displays the results in the Memory panel.

  1. Run the profile() method to start profiling.

    profile("My profile")
    
  2. Run the profileEnd() method to stop profiling and display the results in the Memory panel.

Profiles may also be nested. In the following code samples and figure the result is the same regardless of the order.

profile('A');
profile('B');
profileEnd('A');
profileEnd('B');

Note

Multiple CPU profiles may operate at the same time and you are not required to close-out each one in creation order.

profileEnd

profileEnd([name])

Completes a JavaScript CPU profiling session and displays the results in the Memory panel. You must be running the profile() method.

  1. Run the profile() method to start profiling.

  2. Run the profileEnd() method to stop profiling and display the results in the Memory panel.

    profileEnd("My profile")
    

Profiles may also be nested. In the following code sample and figure the result is the same regardless of the order.

profile('A');
profile('B');
profileEnd('A');
profileEnd('B');

The result appears as a Heap Snapshot in the Memory panel.

Grouped profiles

Note

Multiple CPU profiles may operate at the same time and you are not required to close-out each one in creation order.

queryObjects

queryObjects(Constructor)

Return an array of objects created with the specified constructor. The scope of queryObjects() is the currently-selected runtime context in the console.

queryObjects(promise)

Returns all Promises.

queryObjects(HTMLElement)

Returns all HTML elements.

queryObjects(functionName)

Returns all objects that were instantiated using new functionName().


table

table(data[, columns])

Logs object data with table formatting based upon the data object in with optional column headings. In the following code sample and figure, a list of names using a table in the console is displayed.

var names = {
    0:  {
        firstName:  "John",
        lastName:  "Smith"
    },
    1:  {
        firstName:  "Jane",
        lastName:  "Doe"
    }
};
table(names);

The result of the table() method

undebug

undebug(method)

Stops the debugging of the specified method so that when the method is called, the debugger is no longer invoked.

undebug(getData);

unmonitor

unmonitor(method)

Stops the monitoring of the specified method. This method is used in concert with the monitor() method.

unmonitor(getData);

unmonitorEvents

unmonitorEvents(object[, events])

Stops monitoring events for the specified object and events. For example, the following stops all event monitoring on the window object.

unmonitorEvents(window);

You may also selectively stop monitoring specific events on an object. For example, the following code starts monitoring all mouse events on the currently selected element, and then stops monitoring mousemove events (perhaps to reduce noise in the console output).

monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

values

values(object)

Returns an array containing the values of all properties belonging to the specified object.

values(object);

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.