· 4 min read Comments

An ultimate guide to Logging in JavaScript

  1. Calligraphy Authors's Headshot


Table Of Contents

The console is part of the window object that gives you access to the browser’s console. It lets you output strings, arrays and objects that help debug your code.

In this post we’ll also learn more about Loggin in JavaScript. This post is for intermediate JavaScript learners.

The console is part of the window object that gives you access to the browser’s console. It lets you output strings, arrays and objects that help debug your code.

We can get access to the console on one of two ways:

window.console.log("Hello World!"); 
console.log("I'm Rahul"); 

// Hello World
// I'm Rahul

The most common element of the console object is console.log(). For most scenarios, you’ll use it to get the job done.

There are four different ways of outputting a message to the console:





Where console.error and console.warn out puts to stderr, the other output to stdout.

With the console object and its logging methods, long are the days of calling alert() to debug and get a variable’s value.

Besides the general logging methods that we have discussed in the previous part, there are few more methods that we can play around with.

Now we will cover:

Stack tracing

The console.trace() method displays a trace that show how to code ended up at certain point. Take a look at the below example, to understand how console.trace() works.

function hey(name) {
    console.trace('name:', name); 
    return `Hello ${name}!`; 

// "Hello Rahul!"


The console.assert method is an easy way to run assertion tests. If the assertion of the 1st argument fails, the subsequent argument gets printed to the console.

Let’s look at this example,

// this will pass, nothing will be logged
console.assert(1 == '1', '1 not == to "1"'); 

The below assertion fails,

// this will pass, nothing will be logged
console.assert(1 === '1', '1 not == to "1"'); 


Assertion failed: 1 not == to "1"

Formatting Logs

There is a way to print out objects in a nice formatted way using console.dir().

For example:

const Rahul = {
    topic: 'Logging', 
    platform: 'Javascript', 
    date: {
        year: '2020', 
        month: 'March', 
        day: 'Saturday'

Formatting Logs
Formatting Logs

You ca print out a DOM element’s markup in a formatted way using console.dirxml().

for example:


The same will be the output 😅

Countings The console.count() method is used to count the number of times it has been invokedd with the same provided label.

For example, here we have two counter, one for even values and another on for odd values.

[1, 2, 3, 4, 5].forEach(nb => {
    if (nb % 2 === 0) {
    } else {

Clearing the logs: You can clear out all the console logs using the console.clear() method.

Record Timings You can record how long an operation took to complete using console. You can start a timer with console.time and then end it with console.endTime.

For Example:

setTimeout(() => console.log, 1000); 

// timer: 0.123945114ms

Note: Passing the label in console.time is optional. If you use a label with console.time you must pass-in that same label when calling console.timeEnd.

Grouping logs

You can group the console messages together with console. Use console.group and console.groupEnd to group console messages together.

For Example:

console.group('Even Numbers'); 
console.groupEnd('Even Numbers'); 

Nested grouping logs Groups ca also be nested to another one. Take a look at the below example,


Styling your logs:

Console logging can be styled using the delimiter %c. The first argument is the message to displayed. Everything that comes after the first %c will be styled by the string provided by the secong argument, then everything after the next %c is styled by the following string argumnet, and so on.

    'Hello %cRahul%c!', 
    'color: blue; font-weight: bold; font-size: 1rem;', 
    'color: hotpink; font-weight: bold; font-size: 1rem;'

Tabular visualization of logs

The console.table() allows to display data in the console in a nice tabular format.

const jsonData = [
        color: "red", 
        value: "#f00"
        color: "green", 
        value: "#0f0"
        color: "blue", 
        value: "#00f"


And, you can also display an object in a tabular view. You may wonder how? Take a look at this example.

const x = { a: 1, v: { a: 1 } }; 

Tabular Vizualitation Logs
Tabular Vizualitation Logs

console.table() displays nay object data in a tabular view. But, if a JSON has multiple nested objects inside, it just prints the root level objects in the tabular view.

Let’s see that in this example:

const x = [
    { p: 123, i: 1 }, 
        p: 124, 
        i: 2, 
        x: {
            a: 1, 
            b: { s: 23 }

Sorting in logs

console.table() comes with an inbuilt sorting. Yoou can sort the table by a particular column by clicking on that column’s label.

const y = [
    ["One", "Two"], 
    ["Three", "Four"]


 Sorting Logs
Sorting Logs

⚡Thanks For Reading | Happy Coding🚀

Share on:
Ashish Lahoti avatar
About Rahulism
I’m a front-end Developer and Blogger. Focused more on User Experience. I’m Passionate about startups