目前,我不得不在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 Route时自动停止或设置断点?
例如,假设我有一个/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
上停止。我该怎么做呢?
3条答案
按热度按时间dgsult0t1#
我也遇到了同样的问题,点击VSCode中的侧栏来放置红点。
好消息是仍然有一种方法。在VSCode中,不是点击设置你想要的行上的红点,而是在该行上编写调试器。不知道为什么它会这样工作,而不是那样-也许还有一个调整,可以使点击设置点实际上工作?到目前为止,这是我得到的API路线一样好:
npm run dev
现在用下面的launch.json附加调试器。(我的next.js项目位于我的工作区文件夹的子文件夹中,因此我自己的配置需要反映这一点。下面的配置假定Next.js项目根目录与$workspaceFolder相同。)
现在,在VSCode中,您可以在任何需要中断点的位置:
Should end up with something like this
yc0p9oo02#
我知道现在回复可能太晚了,但它对其他人可能很有用。我只是按照这里指定的https://nextjs.org/docs/advanced-features/debugging操作,它工作得很好。复制与调试完整堆栈相关的部分,如果你的代码在as子文件夹中,请记住更改目录,例如,这对我很有效
kr98yfug3#
我遇到了同样的问题,但通过两个步骤解决了:
1.在VSCode settings.json中添加一行:
"debug.javascript.usePreview": false
1.不要使用
NODE_OPTIONS="--inspect"
然后您可能仍然会看到未绑定断点,但运行应用程序并再次设置断点,它将显示为红色,并且工作正常。
更新
有时候,我在API上设置断点还是有问题,所以我花了几个小时来找出真实的的问题所在。最后我发现了问题:
因为当你运行一个Nextjs应用时,Node会先运行next script,然后next script会产生一个子进程,这个子进程是你自己的代码。当你使用dev模式时,Nextjs也会自动设置
NODE_OPTIONS=--inspect
,但是它使用不同的端口号,端口号会自动改变。**Next脚本和子进程将有不同的调试端口号。**这就是有时无法设置断点的原因。有以下几种情况:
1.如果您在VSCODE终端中键入“npm run dev”手动启动服务器,VSCODE将自动找到调试端口,您将没事。
1.如果您从终端启动VSCODE外部的服务器,然后使用
attach
,VSCODE将只附加一个端口,通常只附加到Nextjs脚本。这就是为什么您不能在自己的代码中设置断点。1.如果在launch.json中使用
launch
方法启动服务器,同样会出现第二个问题,无法设置断点。有一个简单的方法可以解决这个问题:从VSCODE内部终端启动服务器,或在
launch.json
中添加:然后您可以通过按F5键开始调试,一切都将顺利进行。
您不需要添加
NODE_OPTION='--inspect'
,也不需要添加"debug.javascript.usePreview": false