使用 vscode 调试器调试 next.js

Question

我已经使用create-next-app安装了一个项目。 我需要使用我的编辑器调试服务器端渲染：vscode。 所以我访问了vscode-recipes - 如何调试 next.js 应用程序。

我对配方做了一点改动，所以我不必在全球范围内安装Next 。

那是我的launch.json配置文件：

    {
      "type": "node",
      "request": "launch",
      "name": "Next: Node",
      "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "runtimeArgs": ["-inspect"],
      "port": 9229,
      "console": "integratedTerminal"
    }

当我运行它时，我收到以下错误：

Error: Use env variable NODE_OPTIONS instead: NODE_OPTIONS="--inspect" next dev

我正在尝试将runtimeArgs更改为以下应该可以工作的命令： "runtimeArgs": ["NODE_OPTIONS=--inspect"]并且我收到其他错误：

No such directory exists as the project root: /Users/username/with-redux-thunk-app/NODE_OPTIONS=--inspect

如何正确表达"NODE_OPTIONS=--inspect"以便它与 vscode 调试器一起使用？

Answer 1

我设法在没有任何额外参数的情况下调试它，我的配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/next/dist/bin/next"
    }
  ]
}

Answer 2

对于未来的读者，我的launch.json有你提到的 vscode 配方中的小修复：

{
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Next: Chrome",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}"
    },
    {
        "type": "node",
        "request": "launch",
        "name": "Next: Node",
        "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
        "env": {
            "NODE_OPTIONS": "--inspect-brk"
        },
        "port": 9229,
        "console": "integratedTerminal"
    }
],
"compounds": [
    {
        "name": "Next: Full",
        "configurations": ["Next: Node", "Next: Chrome"]
    }
]
}

指令是：启动"Next: Full" ，稍等片刻让Node有时间运行Next。 然后您可以刷新 Chrome 窗口。

根据记录，Node 上的调试对我来说还可以，但是 Chrome 中的调试是部分的：我可以在线中断但看不到所有变量，我仍然不知道为什么？

Answer 3

潜在的陷阱：如果你的下一个项目在你的 vscode 工作区的子文件夹中，你应该设置sourceMapPathOverrides 。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Example",
      "runtimeExecutable": "node",
      "runtimeArgs": ["--inspect", "node_modules/.bin/next", "dev"],
      "port": 9229,
      "cwd": "${workspaceFolder}/subfolder",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/subfolder/*",
      }
    }
  ]
}

来源

您可能还需要不同类型的源映射，请更改您的 next.config.js。

module.exports = {
  webpack(config) {
    config.devtool = 'cheap-module-eval-source-map';
    return config;
  }
};

此外，从版本 9.3.1 开始，不要在任何配置中添加 --inspect 标志 - 它会通过下一个命令自动传递。

来源有很多关于主题的信息。

Answer 4

无论框架如何，这始终对我有用：

在launch.json ：

"configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach by Process ID",
      "port": 9229,
      "skipFiles": ["${workspaceRoot}/node_modules/**/*", "<node_internals>/**"]
    },

在package.json脚本中：

"dev:debug": "NODE_OPTIONS='--inspect 9229' next dev",

Answer 5

08-2022 回顾：

对我来说，问题是我能够调试页面文件但无法调试 middleware.ts 文件，

1.这解决了它：

{
    "type": "node",
    "request": "launch",
    "name": "Next.js Node Debug",
    "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
    "env": {
        "NODE_OPTIONS": "--inspect"
    },
    "cwd": "${workspaceFolder}",
    "console": "integratedTerminal",
    "sourceMapPathOverrides": {
        "meteor://💻app/*": "${workspaceFolder}/*",
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack://?:*/*": "${workspaceFolder}/*"
    }
  } 

2.使用 Next.JS 调试手册不起作用（！）