Console Utilities API reference

The Console Utilities API contains a collection of convenience commands to complete the following common tasks.

  • Choose and inspect DOM elements
  • Display data in readable format
  • Stop and start the profiler
  • Monitor DOM events

Warning

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

For more information about the console.log() and console.error() methods and the rest of the console.* methods, navigate to Console API Reference.

Recently evaluated expression

Console syntax

$_

This command returns the value of the most recently evaluated expression.

Console example

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 $_ becomes the latest evaluated expression, 4.

$_ changes when new commands are evaluated


Recently chosen element or JavaScript object

Console syntax

$0

This command returns the most recently chosen element or JavaScript object. $1 returns the second most recently chosen 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 tool or the last five JavaScript heap objects chosen in the Memory tool.

$0
$1
$2
$3
$4

 

Console example

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

The $0

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

The $1


Query selector

Console syntax

$(selector, [startNode])

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

Console example

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

The $('img')

To find the first element in the DOM or to find and display it on the webpage, complete the following actions.

  1. Hover on the returned result.
  2. Open the contextual menu (right-click).
  3. Choose Reveal in Elements Panel.

In the following figure, a reference to the currently chosen 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 after the title--image element is found, and the src property of the img element 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

Console syntax

$$(selector, [startNode])

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

Console example

In the following code sample and figure, use $$() to create an array of all <img> elements in the current webpage 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 choose all images in the webpage 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 webpage after the chosen node.

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

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

Note

Select Shift+Enter in the Console to start a new line without running the script.


XPath

Console syntax

$x(path, [startNode])

This command returns an array of DOM elements that match the specified XPath expression.

Console example

In the following code sample and figure, all of the <p> elements on the webpage 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

Console syntax

clear()

This commnad clears the console of the history.

Console example

clear()

copy

Console syntax

copy(object)

This method copies a string representation of the specified object to the clipboard.

Console example

copy($0)

debug

Console syntax

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 invokes and breaks inside the method on the Sources tool. It allows you to step through and debug the code.

Console example

debug("debug");

Breaking inside a method with debug()

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

For more information on breakpoints, navigate to How to pause your code with breakpoints in Microsoft Edge DevTools.


dir

Console syntax

dir(object)

This command 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.

Console example

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, navigate to console.dir() in the Console API.


dirxml

Console syntax

dirxml(object)

This command prints an XML representation of the specified object, as displayed in the Elements tool. This method is equivalent to the console.dirxml() method.


inspect

Console syntax

inspect(object/method)

This command opens and chooses the specified element or object in the appropriate panel: either the Elements tool for DOM elements or the Memory tool for JavaScript heap objects.

Console example

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

Console example

inspect(document.body);

Inspecting an element with inspect()

When passing a method to inspect, the method opens the webpage in the Sources tool for you to inspect.


getEventListeners

Console syntax

getEventListeners(object)

This command 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.

Console example

In the following code snippet and 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, two event listeners are 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

Console syntax

keys(object)

This command 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().

Console example

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) before you type keys(player1) and values(player1) in the console.

keys(player1)

values(player1)

The keys() and values() commands


monitor

Console syntax

monitor(method)

This command logs a message to the console that indicates the method name along with the arguments passed to the method as part of a request.

Console example

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

The monitor() method

Use unmonitor(method) to end monitoring.


monitorEvents

Console syntax

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.

Console example

Review 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 code snippet 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 following table 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 chosen in the Elements tool.

monitorEvents($0, "key");

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

Monitoring key events


profile

Console syntax

profile([name])

This command starts a JavaScript CPU profiling session with an optional name. The profileEnd() method completes the profile and displays the results in the Memory tool.

Console example

  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 tool.

Profiles may also be nested. In the following code samples and figure, the result is the same whatever 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

Console syntax

profileEnd([name])

This command completes a JavaScript CPU profiling session and displays the results in the Memory tool. You must be running the profile() method.

Console example

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

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

    profileEnd("My profile")
    

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

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

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

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

Console syntax

queryObjects(Constructor)

This command returns an array of objects created with the specified constructor. The scope of queryObjects() is the currently chosen runtime context in the Console.

Console example

queryObjects(promise)

Returns all Promises.

queryObjects(HTMLElement)

Returns all HTML elements.

queryObjects(functionName)

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


table

Console syntax

table(data[, columns])

This command logs object data with table formatting based upon the data object in with optional column headings.

Console example

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

Console syntax

undebug(method)

This command stops the debug of the specified method. So when the method is requested, the debugger is no longer invoked.

Console example

undebug(getData);

unmonitor

Console syntax

unmonitor(method)

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

Console example

unmonitor(getData);

unmonitorEvents

Console syntax

unmonitorEvents(object[, events])

This command stops monitoring events for the specified object and events.

Console example

For example, the following code snippet 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 chosen element, and then stops monitoring mousemove events (perhaps to reduce noise in the console output).

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

values

Console syntax

values(object)

This command returns an array containing the values of all properties belonging to the specified object.

Console example

values(object);

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

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.