在 NX monorepo 中使用 VSCode 调试 Next.js 应用程序

Question

我目前正在尝试在NX monorepo内调试Next.js 应用程序。

我已经Auto Attach在 VSCode 的User Settings中启用了该设置。

当我使用serve命令启动应用程序时，我可以在调试控制台中看到输出，还可以通过在调试控制台中键入process或 来打印出当前进程。console.log(process)

但是，我无法在服务器端代码中设置任何断点，例如在getServerSideProps.

我检查了Next.js 调试文档中缺少的部分，并尝试NODE_OPTIONS='--inspect'通过 .env 文件在我的 Next.js 应用程序中进行设置。

更新： 看起来NX 上缺少这个功能。

Answer 1

感谢来自此 Pull Request 的信息，让它正常工作。

\n

.vscode/launch.json

\n

{\n  "version": "0.2.0",\n  "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],\n  "configurations": [\n    {\n      "name": "name-of-the-app \xe2\x80\x93 Server",\n      "type": "node",\n      "request": "launch",\n      "runtimeExecutable": "yarn",\n      "runtimeArgs": [\n        "nx",\n        "run",\n        "name-of-the-app:serve",\n        "-r",\n        "ts-node/register",\n        "-r",\n        "tsconfig-paths/register"\n      ],\n      "outputCapture": "std",\n      "internalConsoleOptions": "openOnSessionStart",\n      "console": "internalConsole",\n      "env": {\n        "TS_NODE_IGNORE": "false",\n        "TS_NODE_PROJECT": "${workspaceFolder}/apps/name-of-the-app/tsconfig.json"\n      },\n      "cwd": "${workspaceFolder}/apps/name-of-the-app/"\n    }\n  ]\n}\n

\n

注意：我正在使用yarn. 您可能必须将其替换npm为。

\n