目前，我必须手动找到我在VSCode的/api文件夹中设置断点的文件(api端点)。
我有以下launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to application",
"skipFiles": ["<node_internals>/**"],
"port": 9229
}
]
}
是否有一种方法可以自动停止或设置断点，每当有传入请求到特定的Nextjs Api路由?
例如，假设我有一个/api/data.tsx:
import { NextApiRequest, NextApiResponse } from 'next';
import { StatusCodes } from 'http-status-codes';
import getConfig from 'next/config';
export default async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
console.log('do some logging');
res.status(StatusCodes.OK).json({message: 'Good job buddy!'});
}
并希望在每个传入请求时停止在console.log上。我该怎么做呢?
我在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"
}
}
我有同样的问题，但通过两步解决:
-
在VSCode设置中添加一行。json:
"debug.javascript.usePreview": false -
不要使用
NODE_OPTIONS="--inspect"
那么你可能仍然会看到未绑定的断点，但是运行应用程序并再次设置断点，它将显示为红色并且工作正常。
更新有时，我在API上设置断点仍然有问题，所以我花了几个小时来弄清楚真正的问题是什么。最后我找到了问题:
因为当你运行一个Nextjs应用程序时，Node会先运行next脚本，然后next脚本会生成一个子进程，这是你自己的代码。当你使用开发模式时，Nextjs也会自动设置NODE_OPTIONS=--inspect，但它使用不同的端口号，并且数字会自动变化。关键是:下一个脚本和子进程有不同的调试端口号。这就是为什么有时不能设置断点的原因。
有以下几种情况:
- 如果你在VSCODE终端中输入&;npm run dev&;手动启动服务器，VSCODE会自动启动自动找到调试端口，你就可以了。
- 如果您从终端启动VSCODE之外的服务器，然后使用
attach, VSCODE将只附加一个端口，通常只附加到Nextjs脚本。这就是为什么你不能在自己的代码中设置断点。 - 如果你在launch.json中使用
launch方法启动服务器。然后相同你不能设置你的断点
有一个简单的方法来解决这个问题:要么从VSCODE内部终端启动服务器，要么在launch.json中，添加:
"autoAttachChildProcesses": true,
然后你可以按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