相关疑难解决方法(0)

我正在学习 Next.js，并且想在可视化代码和 chrome 中进行调试。我尝试了 launch.json 的不同组合来在可视代码中调试 next.js 应用程序。我从堆栈溢出本身获取了代码之一。但这又是一次失败。您能帮助我如何使用 google chrome 在 Visual Studio 代码中的 Next.js 应用程序中进行调试吗？

下面是我的 launch.json 文件代码：

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

我的 .next.config.js 的代码

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

我的前端 package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "Social networking app",
  "proxy": "http://127.0.0.1:8080",
  "main": "index.js",
  "scripts": …

我已经使用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 调试器一起使用？