Different Use Cases of Console.Log —  Use When Debugging Javascript

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

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() 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()');
})();

common usage of the console.log

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.

console.log-img3

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.

console.log-img4

productivity debugging webdev javascript programming console.log

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

JavaScript Console: Take Debugging to Next Level

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.

Alternative libraries for Console.log() for your next JavaScript Project

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

A Simple Guide to Log JavaScript Events to the Console for Debugging

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

Debug on next level with JavaScript console log and other methods

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

How to Use console to Debugging in JavaScript

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