Use Your Developer Console Better

The Developer Console is one of your most valuable tool during web development. Without it, you can’t debug style, JavaScript or profile performance.

As for me, I’m pretty confident with the Chrome’s dev tools in general, but when it comes to the console object’s methods, I should use some more information.

The most basic and popular way for debugging is the console.log() method, if you debugged some JS, I’m sure you used it. With the help of it, you can log custom messages to your console.

Let’s explore what anything else we can do with the console object!

The console object’s method may be different in other browsers than Chrome.

console.clear()

Your console can be noisy easily, with the use of console.clear() you can remove the logs. It can be handy if you debug a subpart of your program and you don’t need any other log.

console.clear();

Of course, you can clear it from the console panel too with the help of the clear console button or the CTRL + L keyboard combination.

console.assert()

With the help of assert(), you can display an error message if a given boolean is false. It can be real handy when you like to check some value or check an element existence.

console.assert(document.querySelector('.footer'), "Missing '.footer' element")
assert() function in developer console
The previous assert() method in Chrome’s developer console.

console.count()

It prints the number of times that the function has been invoked.

function loadConent() {
    console.count('Content is loaded');
}

console.group()

With the use of the group() and groupEnd() method you can group logs like the following:

function user(obj) {
    console.group('user');
    console.log('first: ', obj.first);
    console.log('middle: ', obj.middle);
    console.log('last: ', obj.last);
    console.groupEnd();
}
user({"first":"Wile","middle":"E","last":"Coyote"});
The group() method in Chrome’s developer console.

This method is useful when you have a lot of logs, and you like to group it for your sanity. You can also nest the groups.

The groupCollapsed() method is also connected to here. With it, you can do the same like with the group(), but the content will be collapsed by default.

console.time()

The time() is also a paired method. With the time() you can start a counter, and with the timeEnd() you can stop one. It gets one argument, the name of the counter.

console.time('total');
    var arr = new Array(1000);
    for (var i = 0; i < arr.length; i++) {
    arr[i] = new Object();
}

console.timeEnd('total');
The time() method’s output in Chrome’s developer console.

console.table()

This method is great when you’d like to log out an array or an object. It can be tricky to write out this type of data in a proper way, but with the table() you can display it in a labeled table – as you guessed.

var simpsons = [
    { name: "Homer", passion: "Food" },
    { name: "Bart", passion: "Skateboard" },
    { name: "Lisa", passion: "Saxophone" }
];

console.table(simpsons);
The table() method in developer console.

Log Out Variations

The following methods are similar to console.log(). They are prints messages like the log() but with a different styling.

console.info()

Display the message with a blue info icon.

console.warn()

Show the message with a yellow warning icon and with a yellow background styling.

console.error()

It displays a standard error message with trace information.

Styling the console.log() Output

If you want to style your log messages more than the available methods (log, info, warn, error) you can use CSS to style your display message like the following:

console.log("%c %s", "color: red; background: yellow; font-size: 20px;", "WARNING!");
Custom message styling in Chrome’s developer console.

Here the %c placeholder is for the styling parameters and the %s is for the message.

Of course, you can only use a small subset of color and text related styles.

Related articles

Special thanks for the following recource(s): DESIGNED BY NEWELEMENT / FREEPIK