Скачать или смотреть Debugging Issues with NestJS in VSCode

Learn how to resolve common debugging issues in NestJS using VSCode, including configuring your launch.json and fixing breakpoint problems.
---
This video is based on the question https://stackoverflow.com/q/67880319/ asked by the user 'SpaceCowboy74' ( https://stackoverflow.com/u/186750/ ) and on the answer https://stackoverflow.com/a/73734005/ provided by the user 'ahmedkandil' ( https://stackoverflow.com/u/10632131/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: NestJS/VSCode Debugging not working in domain code

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Debugging Issues with NestJS in VSCode: A Comprehensive Guide

If you're diving into a NestJS application and facing issues with the debugging process in VSCode, you're not alone! This situation often arises, particularly if you've inherited a project. Many developers experience difficulties with hitting breakpoints, especially after all the controllers and modules have loaded. In this guide, we'll explore a common debugging problem in NestJS and provide a step-by-step guide to solving it.

The Problem

You may find that when you try to debug your NestJS application using the command:

[[See Video to Reveal this Text or Code Snippet]]

your breakpoints in various TypeScript files aren't being hit, although breakpoints in the main.ts file work without a hitch. Additionally, you might notice that if you attempt to debug JavaScript files within your dist directory, you run into issues with needing to clear this folder to avoid TypeScript errors (e.g., TS5055).

Key Points of Frustration:

Breakpoints in main.ts work, but others do not.

Encountering TypeScript errors when not clearing the dist folder.

Inability to debug TypeScript files unless using hard-to-manage JS files in dist.

The Solution

To resolve these debugging issues in your NestJS application, you need to configure your launch.json file appropriately. This configuration allows VSCode to handle TypeScript files properly while debugging.

Step-by-Step Configuration

Open Your launch.json File:

In VSCode, access the Run and Debug side panel (CTRL+ Shift+ D or CMD+ Shift+ D on Mac).

Click on "create a launch.json file" or edit your existing one.

Add the Following Configuration:

Here’s a typical configuration to set up in your launch.json file for a NestJS application:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of Each Entry

args: Specifies the entry file of your application (typically src/main.ts for NestJS).

runtimeArgs: These arguments set up ts-node to transpile TypeScript on-the-fly and ensure that your path resolution works correctly.

cwd: Sets the current working directory to your workspace.

protocol: Ensures that you are using the Node Inspector protocol for debugging.

env: Customize your environment variables, such as NODE_ENV and NODE_PORT.

sourceMaps: This must be true to map your TypeScript files in the debugger.

Additional Tips for a Smooth Debugging Experience

Clear Your dist Folder: To avoid any TS5055 errors, ensure you clear the contents of your dist folder before running the debug session, especially if you face issues with stale files.

Use the Integrated Terminal: Make use of the integrated terminal in VSCode for running commands instead of external terminals to streamline your debugging process.

Check TypeScript Configuration: Ensure that tsconfig.json is correctly set up for your project. This includes options like sourceMap being set to true.

Conclusion

Debugging can be a challenging yet rewarding process, especially in a complex framework like NestJS. By properly configuring your launch.json file and understanding the underlying mechanics, you can efficiently resolve issues with breakpoints and enhance your overall development experience. Happy coding!