使用VS Code调试器调试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"
    }

当我运行时，出现以下错误：

错误：使用环境变量NODE_OPTIONS而不是：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调试器配合使用？

- LiranC

---

这篇文章帮了我很多：https://hackernoon.com/what-is-nextjs-and-how-to-debug-it-82523t65 - Machado

现在有一个官方的 Next.js 调试页面：https://nextjs.org/docs/advanced-features/debugging - icc97

Answer 1

我成功地进行了调试，没有使用任何其他的参数，我的配置如下：

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

- Andrei Belokopytov

---

这就是我一直在寻找的答案。谢谢！ - Dennis W

我也尝试了这个解决方案，但是它显示“找不到pages目录。请在项目根目录下创建一个。”我的文件夹结构如下： 后端 前端 .next 组件 node_modules pages public .env.local packge-lock-json pacakege.json node_modules .env pacakge-lock-json package.json - vivek padelkar

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标志 - 它会通过下一个命令自动传递。 source有关该主题的大量信息。

- proxy

---

它给我一个错误，如下： Uncaught G:\VIVEK\PROJECTS\SOCIAL NETOWRK\frontend\node_modules.bin\next:2 basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')") ^^^^^^^SyntaxError: missing ) after argument list 没有调试器可用，无法发送“变量” - vivek padelkar

我的 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/" } } ] } - vivek padelkar

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上的调试只是部分的：我可以在代码行上中断，但无法查看所有变量，我仍然不知道原因是什么？

- pom421

---

它告诉我：找不到“pages”目录，请在项目根目录下创建一个。 - proxy

Answer 4

2022年8月回顾：

对我来说问题在于我能够调试页面文件，但无法调试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 调试手册无法正常工作 (!)

- James Roeiter

Answer 5

这对我来说总是有效的，无论框架如何：

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

- Gus