Node.js debugging in automated tests
Tags: node, webstorm, vscode, beginners
Published: 2022-07-14 20:24:03

Ahoy, mate!

This topic may be useful for those who started test automation in **Node.js** recently. The article is written in POV of test automation engineer, but I'm sure that every other beginner in **Node.js** will find it useful.

## What's debugging and why I'd need it?

[Debugging is the process of finding and resolving bugs.](https://en.wikipedia.org/wiki/Debugging) In other words, when we run some code and it doesn't act as expected - we seek for lines of code that cause this misbehaviour.

There are two ways of getting information from your code:
1. Logging.
2. Attaching a debugger.

## Logging

I think you're already familiar with this one. When you execute some command, you simply use `console.log()` to log its result into console.

```
const result = 2 + 3
console.log(result) // 5
```

or

```
const response = await axios.get(url)
const body = response.data
console.log(body)
```

Sounds familiar?

## Attaching a debugger

Instead of logging every inch of your app, it'd probably be a good idea to just point a few lines of code in your project where you'd like to stop for a while and inspect what's going on at these specific lines.

Let's say that we execute an **HTTP request** with [Axios](https://www.npmjs.com/package/axios) and for some reason your tests are failing and you see that response body doesn't match the one that expected.

Time to ~~log this sh~~ attach a debugger!

## Visual Studio Code

First, simply mark a line of code (click to the left of the line number) where you'd like to stop when your tests will be executed. There **red dots** are **breakpoints**.
![Breakpoints in Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0qv1xd3gsiuhuyyv8a2.png) 

After that, instead of using your regular terminal, open `JavaScript Debug Terminal:
![JavaScript Debug Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0769sfi5dea4yyfpyn4w.png)

In this terminal you may simply use the command that you were using to execute your tests (like `npm test`) as usual.

![Debug process in Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xqa90uaw882bg6davbh.png)

Your test run will make a stop at the breakpoint **(1)**. You'll see the cached data that you may reach from the current line of code **(2)**.

You may go to the next breakpoint from there **(3)** or restart your current run **(4)** or detach debugger **(5)**.

You may find other ways to attach a debugger in **VSC**, but I prefer this one.

## WebStorm

It's pretty similar to **Visual Studio Code** in the first step - you mark the line of code that you need as a breakpoint:

![Breakpoints in WebStorm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2sjuc437qnxlbis7sbjc.png)

And then you run your code almost as usual, but use **debug** (bug) icon instead:

![Debugger icon in WebStorm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lpepon5sejyttjmyuxh.png)

Your test run will make a stop at the breakpoint **(1)**. You'll see the cached data that you may reach from the current line of code **(2)**.

You may go to the next breakpoint from there **(3)** or restart your current run **(4)** or stop execution **(5)**.

![Debugging process in WebStorm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ma4ttd0m0pnb2qxbi8q.png)

## Conclusion

Debugger helps us with inspection of the data that we store in application's cache. You don't need to add `console.log()` anymore to see what's going on (especially, if there's more than one thing that you want to log).

![HTTP response data in debugger](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tio5kyqoaeln4erruq0.png)

I think most of you'll agree that this method is more useful and interactive than logging. Plus, it's more readable when you have a lot of data to process (like a very long array or an object), since you can fold/unfold whole sections (objects/arrays). 

Thanks for reading, hope you've learned something new.