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

https://www.abhishekdeshmukh.com/blog/javascript-console-log-and-other-methods

#javascript #consolelog #debug

What is GEEK

Buddha Community

Debug on next level with JavaScript console log and other methods
Giles  Goodwin

Giles Goodwin

1603196880

JavaScript Console: Take Debugging to Next Level

As a web developer, it’s necessary that you be familiar with console.log(). It is the most straightforward approach to troubleshoot anything by logging the value of variables in developer tools. But the console API is much more than that, it provides many other methods that can you help in debugging.

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.

List of all the console methods that are explained in this article:

  1. console.log
  2. console.clear
  3. console.warn
  4. console.table
  5. console.dir
  6. console.group and console .groupCollapsed
  7. console.count and console.countReset
  8. console.assert
  9. Console.error
  10. console.time and console.timeEnd
  11. console.trace

1. console.log

This is the most common method for general-purpose logging. This function simply outputs any variables/strings to the console. You can list multiple variables/strings by using a comma between them.

I have illustrated a few examples below:

console.log('Simple console message')

/**** Output ****/
// Simple console message 
const str1 = 'Hello'
const str2 = 'World'

console.log(str1, str2)

/****  Output  ****/
// Hello World

#javascript #javascript-tips #debugging #programming #console

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

https://www.abhishekdeshmukh.com/blog/javascript-console-log-and-other-methods

#javascript #consolelog #debug

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() . These libraries can be used in your next Node, React, Angular, or Vue projects. So let us see what are those libraries and how to use them.

#programming #javascript-tips #javascript #console #javascript-development

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.

(() => {
    // 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

Debug on next level with JavaScript console log and other methods

In JavaScript, the console API is an object which provides access to the browser debugging console. We as developers use console.log() a lot to check the values of the variables. But the console API can do so much more! If you only use console.log() for debugging, I guarantee after reading this post you will take your JavaScript debugging to the next level with some of the most interesting console methods

So without any further delay, Let’s get started!

#js #javascript