我一直在尝试通过标记breakpoint来调试我的服务器端代码。我正在使用VSCode进行我的开发。
最初，我的launch.json是这样的。
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}这很好用;但是，它不会命中任何服务器端代码，如getStaticProps、getStaticPaths和getServerSideProps。
我发现这篇博客文章，我相信它能解决我的问题。所以我在我的package.json中添加了一个脚本，并修改了我的launch.json。所以现在看起来像这样package.json
{
"scripts": {
"debug": "node --inspect-brk ./node_modules/next/dist/bin/next"
}
}launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "Launch Next.js",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 3000
}
],
"compounds": [
{
"name": "Debug Next.js + Chrome",
"configurations": [
"Launch Next.js",
"Launch Chrome against localhost"
]
}
]
}因此，当我尝试运行此程序时，我的Launch Next.js配置出现错误。
我想这是因为我指向了一个不正确的端口。我试图搜索NextJS的服务器端部分的默认端口。但是我找不到。
1条答案
按热度按时间ff29svar1#
我在API上设置断点也有同样的问题，所以我花了几个小时来找出真实的的问题。最后我发现了问题：
因为当你运行一个Nextjs应用时，Node会先运行next script，然后next script会产生一个子进程，这个子进程就是你自己的代码。Nextjs也会在你使用dev模式时自动设置NODE_OPTIONS=--inspect，但是它使用不同的端口号，端口号会自动改变。Next脚本和子进程会有不同的调试端口号。，这就是有时候无法设置断点的原因。
有一些senarios：
1.如果您在VSCODE终端中键入“npm run dev”手动启动服务器，VSCODE将自动找到调试端口，您将没事。
1.如果您从终端启动VSCODE之外的服务器，然后使用
attach，VSCODE将只附加一个端口，通常只附加到Nextjs脚本。这就是为什么您不能在自己的代码中设置断点。1.如果在launch.json中使用
launch方法启动服务器，同样会出现第二个问题，无法设置断点。有一个简单的方法可以解决这个问题：从VSCODE内部终端启动服务器，或在
launch.json中添加：然后您可以通过按F5键开始调试，一切都将顺利进行。