对于了解代码流程走向的学习

最新推荐文章于 2024-07-22 14:30:36 发布

世界总是这么简单就好了

最新推荐文章于 2024-07-22 14:30:36 发布

阅读量414

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42770281/article/details/86473842

对于了解代码流程走向的学习

- F12的妙用
- IDEA Debug的使用

我这一个月做的最多的东西就是看别人的代码，基于别人的代码基础上修改需求。因此有些小技巧这里分享一下。

F12的妙用

我使用的是Google浏览器，里面的开发者工具功能其实还蛮多、蛮强大的。
首先是这张图你可以看到这个页面的结构以及他所引用的js、css还有各种文件的版本和地址。你也可以通过右边的styles对页面进行微调，当有些位置或颜色需要稍作调整时，在代码上无法直观体现时，就可以通过这种方式慢慢调整，然后在到你的代码中去把调整的数值改一下就好了。

接着console是控制台的意思，这里可以看到页面一些报错信息，还有你做些测试的调试可以在这里输出，许多人喜欢用alert比较直观，但是我看到某篇文章说过，最好还是用console.log比较好，至于什么原因我忘记了哈哈。
在这里插入图片描述

然后是这个sources你可以查看到你现在所处的页面的jsp文件，并且可以进行debug调试，这个页面可以是程序员查看前端数据走向必不可少的功能了。
在这里插入图片描述

Network你可以在这里知道你的数据传输是否成功。并且你可以在这里看到这个页面中你都调用了哪些哪些类、文件以及具体的方法。我最经常就是查看这里的信息，来找到我所需调试的方法。

在这里插入图片描述

Sources 和 Network 这两个是前后端代码调试用的最多的功能。他们可以让你知道你前端是怎么接收后端数据的，并且是怎么对数据进行渲染的。同时也可以知道你后端数据调用了什么方法，传输了什么数据过来。

IDEA Debug的使用

后端数据的走向，多半是通过debug来查看的。以下是我通过别人文章整理的一些debug的使用方法

在Intellij IDEA中使用Debug
Debug用来追踪代码的运行流程，通常在程序运行过程中出现异常，启用Debug模式可以分析定位异常发生的位置，以及在运行过程中参数的变化。通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方框架的源码。
而我这次学习ieda的debug的功能其一是想对idea这个开发工具更深入的了解，其二也是最重要的一点，我想通过debug来学习我们公司的程序运行的流程，了解整个代码的模式和入口等。
首先看下IDEA中Debug模式下的界面。
　　如下是在IDEA中启动Debug模式，进入断点后的界面，我这里是Windows，可能和Mac的图标等会有些不一样。就简单说下图中标注的8个地方：
　　① 以Debug模式启动服务，左边的一个按钮则是以Run模式启动。在开发中，我一般会直接启动Debug模式，方便随时调试代码。
　　② 断点：在左边行号栏单击左键，或者快捷键Ctrl+F8 打上/取消断点，断点行的颜色可自己去设置。
　　③ Debug窗口：访问请求到达第一个断点后，会自动激活Debug窗口。如果没有自动激活，可以去设置里设置，如图1.2。
　　④ 调试按钮：一共有8个按钮，调试的主要功能就对应着这几个按钮，鼠标悬停在按钮上可以查看对应的快捷键。在菜单栏Run里可以找到同样的对应的功能，如图1.4。
　　⑤ 服务按钮：可以在这里关闭/启动服务，设置断点等。
　　⑥ 方法调用栈：这里显示了该线程调试所经过的所有方法，勾选右上角的[Show All Frames]按钮，就不会显示其它类库的方法了，否则这里会有一大堆的方法。
　　⑦ Variables：在变量区可以查看当前断点之前的当前方法内的变量。
　　⑧ Watches：查看变量，可以将Variables区中的变量拖到Watches中查看

这里的第⑥点我觉得挺有用的，避免其他类库方法过于繁杂，导致自己看花眼，
至于第⑧点我的idea没显示出来需要去了解一下。
在这里插入图片描述

如果你的IDEA底部没有显示工具栏或状态栏，可以在View里打开，显示出工具栏会方便我们使用。可以自己去尝试下这四个选项。

在这里插入图片描述

Debug基本用法&快捷键
1、首先说第一组按钮，共8个按钮，从左到右依次如下：
在这里插入图片描述

Show Execution Point (Alt + F10)：如果你的光标在其它行或其它页面，点击这个按钮可跳转到当前代码执行的行。
Step Over (F8)：步过，一行一行地往下走，如果这一行上有方法不会进入方法。
Step Into (F7)：步入，如果当前行有方法，可以进入方法内部，一般用于进入自定义方法内，不会进入官方类库的方法，如第25行的put方法。
Force Step Into (Alt + Shift + F7)：强制步入，能进入任何方法，查看底层源码的时候可以用这个进入官方类库的方法。
Step Out (Shift + F8)：步出，从步入的方法内退出到方法调用处，此时方法已执行完毕，只是还没有完成赋值。
Drop Frame (默认无)：回退断点，后面章节详细说明。
Run to Cursor (Alt + F9)：运行到光标处，你可以将光标定位到你需要查看的那一行，然后使用这个功能，代码会运行至光标行，而不需要打断点。
Evaluate Expression (Alt + F8)：计算表达式，后面章节详细说明。

2、第二组按钮，共7个按钮，从上到下依次如下：
在这里插入图片描述
前三个按钮比较实用，特别是二、三按钮

Rerun ‘xxxx’：重新运行程序，会关闭服务后重新启动程序。
Update ‘tech’ application (Ctrl + F5)：更新程序，一般在你的代码有改动后可执行这个功能。而这个功能对应的操作则是在服务配置里
Resume Program (F9)：恢复程序，比如，你在第20行和25行有两个断点，当前运行至第20行，按F9，则运行到下一个断点(即第25行)，再按F9，则运行完整个流程，因为后面已经没有断点了。
Pause Program：暂停程序，启用Debug。目前没发现具体用法。
Stop ‘xxx’ (Ctrl + F2)：连续按两下，关闭程序。有时候你会发现关闭服务再启动时，报端口被占用，这是因为没完全关闭服务的原因，你就需要查杀所有JVM进程了。
View Breakpoints (Ctrl + Shift + F8)：查看所有断点，后面章节会涉及到。
Mute Breakpoints：哑的断点，选择这个后，所有断点变为灰色，断点失效，按F9则可以直接运行完程序。再次点击，断点变为红色，有效。如果只想使某一个断点失效，可以在断点上右键取消Enabled，如图2.4，则该行断点失效。

Idea的tomcat或者是其他服务器应该都可以使用热部署方式，避免了每次改动代码就要重新启动一次tomcat，这样减少不少时间
在这里插入图片描述