使用 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

潜在的陷阱：如果您的下一个项目位于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 标志 - 它会通过下一个命令自动传递。

包含大量有关该主题的信息的来源。