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

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

最近有一个项目使用了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.以上就是调试过程,结束调试点击结束按钮即可

在这里插入图片描述

相关文章:

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

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

《SeTformer Is What You Need for Vision and Language》

会议:AAAI 年份:2024 论文:DDAE: Towards Deep Dynamic Vision BERT Pretraining - AMinerhttps://www.aminer.cn/pub/6602613613fb2c6cf6c387c2/ddae-towards-deep-dynamic-vision-bert-pretraining 摘要 这篇论文介绍了一种新型的变换器…...

[保姆级教程]uniapp安装使用uViewUI教程

文章目录 创建 UniApp 项目下载uView UI下载安装方式步骤 1: 安装 uView UI步骤 2: 查看uView UI是否下载成功步骤 3: 引入 uView 主 JS 库步骤 4: 引入 uView 的全局 SCSS 主题文件步骤 5: 引入 uView 基础样式步骤 6: 配置 easycom 组件模式注意事项 NPM方式步骤 1: 安装 uVi…...

网络安全法规对企业做等保有哪些具体规定?

网络安全法规对企业做等保的具体规定 根据《中华人民共和国网络安全法》,企业作为网络运营者,需要履行网络安全等级保护制度的相关义务,确保网络安全和数据保护。具体规定包括: 网络安全等级保护制度:企业应根据网络安…...

Java开发中超好用Orika属性映射工具

Orika属性映射工具 引入pom依赖 <dependency><groupId>ma.glasnost.orika</groupId><artifactId>orika-core</artifactId><version>1.5.4</version></dependency>上干货 封装的工具类:OriUtilsimport ma.glasnost.orika.Map…...

qt初入门8:下拉框,输入框模糊查询,提示简单了解 (借助QCompleter)

实现一个简单的模糊查询的逻辑&#xff0c;输入框能提示相关项。 主要借助qt的QCompleter 类&#xff08; Qt 框架中提供的一个用于自动补全和模糊搜索的类&#xff09;&#xff0c;结合一些控件&#xff0c;比如QComboBox和QLineEdit&#xff0c;实现模糊查询的功能。 1&…...

【qt】VS中如何配置Qt环境

https://download.qt.io/official_releases/vsaddin/ 首先需要下载一下vsaddin,上面的是下载的网站. 下载的时候可能会出现下图的情况 说明你下的vsaddin和您的VS版本不匹配,所以你可以多下几个其他版本的vsAddin,一般都是和你VS版本相匹配的才可以,如Vs2022,那就试试vsaddin2…...

对于相同网段的IP,部分无法ping通问题

现象1&#xff1a;在Linux上执行 ping 192.168.1.232&#xff0c;无法ping通 分析1&#xff1a;使用ifconfig查询&#xff0c;联网使用eth0口&#xff0c;只能上网192.168.10.xx网段&#xff0c;需要增加网段 解决方法&#xff1a;使用ip addr 查询&#xff0c;本身只具备10网…...

Unity发布XR中用于worldbuilding的全新电子书

通过身临其境的虚拟领域开始旅程&#xff0c;在维度之间传送&#xff0c;或将数字奇迹与现实世界融合——虚拟现实(VR)和混合现实(MR)的千万种可能性将邀请创作者把他们的想象力带入生活。 Unity发布的最新版综合指南将帮助有抱负的创作者和经验丰富的开发者深入研究和理解构建…...

Vue3相比于Vue2进行了哪些更新

1、响应式原理 vue2 vue2中采用 defineProperty 来劫持整个对象&#xff0c;然后进行深度遍历所有属性&#xff0c;给每个属性添加getter和setter&#xff0c;结合发布订阅模式实现响应式。 存在的问题&#xff1a; 检测不到对象属性的添加和删除数组API方法无法监听到需要对…...

Unity UGUI 之 Slider

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 1.Slider是什么 滑块&#xff0c;由三部分组成&#xff1a;背景 填充条 手柄 填充条就是…...

这7款高效爬虫工具软件,非常实用!

在当今数据驱动的时代&#xff0c;自动化爬虫工具和软件成为了许多企业和个人获取数据的重要手段。这里会介绍6款功能强大、操作简便的自动化爬虫工具&#xff0c;用好了可以更高效地进行数据采集。 1. 八爪鱼采集器 八爪鱼是一款功能强大的桌面端爬虫软件&#xff0c;主打可…...

【OJ】二叉树相关OJ题

✨✨欢迎大家来到Celia的博客✨✨ &#x1f389;&#x1f389;创作不易&#xff0c;请点赞关注&#xff0c;多多支持哦&#x1f389;&#x1f389; 所属专栏&#xff1a;OJ题 个人主页&#xff1a;Celias blog~ 目录 ​编辑 单值二叉树 题目描述 OJ-单值二叉树 解题思路 …...

Blender中保存透明图片

在Blender中保存透明图片&#xff0c;主要是通过在渲染设置中调整背景透明度&#xff0c;并选择合适的文件格式来保存图像。以下是一个详细的步骤指南&#xff1a; 一、设置渲染属性 打开Blender并加载你想要渲染的模型。在右侧的属性编辑器中&#xff0c;找到并点击“渲染属…...

MySQL之索引优化

1、在进行查询时&#xff0c;索引列不能是表达式的一部分&#xff0c;也不能是函数的参数&#xff0c;否则无法使用索引 例如下面的查询不能使用 actor_id 列的索引&#xff1a; #这是错误的 SELECT actor_id FROM sakila.actor WHERE actor_id 1 5; 优化方式&#xff1a;…...

Spring Boot 与 Amazon S3:快速上传与下载文件的完整指南

概要 在将 Spring Boot 更新到 3 系列时&#xff0c;由于 javax 需要被替换为 jakarta&#xff0c;因此原先依赖于 javax 的 spring-cloud-starter-aws1 将无法使用&#xff08;虽然在我本地环境中仍然可以正常工作&#xff09;。为了确保兼容性&#xff0c;我将依赖关系更改为…...

细节剖析:HTTP与HTTPS在安全性、性能等方面的不同!

HTTPS是现代互联网通信的重要基石&#xff0c;通过加密通信、身份验证和数据完整性保护&#xff0c;为数十亿用户提供了安全可靠的互联网体验。 小编整理了2GB程序员相关资料&#xff0c;关注微信公众号“程序员Style”回复“程序员”免费领取&#xff01; 1、介绍 随着 HTT…...

MySQL面试篇章——MySQL索引

文章目录 MySQL 索引索引分类索引创建和删除索引的执行过程explain 查看执行计划explain 结果字段分析 索引的底层实现原理B-树B树哈希索引 聚集和非聚集索引MyISAM&#xff08;\*.MYD&#xff0c;*.MYI&#xff09;主键索引辅助索引&#xff08;二级索引&#xff09; InnoDB&a…...

WSL 2 Oracle Linux 9.1 安装配置

文章目录 环境使用体验安装 Oracle Linux 9.1修改默认存储路径默认 root 用户登录启用 systemd启用 SSH 连接WSL 无法 ping 通宿主机和域名WSL 使用主机代理&#xff08;测试通过&#xff09;WSL 常用命令 环境 OS&#xff1a;Win11 24H2 (OS 内部版本26120.1252) wsl --versio…...

MySQL日志文件详解

MySQL中的日志文件是MySQL数据库系统的重要组成部分&#xff0c;它们记录了数据库的运行情况、用户操作、错误信息等&#xff0c;对于数据库的维护、优化、故障排查和恢复都具有重要意义。以下是MySQL中几种主要日志文件的详解&#xff1a; 1. 二进制日志&#xff08;Binary L…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...