Question

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

我对配方做了些微更改，因此不必全局安装Unsupported lookup 'lower' for DateTimeRangeField or join on the field not permitted.。

这是我的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使其可以与vscode调试器一起使用？

Answer 1

潜在的陷阱：如果下一个项目位于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 2

我设法在没有任何其他参数的情况下对其进行调试，这是我的配置：

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

Answer 3

对于将来的读者，我的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中的调试是部分的：我可以分行但看不到所有变量，我仍然不知道为什么？

使用vscode调试器调试next.js

3 个答案: