Hendrik LiebauandGitHub
bda92a1be5
~Due to the entry preloading that was enabled by default in #65289, VS Code is no longer able to map symbols correctly for production builds. As a temporary solution, we can disable the preloading when a debugger is started until a proper fix is found.~ By optionally building the Next.js source code with `NEXT_SERVER_EVAL_SOURCE_MAPS=1` we can ensure, even with the bundled next server in the node runtime, that the original names are shown in the debug "Variables" section. In addition, the `sourceMapPathOverrides` are improved to cover the different variations of source mapping URLs. We can now also set breakpoints in the `example/...` and `test/e2e/...` server components. ~Supersedes #66229~ #### Before <img width="1276" alt="Screenshot 2024-05-27 at 21 36 52" src="https://github.com/vercel/next.js/assets/761683/f2840c35-f683-445d-bc95-cac9f719d8e7"> #### After <img width="1276" alt="Screenshot 2024-05-27 at 21 38 42" src="https://github.com/vercel/next.js/assets/761683/c801c123-3163-46c3-b442-5b72c0a5d51d">
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_EVAL_SOURCE_MAPS=1. This is automatically applied when using pnpm dev.