The JavaScript console is a powerful tool that allows developers debug their code using functions provided by the Console API and a shell prompt where they can enter commands and interact with the document object.

JavaScript Console

Filters

There are different buttons allowing you to filter the display of messages logged to the console:

  • All — Shows all console output.
  • Errors — Only show output from console.error()
  • Warnings — Only show output from console.warn()
  • Logs — Only show output from console.log(), console.info() and console.debug().
  • Debug — Only show output from console.timeEnd() and other console output.

Filters

Errors and warnings

  • console.info : Writes a message to the console with the visual "info" icon and color coding and a hyperlink to the line where it was called.
  • console.warn : Writes a message to the console with the visual "warning" icon and color coding and a hyperlink to the line where it was called.
  • console.debug : Writes a message to the console, including a hyperlink to the line where it was called.
  • console.error : Writes a message to the console with the visual "error" icon and color coding and a hyperlink to the line where it was called.

Logging

console.dir[xml]

console.dir(object) prints an interactive listing of all properties of the object, while console.dirxml(node) prints the XML source tree of an element.

JavaScript Console

Assertions

Tests that an expression is true using console.assert. If not, it will write a message to the console and throw an exception.

var x=0;
console.assert((x == 1), "assert message: x != 1");

Grouping output

console.group allows you to group the message or log in Console tab. If you have some many logs in your code, you can probably divide your log into small group or subgroup

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();

You can also do nested grouping :

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.");

Nested Grouping

Logging Array Data

console.table() is a very handy fonction to display Array object

var langs = [
    { name: "JavaScript", extension: ".js" },
    { name: "HTML", extension: ".html" },
    { name: "CoffeeScript", extension: ".coffee" },
    { name: "SASS", extension: ".sass" }
];

console.table(langs);

JavaScript Console

Measuring Execution time

To mesure how long something it takes to execute a set of instructions :

var i, t = "";

// Start
console.time("OPNAME");

for (i = 1; i <= 100; i++)
    t += i;

// Stop
console.timeEnd("OPNAME");

Tracing

console.trace() prints the stacktrace of JavaScript execution at the point where it was called.

function F(v) {
    return K(v + 1);
}

function K(v) {
    return Y(v + 2);
}

function Y(v) {
    console.trace();
};

F(5);

Console Trace

Shortcuts

  • Ctrl + Shift + J : Open the Chrome/ium Console
  • Ctrl+l : Clear the console

References