问使用VSCode调试Nextjs Api端点

EN

我也遇到了同样的问题，点击VSCode中的侧边栏来放置红色的点。

好消息是还是有办法的。在VSCode中，与其单击设置所需行上的红点，不如在该行上编写调试器。不知道为什么它会以一种方式工作，而不是另一种方式--也许还有一种调整可以使点击来设置点实际上是有效的？到目前为止，对于我来说，api路由是最好的：

npm run dev

现在，使用以下launch.json附加调试器。(我的next.js项目位于工作区文件夹的子文件夹中，因此我自己的配置需要反映这一点。下面的配置假设Next.js项目根与$workspaceFolder相同。)

{
    "name": "Attach",
    "port": 9229,
    "request": "attach",
    "webRoot": "${workspaceFolder}", // mine had another subfolder here
    "cwd": "${workspaceFolder}",     // and here
    "skipFiles": [
        "<node_internals>/**"
    ],
    "type": "pwa-node"
},

现在，在VSCode中，无论您想要断点在哪里：

handler.get(async (req, res) => {
  debugger;

  console.log....
});

最终会有这样的结果

我知道现在答复可能太晚了，但这对其他人可能是有用的。我只是遵循这里指定的内容，https://nextjs.org/docs/advanced-features/debugging，它运行得很好。复制与调试完整堆栈相关的部分，如果代码位于子文件夹中，请记住更改目录，例如，这对我有效。

 {
            "name": "Next.js: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev",
            "cwd": "${workspaceFolder}/client",
            "serverReadyAction": {
                "pattern": "started server on .+, url: (https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            }
        }

我也有同样的问题，但通过两步解决：

1. 在VSCode settings.json："debug.javascript.usePreview": false中添加一行
2. 不要使用NODE_OPTIONS="--inspect"

然后你仍然可以看到未绑定的断点，但运行应用程序并再次设置断点，它将是红色的，工作良好。

更新

有时候，在API上设置断点仍然有问题，所以我花了几个小时才弄清楚真正的问题是什么。最后，我发现了这个问题：

因为当您运行Nextjs应用程序时，Node将首先运行下一个脚本，然后下一个脚本将生成一个子进程，这是您自己的代码。当您使用dev模式时，Nextjs也会自动设置NODE_OPTIONS=--inspect，但是它使用不同的端口号，并且号码会自动更改。关键是：、下一个脚本和子进程将有不同的调试端口号。是您有时无法设置断点的原因。

有几种情况：

1. 如果您在VSCODE终端中通过键入"npm run dev“手动启动服务器，VSCODE将自动找到调试端口，您就可以了。
2. 如果您在VSCODE之外从终端启动服务器，然后使用attach，则VSCODE将只附加一个端口，通常只附加到Nextjs脚本。这就是为什么您不能在自己的代码中设置断点。
3. 如果您使用launch方法在launch.json中启动服务器。同样的问题也会像2号一样发生，你不能设置你的断点。

解决这个问题的方法很简单:要么从VSCODE内部终端启动服务器，要么在launch.json中添加：

"autoAttachChildProcesses"：没错，

然后，您可以通过点击F5开始调试，一切都进行得很顺利。

   {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      },
      "autoAttachChildProcesses": true,
    }

您不需要添加NODE_OPTION='--inspect'，也不需要添加"debug.javascript.usePreview": false