DEV Community

Cover image for Don't use console.log() for debugging in Javascript (VS Code)
Luiz Calaça
Luiz Calaça

Posted on

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

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

You can test the index.js on terminal

node index.js
Enter fullscreen mode Exit fullscreen mode

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 │
└─────────┴────────────┴──────────────────┴───────────┘
Enter fullscreen mode Exit fullscreen mode

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 }
]
Enter fullscreen mode Exit fullscreen mode

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

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

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

Top comments (2)

Collapse
 
brunodisliler profile image
Bruno de Souza Disliler

Awesome Content!

Collapse
 
luizcalaca profile image
Luiz Calaça

Thanks, Bruno!