61f56f997c
1.8 KiB
Using the VS Code Debugger
Debug configurations
The Next.js monorepo provides configurations in the .vscode/launch.json file to help you debug Next.js from VS Code.
The common configurations are:
- Launch app: Run
next dev,next build, ornext startin a directory of your choice, with an attached debugger. - Launch current directory: Run
next dev,next build, ornext startin the directory of the currently active file, with an attached debugger. - Run e2e test: Run an e2e test using the currently active file, with an attached debugger.
Run a specific app
Any Next.js app inside the monorepo can be debugged with these configurations.
- Use the status bar, or the "Run and Debug" item in the Activity Bar, to select the "Launch app" launch configuration.
- Enter the app dirname, e.g.
examples/hello-worldortest/e2e/app-dir/app. - Select the
nextcommand from the presented options (dev,build, orstart).
To see the changes you make to the Next.js codebase during development, you can run pnpm dev in the root directory, which will watch for file changes in packages/next and recompile the Next.js source code on any file saves.
Breakpoints
When developing/debugging Next.js, you can set breakpoints anywhere in the packages/next source code that will stop the debugger at certain locations so you can examine the behavior. Read more about breakpoints in the VS Code documentation.
To ensure that the original names are displayed in the "Variables" section, build the Next.js source code with NEXT_SERVER_NO_MANGLE=1. This is automatically applied when using pnpm dev.