Software developers produce code and introduce bugs, not intentionally, but they do. The older the bug is, the harder it is to find and fix. In this series of articles, I’ll try to show what you can do by using Google Chrome Devtools, Chrome plugins and WebStorm.

This article is part of How to debug Front-end series:

This tutorial will be about Chrome Console, the most commonly used debugging tool. Enjoy!

Console

To open Chrome DevTools:

Select More Tools > Developer Tools from Chrome’s Main Menu.

Right-click a page element and select Inspect.

Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).

Look at the Console tab and what is there.

First row:

- clear console

top — by default, the Console context is top, unless you inspect some element, or Chrome plugin context.

You can change the context of execution (the top frame of the page).

Filter:

Filters console output. You can filter by severity level, regular expression, or by hiding network messages.

Settings:

Hide network — Hide network errors such as 404.

Preserve log — Console will keep logs between refreshes or navigation.

Selected context only — We can change the context of logs in [top].

User messages only — Hide browser-generated [violation] warnings.

Log XMLHttpRequests — I can’t say more than this checkbox says.

Show timestamps — timestamps are visible in the console below.

Autocomplete from history — Chrome does remember what you typed ;)

Chosen Console API

The console will run every JS code you’ll type in, in your application context. So if something is available in a global scope, you can easily see it via the console. You can also simply type and see the result of an expression e.g.: “null === 0”.

console.log — reference

By definition, console.log prints an output to the console. That part you probably know; what might be new for you is that console.log keeps a reference to the object you are displaying. Look at the code below.

When debugging objects or arrays, you need to be careful. We see that fruits before modification contains 3 objects, but they are no longer there. To see results in this particular moment, use JSON.stringify to keep the information visible. Of course, that might not be convenient with bigger objects. Don’t worry; later on, we’ll find a better solution.

console.log — sorting object properties

Does JavaScript guarantee object property order?

4.3.3 Object — ECMAScript Third Edition (1999) An object is a member of the type Object. It is an unordered collection of properties, each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.

Later… in ES5 it has slightly changed — but you can’t be sure if your object properties will be in order or not. Browsers have implemented this in various ways. If we look at the Chrome result, we’ll see something disturbing.

Surprise! Chrome sorted properties in alphabetical order, to help us. I can’t decide if I like it or not, but it’s good to know it might happen.

console.assert(expression, message)

Console.assert throws up an error if the evaluated expression is false . Crucially, assert does not stop code from further evaluation. It might help to debug long and tricky code,or find bugs which reveal themselves after several iterations.

console.count(label)

Put simply, it’s a console.log that counts how many times it has been called with the same expression. THE SAME.

As you can see in the example, only the exact same string had a number.

console.table()

Great debugging function, but sometimes I’m just too lazy to use it, even though it would probably speed up my work… so please don’t make this mistake. Be efficient.

Great… firstly, you got everything nicely placed in the table; secondly, you have console.log added as well. Good work Chrome, but that’s not all.

We can decide if we want to see all of it, or some columns from the whole object.

The table is sortable– just click on the header of the column you want to sort.

console.group() / console.groupEnd();

We’ll start with code this time. Let’s see how grouping works for console.

Great if you are working with data, and going deep…

console.trace();

Trace prints stack trace into Console. Good to know, especially if you are building libraries or frameworks.

console.log vs console.dir

Here, the implementation depends on the browser. Initially, dir was supposed to keep the reference to an object, whereas log was not.(Log was displaying a copy of an object). Now as we saw before, log also keeps the reference. Let’s stay with that, as they display objects differently. Not a big deal, and useful with debugging HTML objects.

$_, $0 — $4

$_ returns the value of the most recently evaluated expression.

$0 — $4 — work as a historical reference to the last 5 inspected HTML elements.

getEventListeners(object)

Returns event listeners registered on specific DOM elements.There is also a more convenient way to set listeners, but I’ll cover that in the next tutorial.

monitorEvents(DOMElement, [events]) / unmonitorEvents(DOMElement)

If any of these set events are triggered, we’ll get information in the console. Until you unmonitor the event.

Selecting elements in Console

To open this screen, press ESC in Element tab.

If there is nothing other assigned to $

$() — document.querySelector() . Returns the first element, matching a CSS selector (e.g. $(‘span’) will return the first span).

$$() — document.querySelectorAll() . Returns an array of elements that match the CSS selector inside.

Copy printed data

Sometimes, you are working on data. You might want to create a draft, or simply see if there is any difference between two objects. Highlighting everything and then copying might be hard. Happily, there is another way.

Click with your right mouse button on the object and press copy, or store it as a global element. Then you can operate on the stored element in the console.

Anything in the console can also be copied by using copy(‘object-name’) .

Style console output

Imagine again that you’re working on a library, or a big module that your whole team/company will work with. It would be nice to highlight some logs in dev mode. You can do it; try the code below.

console.log(‘%c Truly hackers code! ‘, ‘background: #222; color: #bada55’);

%d or %i — Integer

%f — floating point value

%o — Expandable DOM element

%O — Expandable JS object

%c — Formats outputs with CSS

That is all for today, but not all in this topic. Below, you’ll find links for further reading.