DEV Community

Cover image for Different Use Cases of console.log - You should use when debugging JavaScript
Fatema T. Zuhora
Fatema T. Zuhora

Posted on


Different Use Cases of console.log - You should use when debugging JavaScript

Working in JavaScript? Then you're very familiar with console.log(). Like all javascript programmers, I frequently throw a console.log into my code. And I really found it the simplest, faster, and a plain way to log something.

(() => {
    // do stuff
    let msg = 'Success!';
Enter fullscreen mode Exit fullscreen mode

plain JS console.log

Let's see a few more ways in regards to console logging, that I found a bit more informative, and interesting in my day-to-day development workflow!🙌 😊

1. Common usage: debug(), info(), log(), error(), and warn()

Technically console.debug() and console.log() are identical - the only difference is that debug messages are hidden by default and log messages are visible in the recent versions of Chrome (to see debug messages, you have to set the log level to Verbose in the Devtools).

(() => {
    // do stuff
Enter fullscreen mode Exit fullscreen mode

common usage of the console.log

console.debug Pure black color text Black color text with no icon
console.log Black color text with no icon
console.error Red Color text with icon
console.warn Yellow color text with icon

2. Stop variable name confusion

When logging many variables, sometimes it’s difficult to understand what log corresponds to which variable.

For example, let’s try the code snippet in below:

const sum = (numOne, numTwo) => {
    // do stuff
    return numOne + numTwo;
Enter fullscreen mode Exit fullscreen mode

When the above code is executed, you’ll see just a series of numbers.


To make an association between the logged value and variable, wrap the variable into a pair of curly braces {numOne}.

Enter fullscreen mode Exit fullscreen mode

Now in your console, you can see the associate variable name with the log.


3. String substitution

If you want a message containing multiple variables, string substitution is useful in this circumstance. It allows us to insert different variables that describe a message and make it clear as exactly what it needs to be.

(() => {
    // do stuff
    const user = 'John';
    const age = 25;
    console.log('%s is %i years old', user, age);
Enter fullscreen mode Exit fullscreen mode


Here is a list of specifiers that can be substituted into the output string:

Data type Specifier
Objects and arrays %o or %O
Integers %d or %i
Strings %s
Floats %f

4. and console.groupEnd()

We can make a group of the related log by surrounding them with the and console.groupEnd() statements.

(() => {
    // do stuff"Details of URL");
    console.log("Protocol: HTTPS");
    console.log("Path: details")
Enter fullscreen mode Exit fullscreen mode


Note: The group created by is initially opened. If you'd prefer that to be collapsed by default, you can use the console.groupCollapsed() statement instead of

console.groupCollapsed("Details of URL");
Enter fullscreen mode Exit fullscreen mode


5. console.time() and console.timeEnd()

console.time() and console.timeEnd() are mostly used when you need to check the performance.


for (var i = 0; i < 10000; i++) {
  // do stuff

Enter fullscreen mode Exit fullscreen mode


6. Log with style

By default, console.error() and console.warn() came up with certain different colors to draw attention. Let’s try to replicate this feature in our usual console.log() statement.

    // do stuff
    console.log(`%cThis is an important text`,`background: #FF0000; color: #FFFFFF; padding: 5px`);
Enter fullscreen mode Exit fullscreen mode


Let's write a code snippet that lets us use "our own" log directly with different colors:

Now let's use the above code to write our log:'console info');
log.warn('console warn');
log.success('console success');
log.error('console error');
Enter fullscreen mode Exit fullscreen mode


7. console.table()

console.table() is exactly what it sounds like. It allows us to log the data to the console as a table.

Let's say we have an array of programming languages:

let languages = ["JavaScript", "TypeScript", "Python", "PHP"]
Enter fullscreen mode Exit fullscreen mode

The console.log() call will give you the following representation of your data:


However, with console.table() we get:


Let's look at an object:

let extensions = {
    javascript: ".js",
    typescript: ".ts",
    python: ".py",
    php: ".php"
Enter fullscreen mode Exit fullscreen mode

With console.log we get:


While console.table gives us:


Let's log an array of objects:

let languages = [
  {name: "JavaScript", extension: ".js"},
  {name: "TypeScript", extension: ".ts"},
  {name: "Python", extension: ".py"},
  {name: "PHP", extension: ".php"}
Enter fullscreen mode Exit fullscreen mode


You can also restrict the columns that are shown in the table. You have to just pass their keys as an array into the second parameter while throwing the console.table():

console.table(languages, ["extension"]);
Enter fullscreen mode Exit fullscreen mode


That's It!

Hopefully, you found these debugging tricks useful and these will make your JavaScript coding experience more productive.

What logging tips do you use? Write a comment below!

Top comments (3)

olsard profile image

Great, thanks for sharing!

darktek profile image

After reading this its funny to see how a Tech Lead told me to use instead of console.log because It is better

kostiantyno profile image
Kostiantyn Ochenash

thanks for ( {numOne} ); really usefull !

We're hiring!

We're Hiring

We're looking for someone who can develop, maintain, and implement our product roadmap and strategy as a Senior Product Manager.

Head here to learn more.