How I Debug Node
Tags: javascript, node, vscode, webdev
Published: 2018-09-12 15:20:28

---
title: How I Debug Node
published: true
canonical_url: https://www.johnstewart.io/debug-node
description: Sex is good but have you ever debugged your Node app with your debugger?
cover_image: https://thepracticaldev.s3.amazonaws.com/i/yzjsaadz8315p3kyq7b4.png
tags: 
- javascript
- node.js
- vscode
- webdev
---

Time to talk about debugging a bit. This post will be quick and be mainly focused on how I do things when it comes to debugging Node apps in Visual Studio Code.

## Visual Studio Code Launch Configuration

VS Code has a nice debugger in the left column. Click on the debugger then you will see an option cog you can click that will ask what kind of configuration you want.

![debug-1](https://thepracticaldev.s3.amazonaws.com/i/by28skh1h638gug88qq9.png)

Once you select Node.js, it will bring up a configuration that has a couple properties.

![debug-2](https://thepracticaldev.s3.amazonaws.com/i/0ayx6adc5zlv6lyb3jox.png)

The one we directly care about the last property, `program`. Here it states that it will launch a program called `index.js` within our current workspace. So let's write some Node and see what this does.

```js
const avengers = ['Iron Man', 'Captain America', 'Thor', 'Captain Marvel'];

for (let i = 0; i < avengers.length; i++) {
  const theHero = avengers[i];
  console.log(theHero);
}
```

Here is some code we can use as our basis for `index.js`. After you save that code to the `index.js` file in your workspace. You can drop a breakpoint on line 5 by clicking in the rail left of the line number.

![debug-3](https://thepracticaldev.s3.amazonaws.com/i/k67j11vh0me47c17jhiq.png)

Then if you go back to your debugger and click the play button it will run the program and pause the program execution on that line.

![debug-4](https://thepracticaldev.s3.amazonaws.com/i/1bs82zu8aieu6d3edv2c.png)

In the left hand side you can see the variable with it's value in the current scope, `theHero: "Iron Man"`. There is a bunch of other scopes you can drill into and inspect the variables and that specific execution time.

This is a basic example but shows how nice and valuable a good debugger is. There are a variety of built in useful options that you can explore within VS Code. Check out the [Node.js Debugging Config Common Scenarios](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configurations-for-common-scenarios) section on the VS Code docs for more info.

## Visual Studio Code Attach Configuration

The most common way that I use VS Code debugger is by attaching the debugger to a currently running Node process and setting breakpoints within that process. I use this often when debugging some Node Express apps.

Below is a basic express app that I'll use as the base for the examples here. Replace the code in the `index.js` file and don't forget to install `express` via `npm`. 

```js
const express = require('express');
const app = express();

const PORT = process.env.PORT || 5000;

app.get('/', (req, res) => {
  const data = {
    hello: 'world'
  };

  res.json(data);
});

app.listen(PORT, () => console.log(`Up and running ${PORT}`));
```

Next, open up `.vscode/launch.json`. You will then see the big blue `Add Configuration` button. Once you click that you will be prompted with a bunch of configurations to pick from. In this case we are picking the first Node.js Attach option.

![debug-6](https://thepracticaldev.s3.amazonaws.com/i/e3eos9niuo8vblzycobx.png)

That config will then be added to your array of configs for you to use in the debugger.

Next, run node with the `--inspect` flag.

![debug-8](https://thepracticaldev.s3.amazonaws.com/i/ztrkvy28unymtn3ferpb.png)

Then you will see Node start up the script telling you the Node debugger is listening on port `9229` plus a Chrome dev tools URL then your app output. That port is the same port as the one your attach configuration is looking for.

Next, go to your `index.js` script and drop a breakpoint within the `app.get` call before the response is sent.

![debug-9](https://thepracticaldev.s3.amazonaws.com/i/24k98ihy4hdwrw1w68e8.png)

Open up your VS Code debugger and press play and you should see some controls come up at the top of VS Code. Now we need to navigate to that route to trigger that code and the debugger, open up Chrome and hit `localhost:5000`. This should kick you back to the VS Code debugger where you can view the variables and information in scope of the request.

![debug-10](https://thepracticaldev.s3.amazonaws.com/i/k6gy8z3qf42bfa4bujwq.png)

That's it!

## Summary

`console.log` is the tried and true but I think spending an hour or more trying to understand the VS Code debugger or any debug tools around will make solving problems a little bit easier. So I recommend you check out some of the information below!

- [VS Code Debugger](https://code.visualstudio.com/docs/editor/debugging)
- [VS Code Node Debugging](https://code.visualstudio.com/docs/nodejs/nodejs-debugging)

If you liked this article then please show some ❤️. If you didn’t then lets talk about it 😃.

Originally posted on my blog at [johnstewart.io](https://goo.gl/CQ4dS7).