IDEA-前后端debug

最新推荐文章于 2023-08-30 10:04:38 发布
最新推荐文章于 2023-08-30 10:04:38 发布
阅读量3w 收藏 79
点赞数 28
分类专栏： 工具 文章标签： idea debug chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxfHaHaHa/article/details/68926080
版权

debug就是程序猿的利器，我现在讲讲怎么用IDEA进行debug

1.前台页面自动刷新

这里写图片描述

这里写图片描述
这里设置为update classes和resources之后，我们修改jsp文件，添加修改css、js文件，都不再需要重启tomcat，直接浏览器刷新就能看到效果了

2.后台debug

首先，我们以debug方式启动tomcat
这里写图片描述
然后在我们想要停住的地方打断点，就可以停在这里。打断点的方式就是在这一行的左侧鼠标点一下，出现这个小圆圈且中间是个勾，说明断点设置完成，当程序运行到这一步的时候，程序会停在这里
这里写图片描述
比如说我们现在把断点设置在处理post方法的这里，然后前台提交数据
这里写图片描述
然后idea就将运行停止在这一步，他会在变量后面自动显示这个变量的值，下面的watch窗口也可以看到
这里写图片描述
下面是一些快捷键操作，我们可以按f8一直下一步，然后想进入某个函数的话就f7进去，Shift+F8出来，然后用f9结束这次调试，重新回到前台页面

F8 下一步
F7 进入函数
Shift+F8 出去函数
F9 结束这次调试

这里写图片描述
还可以添加查看，就是你想观察哪个变量，在watch里添加即可，右键，new watch 添加查看
这里写图片描述
或者，右键，evaluate expression，执行结果
这里写图片描述
输入任何你想知道的表达式，执行即可知道结果
这里写图片描述
在程序出错的时候，我们可以很方便的用debug来看看哪里出错了，而且，debug还有一个好处，在debug模式中，你修改了java函数里面的内容、xml文件，可以不用重启tomcat，直接页面刷新就行，但是注意如果新加了java文件、修改了java函数的参数、函数的名字，这样 都是需要重启tomcat的
如图，出现这样的标志就是热部署失败，需要重启才行
这里写图片描述

3.浏览器js debug

前端jsp页面，在你想要进行deb的地方，写下debugger，注意，前端调试的是js
这里写图片描述
然后我用chrome f12打开调试模式，页面刷新，就会进入调试，他会停在我们写debugger的地方，并且变量也会显示他的值
这里写图片描述
快捷键

f10 下一步
f8 结束这次调试

这里写图片描述
还可以添加查看，就是你想观察哪个变量，在watch里添加即可
这里写图片描述

好了，大家自己去试一下，会有更多心得，如果我有什么讲的不对或者不够好的地方，欢迎提出来~

小啊小木头
关注
专栏目录
必先利其器之 IDEA 磨刀好杀猪
pizicai007的博客
06-22 6114
必先利其器之 IDEA 磨刀1. idea 的安装与激活1.1 idea 的安装1.2 idea 的激活2. idea 的常用设置2.1 JDK 设置2.2 MAVEN 设置2.3 字体大小设置2.4 自动导包设置2.5 显示行号设置2.6 Tab 页多行显示设置2.6 文件编码设置2.7 自动提示不区分大小写3. idea 的常用插件3.1 Material Theme UI3.2 codota3.3 Free Mybaties Plugin3.4 MybatiesX3.5 Mybaties Log Pl
IntelliJ IDEA开发必备常用配置（保姆级2024版本必备）
最新发布
weixin_43608968的博客
07-29 6181
idea2024版本常用配置荟萃
IDEA debug调试教程
Jack_joker的博客
04-20 2283
程序员必会debug调试
使用Visual Studio Code对Node.js进行断点调试
weixin_34348174的博客
04-16 247
在开发的过程中，几乎不可能一次性就能写出毫无破绽的程序，断点调试代码是一个普遍的需求。 作为前端开发工程师，以往我们开发的JavaScript程序都运行在浏览器端，利用Chrome提供的开发者工具就可以方便的进行源码断点调试。其步骤有四，详情不表，粗略概括如下： 打开Chrome开发者工具； 点击进入Sources标签页，在页面的左侧就...
在Intellij IDEA中使用Debug
热门推荐
weixin_30784501的博客
09-05 1万+
　　Debug用来追踪代码的运行流程，通常在程序运行过程中出现异常，启用Debug模式可以分析定位异常发生的位置，以及在运行过程中参数的变化。通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方框架的源码。 　　所以学习下如何在Intellij IDEA中使用好Debug，主要包括如下内容： 　　　　一、Debug开篇 　　　　二、基本用法&快捷键 　　　　三、变量查看 ...
学习笔记：关于前后端调试程序
hyqapple的博客
04-12 969
学习笔记：关于使用DevTools调试程序debugging添加断点Elementsconsole DevTools是谷歌浏览器自带的开发者调试工具。打开方法有快捷键f12或Ctrl + Shift + I或在页面点右键选择检查。掌握网页的调试方法对于开发大有帮助。 如图Devtools共有9个面板 Elements：在 Elements 面板中可以以 DOM 树的形式查看所有页面元素，同时也...
idea前端怎么用debug模式
zoupanpan1的博客
06-11 3673
方式一 前端页面设置Dubug 首先呢，在触发文件中添加debugger; 然后访问页面触发这个js文件中的函数方法，此时页面会变灰，并且在f12的弹出框中，会默认打开sources资源 这个时候，你可以看右边的提示信息 f10是一步一步执行，f8是一下执行完成 日常的调试过程，可能会需要。 console.log(); alert(); 这两个调试可能是频率非常之高的前端调试方法了吧。 方式二 可以设置在DOM node发生变化时触发断点 有时候你会发现DOM不受你的控制，自己会发生一些奇怪的变化，让你很
使用TomCat在idea写一个前后端学生项目04.12
04-16
在这个“使用TomCat在idea写一个前后端学生项目04.12”的教程中，我们将深入探讨如何在IntelliJ IDEA这个强大的Java开发环境中配置和运行一个基于TomCat服务器的前端后端分离的学生管理系统项目。以下是你需要了解的...
Springboot+vue后台管理系统-前后端分离数据传递
m0_54853146的博客
03-03 2194
零：最终实现图片展览： 一：前端项目搭建； 1:使用cmd下载vue： 2：npm install -g @vue/cli （如果安装过就不用啦） 3:vue create springboot-vue-demo(自己的名字)： 4： 5：将目标移动到第一个选项然后按回车到达下面这个界面，选择一个vue版本，我们这里选择vue3x 6：下一个界面依次按下： y in package.json y 这三个，第三个是是否保存当前配置可以按N 7： 进入： 退出打开idea去开启项目编写 二：前端框
mall商城前后端分离IDEA编写.zip
04-20
- 利用 IDEA 的 Debug 功能进行断点调试，查看程序运行状态。 9. **持续集成与部署** - 配置 Git 进行版本控制，确保代码安全。 - 使用 Jenkins、GitLab CI/CD 或者 GitHub Actions 实现自动化构建和部署。 ...
SpringBoot+vue前后端分离博客项目
weixin_46585492的博客
03-22 1452
SpringBoot+vue前后端分离博客项目 后端项目交作业了！！！
jeecg-boot项目前后端搭建以及相关配置
xly_xly_xly的博客
10-18 1237
jeecg-boot项目前后端搭建以及相关配置 后端项目 配置idea的maven，file-settings-输入maven，配置maven home path等信息，如下图，点击apply，点击ok 下载安装好git，打开Idea，点击File-Settings，搜索git，配置Path to Git executable 在Path to Git executable选择之前下载安装好的Git路径下的git.exe文件【Git-cmd-git.exe】 点击Test测试，会出现一个Git ve
前端的debug调试
zhou
10-26 1万+
  Debug，快速定位，，理顺逻辑，调试代码。看到后端使用Debug，总会露出羡慕的小眼神。于是手指轻跳，前端也有自己的Debug。如console.log，confirm，alert，Breakpoint等，在此备忘。   alert() ，confirm()，虽然也可以起到调试的作用，但是它适合传达信息的场景就是有限的，因为它会使甚至关闭窗口这样的操作无效化。而且alert的样式也依赖于浏览器的默认样式，并且只能显示文本，不适合自定义。总的来说就是阻塞页面加载，降低网页的性能与质量。   接下来的内容
后端调试的工具：浏览器开发者工具、Postman、Fiddler
sandalphon4869的博客
04-13 3833
文章目录一、Postman二、浏览器开发者工具 Postman用于调试后端接口管不管用。 浏览器开发者工具监测正式联调前后端时的过程信息 一、Postman 下载：https://www.postman.com/downloads/ 之后注册，注册不要傻等着，去邮箱点验证码。 教程：Postman 使用方法详解 json的基操就行： 二、浏览器开发者工具 Chrome浏览器：Ct...
IDEA中Debug技巧
旺仔的博客
08-30 1110
Debug用来追踪代码的运行流程，通常在程序运行过程中出现异常，启用模式可以分析定位异常所发生的位置，以及在运行过程中参数的变化。
IDEA-Debug方法详解
嘻哈熊的专栏
03-01 4665
作者：baojiangzhou http://www.cnblogs.com/chiangchou/ Debug 用来追踪代码的运行流程，通常在程序运行过程中出现异常，启用 Debug 模式可以分析定位异常发生的位置，以及在运行过程中参数的变化。通常我们也可以启用 Debug 模式来跟踪代码的运行流程去学习三方框架的源码。 在 Intellij IDEA 中使用好 Debug，主要包括如下内容： Debug 开篇 基本用法 & 快捷键 变量查看 计算表达式 智能步入 断点.
IDEA如何进行debug调试
m0_68903959的博客
09-23 711
IDEA如何进行debug调试
前台调试
旺仔
12-10 527
在本地访问的链接前添加view-source: ，即可查看当时显示的html与js代码。 view-source:http://localhost:8080/companyName/system.do?method=login
IDEA中如何使用debug调试项目 一步一步详细教程
诗诗的远方
05-18 5511
IDEA中如何使用debug调试项目 一步一步详细教程 喝水的鱼.2019-02-20 17:11:483764已收藏19 分类专栏：idea文章标签：ideajavadebug 目录 一、Debug开篇 二、基本用法&快捷键 三、变量查看 四、计算表达式 五、智能步入 六、断点条件设置 七、多线程调试 八、回退断点 九、中断Debug 十、附：JRebel激活 在现在的开发中，我们经常采用Debug来追踪代码的运行流程，通常在程序运行过程中出现...
idea后端开发jpa
11-29
JPA（Java Persistence API）是Java EE 5规范中的一部分，它为Java开发人员提供了一种对象/关系映射工具来管理Java应用程序中的关系数据。下面是使用JPA进行后端开发的步骤： 1.添加依赖：在Maven或Gradle中添加JPA依赖项，例如： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> ``` 2.配置数据源：在application.properties或application.yml文件中配置数据源，例如： ```yaml spring: datasource: url: jdbc:mysql://localhost:3306/mydatabase username: root password: root driver-class-name: com.mysql.jdbc.Driver ``` 3.创建实体类：创建一个Java类来表示数据库表中的行，例如： ```java @Entity @Table(name = "users") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(name = "name") private String name; @Column(name = "email") private String email; // getters and setters } ``` 4.创建Repository：创建一个接口来处理与实体类相关的数据库操作，例如： ```java @Repository public interface UserRepository extends JpaRepository<User, Long> { List<User> findByName(String name); } ``` 5.使用Repository：在服务类中使用Repository来处理数据库操作，例如： ```java @Service public class UserService { @Autowired private UserRepository userRepository; public List<User> getUsersByName(String name) { return userRepository.findByName(name); } } ``` 以上是使用JPA进行后端开发的基本步骤，当然还有很多其他的细节需要注意。如果您想深入了解JPA，请参考相关文档和教程。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值