DEV Community

Cover image for Debugging Nodejs in VSCode
Gleb Krishin
Gleb Krishin

Posted on • Updated on

Debugging Nodejs in VSCode

👨‍💻 I want you to become a better software engineer through debugging in this series of articles.

Debugging is the process of detecting and removing existing and potential errors (also called 'bugs') in a software code that can cause it to behave unexpectedly or crash.

⚙️ To configure debugging of Node in a VSCode, you should follow these steps:

  1. Create a folder .vscode at the root of your project.

  2. Put a file launch.json inside .vscode folder. This file will be a config file for debugging.

  3. Inside launch.json, you should put this code

{
  "configurations": [
    {
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "request": "attach",
      "skipFiles": [
      "<node_internals>/**"
      ],
      "type": "node"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

💡 Tip: You can generate the same code by pressing the "Add configuration" button in VSCode bottom right corner.
Add configuration green button
After clicking the button, you will see a context menu where you should choose Node.js Attach to process.
Configuration context menu
Node.js Attach to process will bring you the same configuration as in step #3

After that, go to the run and debug section in VSCode
Run and debug section in VSCode
Choose your configuration, and press start
Select and run configuration options
You should pick the node process you want to attach. Your running node application inside VSCode will be in the first place.
Context menu for choosing node process

But if you didn't find the right PID (process id) of your Node, I recommend you run a command that will show you the id of a running process on the exact localhost.

For macOS

sudo lsof -i :PORT
Enter fullscreen mode Exit fullscreen mode

After getting the right PID, you should put it in a context menu, and here you go!

See you in the following articles 🥳

Top comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden • Edited

Good step by step process.

Collapse
 
dealwith profile image
Gleb Krishin • Edited

In the following weeks, you will find more advanced articles about debugging. Stay tunned 😄