Don't use console.log() for debugging in Javascript (VS Code)

#javascript #programming #beginners #webdev

Hello, Devs!

At the beginning, it's normal to use the console.log() because it is the most knew way to debugging a value from a variable or method's return.

But, is there other option or better way to do that? Absolutely, yes!

What is debugging?

Debbug is the action of Debbuger (us) to looking for what is happening into every pieace of code, variable value, method return and when we have a error we can find it more easily.
In Javascript, we have de debugger reserved word to use and in some cases we case use tool into IDE like VSCode.

**How to use debbuger instead of console.log() in Javascript?**

The debugger word create for us a break point to get start our debugging process.

Let's create a NodeJS project:



mkdir debugger-example && cd debugger-example
npm init -y
touch index.js

After we can write the code below:



//index.js

var products = [
    { name: 'Computer', type: 'Eletronic', year: 2021 },
    { name: 'Radio', type: 'Machine', year: 1990 },
    { name: 'Cloud', type: 'Infrastructure', year: undefined }
];

debugger
console.table(products)
console.debug(products)

You can test the index.js on terminal



node index.js

The word debugger will work breaking our execution and we can analyze the values involved in our context.

For first, the output of console.table(products) is below, looks great, isn't?



┌─────────┬────────────┬──────────────────┬───────────┐
│ (index) │    name    │       type       │   year    │
├─────────┼────────────┼──────────────────┼───────────┤
│    0    │ 'Computer' │   'Eletronic'    │   2021    │
│    1    │  'Radio'   │    'Machine'     │   1990    │
│    2    │  'Cloud'   │ 'Infrastructure' │ undefined │
└─────────┴────────────┴──────────────────┴───────────┘

and the output of console.debug(products) is:



[
  { name: 'Computer', type: 'Eletronic', year: 2021 },
  { name: 'Radio', type: 'Machine', year: 1990 },
  { name: 'Cloud', type: 'Infrastructure', year: undefined }
]

This two commands (table and debug) can help us in some cases, but the better is to use a Debugging tool in some IDE, and in our case we use VS CODE.

So, imagine that data is obtained from a database and the one tuple generated undefined. So we need to know how we can solve it.

Look at into VSCODE: Run and Debug tool. You can access clicking the play button with one bug at left.

When we run node index.js the 7 line that has a debugger reserved work that will receive an indication that the debugging get started there. As we can se, in the left of screen below appears all the products and all things involved in context.