当前位置：首页 > news >正文

vscode调试nextjs前端后端程序、nextjs api接口

news 2025/8/23 5:37:31

最近有一个项目使用了nextjs框架，并且使用nextjs同时实现了前后端，由于之前前后端都是分离的，前端的调试可以通过在代码种添加debugger或者直接在浏览器中打断点实现，现在想调试后端接口，前面的方式就不适用了。故研究了如何适用vscode在本地调试。
参考文档：vscode

1.打开vscode，打开要调试的项目，点击侧边运行和调试按钮，我这是中文版，英文版对应running and debugging

在这里插入图片描述

2.如果之前没有配置过，将出现下面的页面，点击“创建launch.json文件”

在这里插入图片描述

如果已经有launch.json文件可以，跳过这一步，直接打开.vscode目录下的launch.json

3.在launch.json的configurations中添加配置：

 {"name": "Next.js: debug server-side","type": "node-terminal","request": "launch","command": "pnpm run dev",//根据自己项目的运行命令调整"cwd": "${workspaceFolder}/projects/app" //如果执行commond的目录就是当前项目的根目录则无需此配置，否则配置为将运行项目根目录${workspaceFolder}代表当前工作目录},

由于是调试nextjs，这块的配置可以参考官方给出的配置
我的整个配置文件如下：

{"version": "0.2.0","configurations": [{"name": "Next.js: debug server-side","type": "node-terminal","request": "launch","command": "pnpm run dev","cwd": "${workspaceFolder}/projects/app"},{"name": "Next.js: debug client-side","type": "chrome","request": "launch","url": "http://localhost:3000"},{"name": "Next.js: debug full stack","type": "node-terminal","request": "launch","command": "npm run dev","serverReadyAction": {"pattern": "- Local:.+(https?://.+)","uriFormat": "%s","action": "debugWithChrome"}}]
}