Don't use console.log() for debugging in Javascript (VS Code)
Tags: javascript, programming, beginners, webdev
Published: 2022-03-13 15:36:23

## **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.

![VSCODE: Run and Debug tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jldt2flos2eyvem2cvv.png)

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.

![VSCODE: Run and Debug tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pxbwudya0cgvmi8cvne.png)

Like this, **we can analyze deeply** what is happening with our code and solve in a better way the bugs.

**Don't use console.log() for debugging in Javascript**, Debug your code!

**Contacts**
Email: luizcalaca@gmail.com
Instagram: https://www.instagram.com/luizcalaca
Linkedin: https://www.linkedin.com/in/luizcalaca/
Twitter: https://twitter.com/luizcalaca