Nx / NextJS 应用程序的 VS Code 服务器端调试/断点？

Question

我使用 NextJS、Typescript、Yarn（用于包）等继承了 Nx monorepo，但我无法使服务器端调试可靠地工作。不知怎的，我曾经让它工作过一次，然后就失去了它，老实说，我已经束手无策了，所以一定有一些愚蠢的简单的东西我错过了。这是我的 VS Code 的配置

launch.json

:

    {
      "name": "Launch webapp",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "nx",
      "runtimeArgs": [
        "serve",
        "webapp"
      ],
      "outputCapture": "std",
      "internalConsoleOptions": "openOnSessionStart",
      "console": "internalConsole",
      "env": {
        "NODE_OPTIONS": "--inspect",
        "TS_NODE_IGNORE": "false",
        "TS_NODE_PROJECT": "${workspaceFolder}/apps/webapp/tsconfig.json"
      },
      "cwd": "${workspaceFolder}"
    },

（我在看到这个 StackOverflow 问题后将其拼凑在一起）

这是我使用它启动时会发生的情况：

/home/me/nx-workspace/node_modules/.bin/nx serve webapp
Debugger attached.

> nx run webapp:serve:development
Starting inspector on 127.0.0.1:9229 failed: address already in use
Debugger attached.
Starting inspector on 127.0.0.1:9229 failed: address already in use
Debugger attached.
Debugger attached.
   the --inspect option was detected, the Next.js router server should be inspected at port 9230.
  ▲ Next.js 14.2.3
  - Local:        http://localhost:4300
  - Environments: .env
  - Experiments (use with caution):
    · instrumentationHook
 ✓ Starting...
Debugger attached.
Waiting for the debugger to disconnect...
 ○ Compiling /instrumentation ...
 ✓ Compiled /instrumentation in 3.7s (1192 modules)
 ✓ Ready in 7.8s

断点保持灰色。我尝试在另一个调试器中连接到端口 9230，但没有成功。我还收到很多类似以下的错误，这些错误可能与此问题无关：

Debugger attached.
Could not read source map for file:///home/me/nx-workspace/apps/webapp/.next/server/vendor-chunks/next.js: ENOENT: no such file or directory, open '/home/me/nx-workspace/apps/webapp/.next/server/vendor-chunks/script.js.map'
Waiting for the debugger to disconnect...

我觉得调试器不断断开连接和重新连接很奇怪。也许这与热重载有关？

Answer 1

阅读来自 https://nextjs.org/docs/pages/building-your-application/configuring/debugging 和 https://medium.com/@NikolovLazar/debugging-next-js-ec5a6c889f7b

的文档

我认为你还需要配置“cwd”：

"cwd": "${workspaceFolder}/apps/webapp"

最后，这里有一个类似的案例：Debug Next.js App with VSCode in NX monorepo

在那里你会看到runtimeExecutable上的一些差异，该线程上的solition是使用yarn而不是nx

"runtimeExecutable": "yarn",

希望它能解决您的问题！