My 3 favourite console methods in JavaScript

My 3 favourite console methods in JavaScript

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"      |
---------------------------

Read more about:

The bullshit of frontend development

Introduction In this blog, I would like to share my opinion on how we, as front-end developers, often make projects unnecessarily complex. We often think we’re doing the right thing, but are we? Where we used to say we could build a website in just a few days, now we provide timelines at the infamous Scrum…

Continue reading

How I added my Porsche EV to Homekit

Since my childhood, I have been passionate about cars and everything related to them. Even at a young age, I knew every model. I spent hours flipping through car magazines searching for new facts and always dreamed of owning an exotic car. Initially, I used to dream of owning a Ferrari, but as I grew older and wiser,…

Continue reading

CSS-only Carousel Slider

As a frontend developer, my days are primarily filled with crafting JavaScript-based components using frameworks like Vue, React, or Angular. These frameworks excel at empowering me to create reusable frontend elements, whether it's buttons, modals, links, or accordions. However, as I reflect on my reliance on these…

Continue reading