使用 vscode 调试器调试 next.js

Question

我使用create-next-app 安装了一个项目。 我需要使用我的编辑器调试服务器端渲染：vscode。所以我访问了vscode-recipes - how to debug next.js app。

我对配方做了一些小改动，因此我不必在全局范围内安装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/*",
      }
    }
  ]
}

source

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

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

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

source 有很多关于主题的信息。

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",