# Node.js Debugging with Visual Studio Code
This guide aims to walk a developer working on the SWN-K811 Project on how to setup their development environments to add breakpoints to their code and step through it. A lot of the concepts here can be used on any Node.js project though.

## Table of Contents
1. [Prequisites](#Prerequisites)
2. [Setting up your services](#Setting-up-your-services)
3. [Setting debuggers/break points](#Setting-debuggersbreak-points)
4. [Debugging your code](#Debugging-your-code)
5. [More resources](#More-resources)

## Prerequisites

### K811 Code
Clone the k811 code from the Bitbucket repository.

### Node.js
Ensure you're using node >= 16.14.2.

To install and upgrade node, use [nvm](https://www.linode.com/docs/guides/how-to-install-use-node-version-manager-nvm/).

### VS Code
Ensure you have VS Code installed. This tutorial *only* applies to this IDE.

### VS Code workspace
Ensure that you're executing your code within a VS Code workspace. More information on these [here](https://code.visualstudio.com/docs/editor/workspaces)

For most cases, simply opening your code folder and using this option would do the trick -

## Setting up your services
Normally, if we're working on the backend, we -
1. Open up a regular terminal
2. And run the following commands

cd backend-monorepo
yarn start

This would cause *all* our services to start up in the same terminal in parallel and produce an output like below

This doesn't allow us to take advantage of the JavaScript Debugger VS Code has built in. To use the debugger terminal instead, we will -
1. Click on the little downward facing arrow next to the "create new terminal" button and select JavaScript
2. You should see a little bug next to your terminal on the right
3. Figure out which services you want to debug/work on. For example, I want to debug the lead service for the sake of this tutorial. Run the following command in the `backend-monorepo` directory -

lerna run --scope @backend-monorepo/lead-service start --parallel

You should see an output like below -

You'll notice that this time a Debugger has been attached to your process. You'll also notice that your VS code switches to the debugger tab on the left automatically, showing you your execution context.

> If you want to debug multiple services at the same time, simply add another scope to your command `lerna run --scope @backend-monorepo/lead-service --scope >lead-service/api-controller start --parallel`

4. Run all other services in a regular terminal - to avoid overloading your CPU with too many unnecessary debug services, start all the other services that you're not debugging in a regular terminal by using the following command (just change the "scope" from the previous command to "ignore")

lerna run --ignore @backend-monorepo/lead-service start --parallel

You should see an output like this. Notice how there are no debuggers attached here -

## Setting debuggers/breakpoints
Now that you have your services running how you want them to, you can start setting [breakpoints](https://en.wikipedia.org/wiki/Breakpoint) in your code.

1. Identify the line you want to debug and type the word debugger before it. Literally.

For example, if I wanted to debug some issue in the `create-lead` handler in the `lead-service`, I would add the word `debugger` where I wanted the code execution to stop for me to inspect.

You'll notice that your service will restart because you changed a file.

Thats all for this step. Next we'll see how/when execution pauses.

## Debugging your code
Now all you need to do is ensure the code block that you're trying to debug gets triggered in some manner. It could be by
1. Firing an API call from your browser/Postman/curl
2. Form submission in the UI
3. By invoking the methods using a script

For this example, I'm going to fire the create-lead API from Postman.

You'll notice that the execution is paused and Postman is still waiting for a request.

VS Code highlights your breakpoint and you now have access to the entire context in which your code is operating. You can access any variables that have been defined earlier, eg I can type `leadData` in my DEBUG CONSOLE to see what the value is and interact with it like any other javascript object.

Use this to ensure things like -
1. Your function received the expected input arguments
2. All your required variables were defined properly

To continue execution, use the small navbar someone in the top of your IDE. Its the one with the blue play button.
. You can use this toolbar to Continue, Step Over, Step In/Out, Restart or Stop your code execution.

Hitting the play button will resume your code execution as normal and allow your method to return, which in my case will show me a succesful API response

## More resources
#### [Please Stop Using console.log() for Debugging — It’s Broken](https://betterprogramming.pub/please-stop-using-console-log-its-broken-b5d7d396cf15)

#### [Debugging in VS Code](https://code.visualstudio.com/Docs/editor/debugging)

#### [Debugging node.js processes in VS Code](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_attaching-to-nodejs)