前端debug

前端debug

1）第一步开启浏览器开发者模式(3个方法)

​ 方法一：

方法二：

​ 当前页面，右键“检查”

方法三：直接“F12”

2)前端debug，重要菜单

菜单介绍
	Elements 页面资源(可用箭头选中页面的元素,显示对应代码)
	Console  浏览器控制台可以在js代码中通过console.log打印日志；检查前端代码错误信息
	Sources  页面相关资源 css html js image；debug主要在该目录下进行
	Network  发送的请求（请求头，请求体，响应结果，响应时间）；通过控制Online中设置，模拟网速较慢或断网效果
	Application 检查cookie信息

1,Elements

2,console

效果:

3,sources

​ 下面的page，在js代码打断点.F8,跳到下一个断点;F10,下一步

4,Network

​ 看请求的各种文件,调网页的响应速度

​ 下面的XHR下有所有的请求头,请求行,响应,Cookie等;

5.Application

g)

3)在浏览器中，在Sources目录下，动态修改“js文件”中的代码(必须纯js文件)，并且修改完成后，可以ctrl+s保存代码，修改后的代码直接生效；html中嵌套的js代码是不允许修改，修改完也不能直接生效

注意：
1.js代码修改后，不要刷新页面，刷新页面修改代码会丢失
2.只能修改js文件(如:index.js)中代码，如果js代码存在于页面(html文件中)，可以debug但是不允许修改

一,maven项目结构

1,.idea:
包含了被人(以前)打开这个项目的设置或者配置;ctrl+alt+s或者在maven的配置修改为自己的maven配置(maven配置,修改仓库和setting.xml)
2,.gitignore:
定义需要忽略的文件.(避免不需要的文件上传)
3:target:
编译后的文件.

Maven还有一个坑:

​ (其实就是说maven系统变量设置和idea设置的maven不同时.会存在两个maven)

环境变量:意义就是一个可执行的文件,配置后不用打目录就可执行命令.MAVEN_HOME
1,编译:用Lifecycle下面的;使用的是setting下Maven设置的maven
2,上面m的标志的命令行的clean会优先用MAVEN_HOME的maven(系统变量设置的)

我自己的是配置的同一个(所以不存在上面问题)

三,:在请求里加一个字段.

​ (不了解业务...)

1,ctrl+shift+r或者ctrl+shift+f:输入路径找到对应的代码

2,看方法的实现类:ctrl+b

3,在实体类加上字段

加上没效果怎么办:

​ 用debug工具调试

​ 1,F8一行一行往下走,F9放开断点到下一个断点;在变量上alt+F8查看变量里的内容;

​ 2,蓝色的条在下一行时,上一行才执行完.

​ 3,检查到response里有添加的变量;但是前段没有;可能是字段放错地方了;

ctrl+N搜索所有;

四,其他idea使用技巧

寻找变量咋来的

ctrl+鼠标点击变量

alt+F7:当前被引用的部分全找出来

ctrl+alt+b看具体实现