天猫做网站,discuz!网站模板,互联网定制产品网站,吴中区做网站最近有一个项目使用了nextjs框架#xff0c;并且使用nextjs同时实现了前后端#xff0c;由于之前前后端都是分离的#xff0c;前端的调试可以通过在代码种添加debugger或者直接在浏览器中打断点实现#xff0c;现在想调试后端接口#xff0c;前面的方式就不适用了。故研究…最近有一个项目使用了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}}]
}4.保存launch.json后重新点击侧边“运行与调试”按钮
现在面板就会变成这样
5.点击下拉框选择自己要调试的配置名称 6.选择要调试的程序后点击旁边的绿色小三角运行项目 7.项目启动后在项目中任意想调试的地方的代码序号前面点击添加断点方法如下图 8.可以在侧边查看所有断点 9.当有代码进入断点处在侧边将显示当前各变量值在上方可以通过断点相关操作继续、逐过程执行后续流程 10.以上就是调试过程结束调试点击结束按钮即可
