最近有一个项目使用了nextjs框架，并且使用nextjs同时实现了前后端，由于之前前后端都是分离的，前端的调试可以通过在代码种添加debugger或者直接在浏览器中打断点实现，现在想调试后端接口，前面的方式就不适用了。故研究了如何适用vscode在本地调试。 参考文档：vscode
1.打开vscode，打开要调试的项目，点击侧边运行和调试按钮，我这是中文版，英文版对应running and debugging
如果已经有launch.json文件可以，跳过这一步，直接打开.vscode目录下的launch.json
3.在launch.json的configurations中添加配置：
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"cwd": "${workspaceFolder}"
},
{
"name": "Next.js: debug client-side",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"cwd": "${workspaceFolder}",
"serverReadyAction": {
"pattern": "- Local:.+(https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
4.保存launch.json后，重新点击侧边“运行与调试”按钮
现在面板就会变成这样：
