(页面- 点击需要调试的具体方法的图标- f12- 源代码(Source)- 点一下html后缀的页面标志 -右边出现html代码 -代码里面点一下需要调试的变量的那一行左侧 -断点添加完成之后，F5刷新浏览器，可以看到代码执行到断点位置停了下来。光标放在变量名上，可以显示出变量值通过按钮进入下一步)image.png

1.介绍的过程还是以一个测试例子来演示，这样更直观也更容易理解
谷歌浏览器打开一个测试的html文件，里面包含简单的js代码（页面）

2.按F12打开网页调试工具，默认打开的是Elements，显示的是网页标签元素，如下图
注意使用的是谷歌浏览器，打开Sources,找到对应的html文件，
image.png
3.在js代码文件左侧栏单击可以添加断点，再点击可以移除断点
image.png
4.断点添加完成之后，F5刷新浏览器，可以看到代码执行到断点位置停了下来。光标放在变量名上，可以显示出变量值
通过按钮进入下一步
image.png
image.png

后端断点调试

编译时异常点不出来,自己看出来然后修改,用debug方式运行, 不要在方法上,或者类上打断点,在方法的属性里面打,括号里面是原始数据(原始对象,数据库里面的原始东西),元数据对象处理器(往mapper里面添加数据 )处理公共字段自动填充(不能用session,session只能在web层顶多到controller层,因为不属于三层架,只能用元数据对象处理器),同一个线程只能有一个变量,其中Mybatis Plus公共字段自动填充,比如

image.png

image.png
image.png

运行时异常才可以点debug,先看后台的控制器显示哪里错误(不具体的位置),然后判断具体哪里错误,再在那个方法上的具体步骤或者方法上点debug,

然后根据这个方法到前端页面去找相应的东西,然后前端运行完之后再去后端控制台左下面的Debugger,

方法属性上变量名点或者下面也会出现(但要展开),然后点下一步,进入下一步,跳出下一步等小箭头样子的图标,上面的代码界面会显示对应出出来的结果显示,找到错误的地方,修改就行了,

最后整个放行就是最左边的绿色右粗箭头,点一下就放行了,不点的话,前端页面就不会动了,一直是那个界面.

1.方法上点debug

image.png

2.点击对应后台方法的前端按钮

image.png

3.进去之后,后端debug调试就变动了(再下一步,或者进入跳出,观察后端的上面代码显示,上面的代码界面会显示对应出出来的结果显示,)

image.png

image.png

4.点击放行之前,前端页面才会动(返回到首页登录界面)

image.png