Different Use Cases of Console.Log —  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. 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!';
    console.log(msg);
})();

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() console.info() 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
    console.debug('console.debug()');
    console.info('console.info()');
    console.log('console.log()');
    console.error('console.error()');
    console.warn('console.warn()');
})();

console.debug Pure black color text

console.info 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
    console.log(numOne);
    return numOne + numTwo;
};
console.log(sum(2,3));
console.log(sum(5,8));

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}.

console.log({numOne});

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

productivity debugging webdev javascript programming console.log

If you have only used console.log() and a couple of other methods for debugging, I guarantee that after reading this article you will learn new console methods that will take your JavaScript debugging to the next level.

If you are a JavaScript developer you must be using console.log() for debugging your JavaScript project. But do you know that there are some alternative libraries to console.log()

Learn how to log all JavaScript events of an element to the console without much fuzz. How to with video and example. How to log all JavaScript events to console for debugging. A Simple Guide to Log JavaScript Events to the Console for Debugging

Do you still only use console.log() for debugging? Take your JavaScript debugging to the next level with the console functions you have never used

Debugging of our JavaScript code, we use console.log object a lot.