DEV Community

paolo
paolo

Posted on

Nestjs: right settings for debugging

#cicd #docker #aws #githubactions

Bored to use a lot of console.log() in your Nestjs application?
Want to become more productive and a better coder debugging directly in VSCode to find out what's wrong in your stack trace?

First thing first:
open to VSCode settings, then go to Extensions and then Javascript Debugger.
Find out Auto Attach Filter section and select Always from the dropdown.

Then, create a launch.json file in the .vscode folder of your project, then copy/paste the following code:

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Debug Nest Framework",
        "runtimeExecutable": "npm",
        "runtimeArgs": [
          "run",
          "start:debug",
          "--",
          "--inspect-brk"
        ],
        "autoAttachChildProcesses": true,
        "restart": true,
        "sourceMaps": true,
        "stopOnEntry": false,
        "console": "integratedTerminal",
      }
    ]
}
Enter fullscreen mode Exit fullscreen mode

It enables debug and console.log() at the same time.

thanks to Sasha Ladnov: https://stackoverflow.com/questions/49504765/debugging-nest-js-application-with-vscode/63325135#63325135

Be sure that in your package.json file there's the debug script:

"scripts": {
    ...
    "start:debug": "nest start --debug --watch",
    ...
}
Enter fullscreen mode Exit fullscreen mode

Now you're ready to debug your application!

Type yarn start:debug or npm run start:debug ...

Enjoy!

Debug and console.log() at the same time


Debug and console.log() at the same time

Top comments (7)

Collapse
 
mariuszgaljan profile image
Mariusz Galjan •

My VS Code debugger was not auto attaching at first.
It worked after a slight modification:
In package.json, I changed start:debug configuration to the following:

"start:debug": "nest start --debug --watch --inspect-brk=0.0.0.0:9229",
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lucasousi profile image
Lucas Simões •

Thank you! Very good article!

To improve the developer experience, I set up a debugging environment in VSCode. Follow these steps to configure it:

  1. In the root folder, create a .vscode/launch.json file.
  2. Copy the configuration below into the file.
  3. Press F5 to start the server in debug mode. 
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Nest Framework",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "start:debug", "--", "--inspect-brk"],
      "autoAttachChildProcesses": true,
      "restart": true,
      "sourceMaps": true,
      "stopOnEntry": false,
      "console": "integratedTerminal",
      "osx": {
        "cwd": "${workspaceFolder}/dev/server"
      },
      "windows": {
        "cwd": "${workspaceFolder}\\dev\\server"
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
danieldomingueti profile image
Daniel Domingueti •

It's important mentioning that "yarn start:debug" or "npm run start:debug" must be run on VSCode terminal, once the Auto Attach Filter depends on it

Collapse
 
__816813fbe15 profile image
Глэк глэкович •

I had to modify --inspect-brk to --inspect-brk=localhost:9229 and add "attachSimplePort": 9229 to my launch.json to make it auto attach.

Collapse
 
emreaka profile image
Emre AKA •

Thank you!

Collapse
 
arfn profile image
Arifin •

Thank you, this is helpful

Collapse
 
barisroboplas profile image
baris-roboplas •

Neat and Concise except "Find out Auto Attach Filter section and select Always from the dropdown."
It is worth mentioning that the option can be found in user settings(ctrl+shift+p)