How to become aconsole.log() ninja

By Eli H. Schei on

If you are a web developer I’m guessing you have used console.log() a couple of (thousand) times. But did you know that the console object has some other usefull methods you can use to structure the output you get?

What is the console object?

First, a very with a short introduction to the console object before we dive in to its methods.

So what is the console object? The MDN Web docs sais “The console object provides access to the browser’s debugging console (e.g. the Web console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.”

In other words, it is a object that is available to use for debugging purposes.

Lets take a look at some of the methods it provides.

console.table()

You have two objects that contains the same structure of information about two pets. You add both pets to an array.

let myPet = {name: "Poppy", animal: "cat", age: "2", favoriteToy: "ball"};
let myOtherPet = {name: "Harry", animal: "pig", age: "3", favoriteToy: "food"};

let pets = [myPet, myOtherPet];

If you want to print the array to the console you can use console.log(), that will look like this:

If you would like a better overview of what the array contains you can use console.table() instead.

console.table(pets);

That will give you a nice table presentation of the array content, like this:

console.group()

You can use console.group() to create collapsible groups of outputs. For instance you can use it to group output from functions.

const function1 = () => {
    console.group("Function 1 output");
    console.log("this is a message from function1");
    console.groupEnd();
};

const function2 = () => {
    console.group("Other function output");
    console.log("Well hello there!");
    console.groupEnd();
};

function1();
function2();

When the functions are called you will get the messages presented like this:

Nested groups

You can also nest groups inside eachother

const function2 = () => {
    console.group("Other function output");
    console.log("Well hello there!");
       console.group("This group is nested inside of the 'Other function output' group");
       console.log("Hello from inside this group");
       console.groupEnd();
    console.groupEnd();
};

collapsed groups

If you want the groups to collapsed as default you can use console.groupCollapsed("name of group") instead of console.group("name of group")

console.dir()

When you want to output information about an object in a structured manner you can also use console.dir(object);

console.assert()

If you want some condition to decide if your ouput is displayed in the console, console.assert() is the function for you. This function takes two parameters, a boolean and a string. The message (string) will only be displayed in the console if the boolean value is false. 

const function1 = (condition) => {
     console.assert(condition, "This message will be displayed as a warning if the condition equals false");
};

function1(false);

Adding color to your console output

The console object have two built in functions that will add color to the displad text. These are console.warn() and console.error(). And as you might have guessed they will be displayed as a warning and an error.

Add your own styling

If you add %c before your string, and pass a string of styling as a second parameter you can style your output.

Other usefull console methods

Create and use a timer

You can use console.time() to start a timer, and console.timeEnd() to end it.

Where is your function being called?

Use console.trace() to see where the function was called from

Resources

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. šŸ™‚

Thank you for reading, and happy coding!

/Eli

Leave a Reply