Using the Console

Opening the Console

The JavaScript Console is available in two places. The Console panel provides primary access. It also is available from within any other panel by using the Drawer. To open the Console tab, do one of the following:

• Use the keyboard shortcut Command + Option + J (Mac) or Control + Shift + J (Windows/Linux).
• Select > More Tools > JavaScript Console.

To open the drawer console press the Esc key on your keyboard or click the Show Drawer button in the upper right corner of the Chrome DevTools window.

Clearing the console history

To clear the console's history, do one of the following:

• Right-click or Ctrl-click anywhere in the Console and choose Clear Console from the context menu that appears.
• Enter the clear() Command Line API at the shell prompt.
• Invoke console.clear() Console API from JavaScript.
• Use the keyboard shortcut Cmd + K, ^ + L (Mac) Ctrl + L (Windows and Linux).

Message Stacking

The console will stack consecutive messages that contain the same output. This helps keep the information provided to you as concise as possible.

Timestamps disabled (default)	Timestamps enabled

msgs = ['hello', 'world', 'there'];
for (i = 0; i < 20; i++) console.log(msgs[Math.floor((i/3)%3)])

Frame Selection

The console can operate within different frames of the page. The primary page is the top frame for the document. An iframe element for example would create its own frame context. You may specify the frame by using the dropdown beside the filter button.

Writing to the console

The console.log() method takes one or more expressions as parameters and writes their current values to the console.

var a = document.createElement('p');
a.appendChild(document.createTextNode('foo'));
a.appendChild(document.createTextNode('bar'));
console.log("Node count: " + a.childNodes.length);

Multiple parameters will concatenate into a space-delimited line.

console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());

Errors and Warnings

Errors and warnings act the same way as normal logging. The difference is error() and warn() have styles to bring attention to them. The console.error() method displays a red icon along with red message text. The console.warn() method displays a yellow warning icon with the message text.

function connectToServer() {
    console.error("Error: %s (%i)", "Server is  not responding",500);
}
connectToServer();

if(a.childNodes.length < 3 ) {
    console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
}

Assertions

The console.assert() method conditionally displays an error string (its second parameter) only if its first parameter evaluates to false.

console.assert(list.childNodes.length < 500, "Node count is > 500");

Filtering console output

You can filter console output by its severity level by selecting one of the filter options. Activate filters under the filter funnel icon located in the upper-left corner of the console panel. The following filter options are available:

All

Shows all console output.

Errors

Only show output from console.error().

Warnings

Only show output from console.warn().

Info

Only show output from console.info().

Logs

Only show output from console.log().

Debug

Only show output from console.timeEnd() and console.debug().

Grouping Output

You can group related output together with the group commands. The group command takes a single string parameter to set the name of the group. The console will begin to group all subsequent output together. To end the grouping you only need to call groupEnd().

var user = "jsmith", authenticated = false;
console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
    console.log("User '%s' not authenticated.", user)
}
console.groupEnd();

Log groups may also nest within each other. This is useful to see a large group in smaller pieces at a time.

var user = "jsmith", authenticated = true, authorized = true;
// Top-level group
console.group("Authenticating user '%s'", user);
if (authenticated) {
    console.log("User '%s' was authenticated", user);
    // Start nested group
    console.group("Authorizing user '%s'", user);
    if (authorized) {
        console.log("User '%s' was authorized.", user);
    }
    // End nested group
    console.groupEnd();
}
// End top-level group
console.groupEnd();
console.log("A group-less log trace.");

When you are using groups heavily it can be very useful to not see everything as it happens. For these times you can automatically collapse groups by calling groupCollapsed() instead of group().

console.groupCollapsed("Authenticating user '%s'", user);
if (authenticated) {
    ...
}
console.groupEnd();

Viewing structured data

The table() method provides an easy way to view similar data objects. This will take the properties of an object and create a header. Row data comes from each indexes properties value.

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

The second parameter to table() is optional. You may define an array containing the property strings you wish to display.

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);

console.table(family, ["firstName", "lastName", "age"]);

String substitution and formatting

The first parameter passed to any of the logging methods may contain one or more format specifiers. A format specifier consists of a % symbol followed by a letter that indicates the formatting that applies to the value. The parameters following the string apply to the placeholders in order.

console.log("%s has %d points", "Sam", 100);

The full list of format specifiers are as follows:

%s

Formats the value as a string

%i or %d

Formats the value as an integer.

%f

Formats the value as a floating point value.

%o

Formats the value as an expandable DOM element. As seen in the Elements panel.

%O

Formats the value as an expandable JavaScript object.

%c

Applies CSS style rules to the output string as specified by the second parameter.

console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());

Formatting DOM elements as JavaScript objects

When you log a DOM element to the console it displays in an XML format. This is the same view as the Elements panel. To display the JavaScript representation you may either use the dir() method or the object format specifier in a log() statement.

log() view	dir() view

Styling console output with CSS

The CSS format specifier allows you to customize the display in the console. Start the string with the specifier and give the style you wish to apply as the second parameter.

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

Measuring how long something takes

A timer starts by calling the time() method. You must pass a string to the method to identify the time marker. When you want to end the measurement call timeEnd() and pass it the same string passed to the initializer. The console logs the label and time elapsed when the timeEnd() method fires.

console.time("Array initialize");
    var array= new Array(1000000);
    for (var i = array.length - 1; i >= 0; i--) {
        array[i] = new Object();
    };
console.timeEnd("Array initialize");

When a Timeline recording is taking place during a time() operation it will annotate the timeline as well. This is useful when tracing what your application does and where it comes from.

Marking the Timeline

The Timeline panel provides a complete overview of where the engine spends time. You can add a mark to the timeline from the console with the timeStamp(). This is a simple way to correlate events in your application with other events.

Note: The timeStamp() method only functions while a Timeline recording is in progress.

The timeStamp() annotates the Timeline in the following places:

• A yellow vertical line in the Timeline's summary and details view.
• It adds a record to the list of events.

function AddResult(name, result) {
    console.timeStamp("Adding result");
    var text = name + ': ' + result;
    var results = document.getElementById("results");
    results.innerHTML += (text + "<br>");
}

Setting breakpoints in JavaScript

The debugger; statement will begin a debugging session. This is equivalent to setting a breakpoint at this line in the script.

brightness : function() {
    debugger;
    var r = Math.floor(this.red*255);
    var g = Math.floor(this.green*255);
    var b = Math.floor(this.blue*255);
    return (r * 77 + g * 150 + b * 29) >> 8;
}

Counting statement executions

The count() method will log the provided string along with the number of times the same string has been provided. The string may have dynamic content. When the exact statement is given to count() on the same line the number will increment.

function login(user) {
    console.count("Login called for user " + user);
}

users = [ // by last name since we have too many Pauls.
    'Irish',
    'Bakaus',
    'Kinlan'
];

users.forEach(function(element, index, array) {
    login(element);
});

login(users[0]);

Evaluating expressions

The console will evaluate any JavaScript expression you provide when pressing Enter. It provides auto-completion and tab-completion. As you type an expression property name suggestions appear. If there are multiple matches ↑ and ↓ will cycle through them. Pressing → will select the current suggestion. For a single suggestion Tab will also select the suggestion.

Selecting Elements

There are a few shortcuts for selecting elements. These save you valuable time when compared to typing out their standard counterparts.

$()

Returns the first element that matches the specified CSS selector. It is a shortcut for document.querySelector().

$$()

Returns an array of all the elements that match the specified CSS selector. This is an alias for document.querySelectorAll()

$x()

Returns an array of elements that match the specified XPath.

$('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.

Inspecting DOM elements and JavaScript heap objects

The inspect() function takes a DOM element or JavaScript reference as a parameter. If you provide a DOM element the DevTools will go to the Elements panel and display that element. If you provide a JavaScript reference then it will go to the Profile panel.

$('[data-target="inspecting-dom-elements-example"]')
inspect($_)

Accessing recently selected elements and objects

The console stores the last five element and object selections. As you select an element in the Elements panel or an object in the Profiles panel, that pushes onto the history stack. $x provides access to the history stack. Remember computers begin counting from 0; this means the latest item is $0 and the oldest item is $4.

Monitoring events

The monitorEvents() method instructs the DevTools to log information on the specified targets. The first parameter is the object to monitor. All events return if the second parameter is not provided. To specify the events to listen to you may pass either a string or an array of strings as the second parameter.

monitorEvents(document.body, "click");

If a supported event type that the DevTools maps to a set of standard event names then it will listen to the events for that type. The Command Line API has a full mapping of event types to the events they cover.

To stop monitoring events you call the unmonitorEvents() method and give it the object to stop monitoring.

unmonitorEvents(document.body);

Controlling the CPU Profiler

The profile() function begins a JavaScript CPU profile. You may pass in a string to name the profile as well. To stop a profile call profileEnd() in the same way you called the initializer.

profile()
profileEnd()

If you provide a label that is the heading. Profiles group together if you create multiple profiles with the same label.

profile("init")
profileEnd("init")
profile("init")
profileEnd("init")

Multiple CPU profiles can operate at once. You also are not required to close them out in creation order.

profile("A")
profile("B")
profileEnd("A")
profileEnd("B")

profile("A")
profile("B")
profileEnd("B")
profileEnd("A")

Settings

The Console has four settings you can modify in the general tab of the DevTools settings dialog:

Hide network messages

Instructs the console to not show logs from network issues. For example, 404 and 500 series errors will not be logged.

Log XMLHttpRequests

Determines if the console logs each XMLHttpRequest.

Preserve log upon navigation

Determines if the console history is not deleted when you navigate to another page.

Show timestamps

When a statement is made to the console this will display the timestamp for the call. This will disable message stacking.