DEV Community 👩‍💻👨‍💻

Cover image for The Console API.
Sebastian Anioke
Sebastian Anioke

Posted on

The Console API.

The ability to spend less time finding errors in a code is a necessary skill that every developer should have.

The Console API, a debugging tool that is part of the browser, provides developers with some functions that make it possible to find these errors.

I wrote this article to show web developers some of the functions that come with the console object and what they are used for. Hopefully, you will find it useful when debugging your code.

Console.log()

This is the most popular console method. It converts its arguments (which are separated by commas) to strings and logs them to the web console. In the console, it inserts spaces between the arguments and starts a new line after outputting all arguments.

"An output of the console"

Other similar functions include:

  • Console.debug()
  • Console.info()

Normally, the browser doesn't show debug statements and would return undefined. This is because console.debug() was created to be used in development areas only and should not be shown to users. However, this can be changed by enabling "verbose" in the default levels.

"Make debug visible"

Note: When logging objects to the console from an IDE what gets logged is a reference to the object and not the value of the object when console.log is called, but the value of the object after the console is opened.

Console.warn()

The console.warn() method outputs a warning message to the web console. It usually starts with an exclamation icon.

let x = 3;
if (x == 3) {
    console.warn("This value might be too low");
}
Enter fullscreen mode Exit fullscreen mode

"A warning message from the console"

console.warn is used for displaying messages that might not necessarily cause a breakdown in the application but to show something that the user should be aware of. For example, if an API is deprecated, console.warn can be used to send a message across to the user.

Console.error()

The console.error() function outputs an error message to the console (we have all gotten this one).

let x = "3";
if (!Number.isInteger(x)) {
    console.error(`${x} is not a number`);
};
Enter fullscreen mode Exit fullscreen mode

"An error message from the console"

console.error() is used for building libraries so that the user is aware of the reason their code might not be working as expected.

Console.assert()

The console.assert function takes two arguments. The first argument is a block of code that is either true or false while the second argument is the message to be printed to the console.

If the first argument is true the function does nothing, but if it is false, the second argument is printed to the console with an Assertion failed" prefix.

const numbers = [1,"2",3,"4",5,"6"];
for (element in numbers) {
    console.assert(Number.isInteger(numbers[element]), `${numbers[element]} is not a number`);
}
Enter fullscreen mode Exit fullscreen mode

"Assertion failed console message"

Console.clear()

console.clear is used for clearing the console. This is useful when you want to clear other console statements before displaying a new one.

function show() {
    console.clear();
    console.log("...checking line 2");
    console.log("...checking line 5");
    console.log("...checking line 6");
}

function clear() {
    console.clear();
    console.log("...checking line 13");
}

show();
clear();
Enter fullscreen mode Exit fullscreen mode

"Clearing the console"

Console.table()

console.table takes one argument which is an object or an array and displays it in a tabular form.

If its argument is an array, the first column will represent the indices of the array and the second will be the values.

const color = ["blue", "red", "yellow","green", "purple"];
console.table(color);
Enter fullscreen mode Exit fullscreen mode

Displaying an array with console.table

If its argument is an object, the first column will represent the properties of the object and the second column the values.

const color = {
    primary : "red",
    secondary : "purple",
    tertiary : "violet"
}
console.table(color);
Enter fullscreen mode Exit fullscreen mode

Displaying an object with console.table

If its argument is an array of objects, the first column will represent the indices of each object, and the remaining columns will be the properties of the object.

const members = [
    {
        name: "Micheal",
        age : 21,
        isPresent : true
    },
    {
        name : "David",
        age : 18,
        isPresent : false
    },
    {
        name : "Linda",
        age : 22,
        isPresent : true
    },
    {
        name : "Philip",
        age : 27,
        isPresent : false
    }
];
console.table(members);
Enter fullscreen mode Exit fullscreen mode

Displaying an array of objects with console.table

You could also restrict the number of columns to be displayed by passing a second argument which is an array that will contain only the properties to be displayed.

console.table(members, ["name","age"]);
Enter fullscreen mode Exit fullscreen mode

"Table displaying an array of objects with filtered output"

Console.trace()

When a function is called, it gets added to the call stack. If this function calls another function, that function is also added to the call stack till a value is returned.

console.trace is simply used to trace how a function was called (i.e other functions that lead to it).

function factorial(number) {
    if (number == 1) {
        console.trace("Base case");
        return 1
    }else{
        return number * factorial(number - 1);
    }
}
factorial(4);
Enter fullscreen mode Exit fullscreen mode

"Displaying the function of console.trace"

We can see that we hit the base case after the function was called four times. "Anonymous" is simply the global namespace that gets mounted on the call stack before any other function is added to it.

Console.count()

This function takes a string as an argument and logs to the console the number of times it has been called with that string. If no string is passed, it behaves as though it was called with a string value of "default".

function increaseCount(user) {
    console.count(user);
}
increaseCount("Ben");
increaseCount();
increaseCount("Ben");
increaseCount();
increaseCount("Jane");
Enter fullscreen mode Exit fullscreen mode

Displaying the number of times console.count was called

console.count is also useful for keeping track of how many times an event handler has been triggered.

The count could also be reversed using console.countReset().

function increaseCount(user) {
    console.count(user);
}
increaseCount("Ben");
increaseCount("Ben");
increaseCount("Jane");
console.countReset("Ben");
increaseCount("Ben");
Enter fullscreen mode Exit fullscreen mode

Resetting the count with console.countReset

Note: While trying to reset the count make sure that console.count() and console.countReset have the same argument.

Console.group()

console.group() groups all subsequent console messages until console.groupEnd() is called. The argument console.group takes is used to provide an explanatory name for the group.

for (let i =0; i <= 2; i++) {
    console.group(`Group ${i+1}`)
    console.log(i)
    console.log(i + 1)
    console.log(i + 2)
    console.log(i + 3)
    console.groupEnd()
}
Enter fullscreen mode Exit fullscreen mode

Grouping console.logs with console.group

Console.time()

console.time() takes an argument that represents its unique name and starts a timer with that name. To check the time it takes for a block of code to run, console.time() is called above the code followed by another function console.timeEnd() which is called at the end, with the same argument passed to console.time(). console.timeEnd() stops the timer and logs the time it took for the code to run (in milliseconds) to the console.

console.time(loop-time);
for (let i =0; i <= 2; i++) {
    console.log(i + 2)
}
console.timeEnd(loop-time);
Enter fullscreen mode Exit fullscreen mode

displaying how long it took for a for loop to run

Also, to check the time since console.time() was called, a function, console.timeLog() which takes the same argument as console.time is called between console.time and console.timeEnd().

console.time("loop-time");
for (let i =0; i <= 2; i++) {
    for (let j=0; j<=2; j++) {
    console.log(i + 2)
    }
    console.timeLog("loop-time");
}
console.timeEnd("loop-time");
Enter fullscreen mode Exit fullscreen mode

using console.timeLog in a nested for loop

Note : console.time() does not produce any output on its own and once console.timeEnd() has been called its inappropiate to call console.timeLog until console.time() is called again.

Formatted Output with Console.

When Console functions similar to console.log() takes two arguments where the first contains %s, %i, %d, %f, %o, %O, or %c. The first argument is treated as a format string, and the values of subsequent arguments are substituted into the string in place of the two-character % sequences.

  • %s - Format as a string.
  • %i - Format as an integer.
  • %f - Format as a floating point value.
  • %O - Format as a javascript object.
  • %o - Format as a DOM element.
  • %c - Format as a CSS rule.
const a = {name:"Cindy"};
console.log("The first user is : %O", a);
console.log("Here are the elements in the DOM : ", document.documentElement);
console.log("%cThis is a text", "color:red;font-size:2rem");
Enter fullscreen mode Exit fullscreen mode

"Using Console Formatters"

Destructuring the Console object.

To save time, you could destructure console functions from the Console object.

const { log } = console;
const { error } = console;

log("This also works !");
error("This is wrong");
Enter fullscreen mode Exit fullscreen mode

Destructuring the console object

Conclusion.

Even with all of the available functions the console API provides, some developers only use console.log() when trying to find errors in their code.

Sometimes, using a console.log() works just fine but there are also sometimes when other functions might save you some time by providing better information regarding the bug to be fixed.

Thanks for reading this article. I hope you have learned something new and you are ready to start implementing what you have learned.

Top comments (14)

Collapse
 
elsyng profile image
Ellis • Edited on

Great article. You may want to add console.dir().
I find it very useful as a version of console.log() where the object or array is automatically expanded, instead of me having to click it open every single time.

Collapse
 
chucks1093 profile image
Sebastian Anioke Author

Thanks for the suggestion

Collapse
 
ndrean profile image
NDREAN • Edited on

Also n=3;m=4; console.log({n,m}); returns {n: 3, m: 4}

Collapse
 
fyodorio profile image
Fyodor

Great hack with destructuring to pass linters and CI/CD 😂

Collapse
 
qm3ster profile image
Mihail Malo

lmao

Collapse
 
enyichiaagu profile image
Amazing Enyichi Agu

Thanks. This is beautiful 🎉

Collapse
 
sidmirza4 profile image
Mohd Shahid

Great article, very few people write about Console API

Collapse
 
chucks1093 profile image
Sebastian Anioke Author

Thank you.

Collapse
 
andrewbaisden profile image
Andrew Baisden

A great run through this was so informative.

Collapse
 
kolja profile image
Kolja

The last is the best!

Collapse
 
zhouyg profile image
zhou-yg

Console.table is useful but this method only support the obj which nested depth under 2

Collapse
 
chucks1093 profile image
Sebastian Anioke Author

Do u mean it doesn't work when u used it with a simple obj?

Collapse
 
iamjaydev profile image
iamjaydev

Great work!!!

Collapse
 
delta456 profile image
Swastik Baranwal

This is really useful. Thanks for sharing!

⬇️ The only reason people scroll to the bottom...

 

is because they want to read more. Sign up for an account to bookmark, comment, and react to articles that interest you.