My 3 favourite console methods in JavaScript

Posted on 29th of January 2021 | Reading time: 5 minutes

To debug your JavaScript code you probably use your web console a lot. By logging variables, add logging in callbacks and add logging statements at certain breakpoints you can understand and improve your code. You’re probably familiar with the Console methods ‘log’, ‘warn’ and ‘error’ but did you know that there are a lot more methods? In this article I will share my favourite 3 and will show some tricks. And yes, the familiar ‘log’ method is the first one I will show, and I bet you don't know everything about it!

1. console.log()

the Console method ‘log’ is the most used method and it outputs a message to the web console. The message may be a string, or it may be any JavaScript object.

Logging objects

Did you know it is not recommended to use an object as message, but you should parse a stringified object as message instead? When you log an object the value of the object could change after your log statement, your web console probably provides a live view of that object. That means that you could see new values instead of the values present when you logged the object.

// Don’t use:
console.log(obj);

// But use:
console.log(JSON.parse(JSON.stringify(obj)));

2. console.dir()

The console method ‘dir’ displays a list of the properties of the specified JavaScript object. The output shows as a hierarchical listing with the option to see the contents of child objects. 

The example below shows the difference of the output of console.log and console.dir methods with the same object as parameter. The 'dir' method shows a hierarchical object and the 'log' method outputs the object in a single line. Note that the 'log' method doesn't show all properties and does not show child objects.

console.dir(window.location);

v Location
 > ancestorOrigins: DOMStringList {length: 0}
 > assigns: f assign()
   hash: ""
   host: "murani.nl"
   hostname: "murani.nl"
   href: "https://murani.nl"
   origin: "https://murani.nl"
   pathName: "/"
   port: ""
   protocol: "https:"
 > reload: f reload()
 > replace: f replace()
   search: ""
 > toString: f toString()
 > valueOf: f valueOf()
   Symbol(Symbol.toPrimitive): undefined
 > __proto__: Location

console.log(window.location);

> Location {ancestorOrigions: DOMStringList, href: "https://murani.nl", origin: 
  "https://murani.nl", protocol: "https:", host: "murani.nl", ... }

3. console.table()

As the name suggests the console method ‘table’ displays tabular data as a table. The tabular data specified must be an array or an object. Each element in the array or each enumerable property in an object will be a row in the table. The first column will be labeled index and represents the index of an array, or the property name of an object.

Examples with an array

This table shows all properties of an array in a table with two columns; an index column and a value column.

console.table(['Vue', 'Angular', 'React']);

------------------------
| (index) | Value      |
------------------------
| 0       | "Vue"      |
| 1       | "Angular"  |
| 2       | "React"    |
------------------------

When elements in the provided array are arrays or objects themselves, then their elements or properties are enumerated in the row, one per column:

console.table([['Vue 2', 'Vue 3'], ['AngularJS', 'Angular'], ['React 16', 'React 17']]);

---------------------------------------
| (index) | 0            | 1          |
---------------------------------------
| 0       | "Vue 2"      | "Vue 3"    |
| 1       | "AngularJS"  | "Angular"  |
| 2       | "React 16"   | "React 17" |
---------------------------------------

Example with an object

This table shows all properties of an object in a table with two columns; an index column with the property name and a value column with the property value.

console.table({ firstName: 'Jasper', lastName: 'Seinhorst' });

---------------------------
| (index)   | Value       |
---------------------------
| firstName | "Jasper"    |
| lastName  | "Seinhorst" |
---------------------------

Restricting columns

By default the ‘table’ method will list all elements in each row. You can use the optional columns parameter to a subset of columns to display. Keep in mind, that you need to define the columns you want to see instead of the columns you don’t want to see.

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

var jasper = new Person('Jasper', 'Seinhorst');
var elon = new Person('Elon', 'Musk');
var tim = new Person('Tim', 'Cook');

console.table([jasper, elon, tim], ['lastName']);

---------------------------
| (index)   | Value       |
---------------------------
| 0         | "Seinhorst" |
| 1         | "Musk"      |
| 2         | "Cook"      |
---------------------------