DEV Community

Cover image for How to become a console.log() ninja
Eli H. Schei
Eli H. Schei

Posted on • Originally published at elischei.com

How to become a console.log() ninja

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];
Enter fullscreen mode Exit fullscreen mode

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

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

console.table(pets);
Enter fullscreen mode Exit fullscreen mode

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

Alt Text


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();
Enter fullscreen mode Exit fullscreen mode

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

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();
};
Enter fullscreen mode Exit fullscreen mode

Alt Text

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);

Alt Text


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);
Enter fullscreen mode Exit fullscreen mode

Alt Text


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.

Alt Text

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.

Alt Text


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!

/Eli

Discussion (1)

Collapse
biah profile image
Lucretius Biah

Insightful