DEV Community

Pantelis Papasavvas
Pantelis Papasavvas

Posted on

Debug a NestJS application in WebStorm

#tutorial #nestjs #typescript #webstorm

NestJS is a progressive framework that helps developers build scalable, maintainable, and testable backend applications using modern JavaScript and TypeScript.

It's built on top of Express, but optionally you can configure it to use Fastify as well, and embraces concepts like dependency injection, modularity, and decorators, making backend development cleaner and more predictable.

But even with a powerful framework like NestJS, there is one skill every developer needs — and that is debugging.

🧩 Why debugging matters

As developers, we face many unexpected issues daily — from logical bugs to missing async calls.

Adding console.log() everywhere might work for quick fixes, but it's far from efficient.

This is where real debugging comes into play.

Setting up proper debugging allows you to:

  • Pause the code execution where you want
  • Inspect variables in real time
  • Step through the logic line by line

However, if you try to set a breakpoint in a NestJS project, you’ll notice that the execution doesn't stop where you expect.

So let’s fix that.

⚙️ Setting up the Debug Configuration in WebStorm

To debug a NestJS app in WebStorm, we need to add a Run/Debug configuration.

🔹 Open the configuration window

In the top menu, go to:

Run → Edit Configurations

This will open the configuration window — something like this:

🔹 Create a new Node.js configuration

Press the ➕ (plus) button in the top-left corner and select Node.js.

Then give your configuration a name like NestJS Debug or something that makes sense to you.

🔹 Configure the Node.js settings

Here’s what each field means and what to fill in:

  • Node Interpreter → This is the Node version used by your project.

    Choose Project node (some path) — it’s usually preselected.

  • Working Directory → The root folder of your NestJS project (where your nest-cli.json lives).

  • File → The path to the Nest CLI file. Normally, you will find it at:

  node_modules/@nestjs/cli/bin/nest.js
Enter fullscreen mode Exit fullscreen mode

This is the executable that runs your application.

  • Application Parameters → These are the arguments that tell Nest CLI what to do. You can type: 
  start --debug --watch
Enter fullscreen mode Exit fullscreen mode

🔹 Understanding the parameters

Let’s break down what these parameters actually do:

  • start: Tells NestJS to start the application.
  • --debug: Enables debugging mode, allowing WebStorm to attach breakpoints.
  • --watch: Enables live reload — every time you save a file, NestJS restarts automatically.

So, in simple terms, we are telling Nest CLI:

“Start my app in debug mode and keep watching for code changes.”

🔹 Save and start debugging

Now everything is set
Press OK to save your configuration, set your breakpoints, and hit the Debug button.

WebStorm will launch the application in debug mode, and you’ll be able to pause the execution exactly where you want it.

🧠 Conclusion

Debugging is not just about fixing bugs — it’s about understanding how your code actually works.

By applying this setup, you’ll spend less time guessing and more time improving your code.

If you found this helpful, leave a ❤️ or a comment — it helps other developers discover it too.

Happy debugging! ⚡

Top comments (0)