How to use JavaScript Console as a Debugging Tool

The JavaScript Console

Writing code is great, until it stops working. When that happens to our code (or, if we’re unlucky, someone else’s code) it’s our job to fix it, identify the issues and resolve them. Debugging is an under-rated skill in JavaScript—a lot of developers know about the JavaScript console, but I wonder how many know how to get the most out of it? I’m going to show a few useful tricks and tips that can help with debugging in general.

1. String substitution

I’m often surprised at how few developers know this but a trick that I use more than any other is string substitution. You can use percentage-prefixed format specifiers as placeholders in the JavaScript console messages.

console.log("%o test", {test: true});

In Chrome, Firefox, Safari and Opera, the object can be opened and examined. Right-clicking it also allows it to be stored as a temporary variable allowing you to work on it. There are a few useful specifiers that can be used and they all treat the variable very slightly differently.

%o and %O

Render the object – my favourite substitution because it doesn’t adjust the rendered variable and objects can be accessed.

%s

Displays a string. This sounds like it should be the same as executing the .toString() method on the object, but the results are completely different.

console.log([1, 2, 3].toString());
// logs: "1,2,3"
console.log("%s", [1, 2, 3]);
// logs: "Array(3)"

Of course, for strings, there’s nothing faster.

%d and %i

Displays an integer a bit like passing the variable through floor(), but less consistent. This is useful for integers but can be confusing when decimals or negative numbers are involved.

console.log("Positive: %d, Negative: %d, Numeric: %d, Non numeric: %d", 1.5, -1.5, "1.5", "a");
// logs: "Positive: 1, Negative: -2, Numeric: NaN, Non numeric: NaN"

%f

Displays a float – just like the previous options but decimals are preserved.

console.log("Positive: %f, Negative: %f, Numeric: %f, Non numeric: %f", 1.5, -1.5, "1.5", "a");
// logs: "Positive: 1.5, Negative: -1.5, Numeric: NaN, Non numeric: NaN"

You can use these in any console method that displays a message.

Of course, this is far too useful to be in Internet Explorer (even Edge), although the IE JavaScript consoles will allow you to open the message and see the details of an object that was passed. You can also pass the object to console.log or console.dir.

2. Different message types

You can send messages to the browser using console.log(), but there are a few other useful methods that achieve similar things.

log

The default way of displaying information – you probably already know about this one.

debug

Sends a debugging message. IE’s console displays there with a grey background by default, Firebug had a filter that would only display these messages (but Firefox’s console didn’t keep that functionality) and the Webkit consoles won’t display these messages unless the level is set to “Verbose”. Think of it as a less important log.

info

The same as console.log except that Firefox and IE’s console as well as Firebug (requiescat in pace) display an “i” logo next to it. This made the messages stand out when visually scanning through a lot of them. Sadly, the Webkit consoles just treat this like an alias of console.log.

warn

Displays a message with an exclamation mark and a yellow background. Webkit consoles also offer a stack trace so you can see what triggered the warning and keep a track of the number of warnings in the top corner. There are usually filters that allow you to only see the warnings.

error

Like console.warn but the background is red and the icon is a cross. Again, there are filters to only display these messages and IE is the only console that doesn’t create a stack trace. This is the same as throwing an `Error` but the code execution isn’t stopped.

Get familiar with the different message types and how to use them. They will allow you to quickly find issues.

3. Checking for truthy values

A little known feature of the JavaScript console is console.assert. This method will do nothing if it’s passed anything truthy but throw an error if it is passed anything falsy. For the record, the falsy values that will throw an error are:

• 0
• ""
• false
• null
• undefined
• NaN

The optional second argument allows you to describe the assertion and the name will appear in the error. Since an error is thrown, a stack trace is available (unless you’re in IE).

You can pass variables to console.assert but it comes into its own when you pass expressions.

console.assert(typeof name === "string", "name is a string");
console.assert(myList.includes(item), "item is in myList");
console.assert(Object.keys(myObj).length, "myObj is not empty");

4. Grouping messages

Organising your messages can really help when trying to find a specific bug. Groups can be expanded and collapsed to help keep your JavaScript console window tidy. Start a group with either console.group() or console.groupCollapsed() and end it with console.groupEnd(). You can give the group a name (and use the substitution placeholders) to help identify the group.

The JavaScript consoles render these differently but they’re always grouped together. Sadly, Firefox’s dev tools don’t allow groups to be collapsed so groupCollapsed is just an alias of group.

You can also nest groups – console.groupEnd() will always close the most recently opened group. There’s no way of keep track of the groups so a developer must remember to manually close every group they open.

5. Styling messages

The different logging levels mentioned earlier will render slightly differently, but sometimes you need to really make a specific message stand out. This can be done with the %c substitution and then passing a string of CSS as an argument.

console.log("%cHello %cWorld", "color:blue;font-weight:bold;", "color:lime");

Styles continue in the message until they’re changed (you can see from the example above that both words are bold even though we didn’t define that for the second word) and most CSS properties which would style text or a background will work.

6. Display a stack trace

The JavaScript console command console.trace() will display a list of all the functions that were called in order to execute that piece of code. It can get very memory intensive but there’s nothing better for working out the chain of events that lead to a piece of code being run.

7. A table of results

Creating a table in the JavaScript console is more of a cosmetic feature, but it can be handy to display a lot of information at once, especially if you need to compare it all. Imagine a function which kept information about a person.

function Person(firstname, lastname, age) {
    this.firstname = firstname;
    this.lastname = lastname;
    this.age = age;
}

var people = [
    new Person("John", "Smith", 35),
    new Person("Jane", "Doe", 21),
    new Person("Phil", "Noone", 40)
];

While passing people to console.log it will still display all the information, you will have to manually open each one and there’s no simple way of filtering the data.

A better display is console.table which will display all the information as a table.

You can pass an array of the columns as the second argument. For example, the following line of code will only display the names (and the index). If the column isn’t recognised, it’s simply ignored.

console.table(people, ["firstname", "lastname"]);

The table will usually display “undefined” if the property exists and an empty cell if the property doesn’t. This can be useful when working out whether information was ever assigned to a property. Values are passed through the console’s %s substitution so it works best with shallow objects

Sadly, Internet Explorer’s console doesn’t have console.table.

8. Counting executions

Sometimes we need to know how often a function has been executed. There’s nothing stopping you creating a variable and increasing it with each execution, but the JavaScript console already has a feature which will do this: console.count. Give the counter a name (or no name, if you prefer) and it will display a record each time it was executed.

I’ve been a little harsh to Internet Explorer in this article but they added a feature which none of the other consoles seem to have: the ability to reset the counters with console.countReset().

9. Timing processes

The JavaScript console can keep track of a start and end time. This isn’t as thorough as a full profile, but it can be very useful in working out where a slow point is or why a time-based solution isn’t working. A timer is started with console.time() and ended with console.timeEnd(), providing the names match.

The various JavaScript consoles offer varying degrees of precision with Firefox only displaying 2 decimal places, but as a rough guide it’s still incredibly helpful.

Javascript Console for debugging: An under-rated skill

Understanding the tools available to us can make far more efficient developers and debuggers, helping us to deliver a better service to our clients and more quickly spot the source of our issues.

For more information, check out MDN and for anything IE specific, go to MSDN. Or contact a development expert today.