Web调试常用操作

在web应用开发中，我们会遇到各种各样不同的错误，使用debug调试会使开发工作更加有效率并使逻辑更加清晰。而且，调试工具也是一个非常好的学习工具，能让我们更好的观察运行过程和中间结果，这对于处于学习技术的我们理解一些抽象的概念是非常有好处的。

在web开发中，分为前端和后端。

一、前端

首先，介绍关于前端调试。

关于前端调试，我们分为dom元素、css样式、javascript，这里重点是关于javascript的调试。

一般web项目开发者最常用的浏览器是Chrome和Firefox 这两个浏览器，本次主要基于Chrome的开发者工具进行调试介绍。

通过，在chrome浏览器中按快捷键F12或者ctrl+shift+i。

  

关于DOM元素调试

 

 

在开发者工具中Elements中我们可以看到页面中详细的HTML标签，在右侧还可以看到标签的css样式与其在页面中的大小间距等。

对于dom元素来说，我们可以通过点击其标签来在浏览视图中查看到元素的位置，这对于编写布局很有帮助，有时候编写复杂的DIV嵌套布局会出现排版元素丢失等一系列难以改正的错误，通过开发者工具我们能够快速查看其中的位置。

 

 

对于错误排版嵌套时，我们可以

 

右键标签元素，会出现如上图中的菜单，根据菜单内容有，添加属性，编辑属性，作为html编辑，删除元素，复制，隐藏元素等等。

通过开发者工具我们可以在其中修改参数，并且通过删除或隐藏来调整其中的布局，对于前端开发是有很大帮助，还可以删除其中多余元素。不过在其中修改并不能修改页面的原文件，不过修改后的成果可以通过ctrl+s来进行另存为。

 

关于css样式调整

 

对于css样式调整，chrome里开发者工具也提供了便利的调试手段，我们选中某一个带有css的标签，在其右侧会出现它的css样式

 

 

我们可以在其中对css样式进行修改，对属性的调整，以便达到所需的标准和要求。

 

关于javascript调试

Javascript调试是一个重点，在学习javascript时，刚开始因为语法不规范问题经常会遇到，无法达到自己想要的结果。

 

 

通过开发者工具，我们可以在控制台看到我们出现错误的语句，和其出错的原因。

Javascript也提供调试的语句，debugger 语句用于停止执行 JavaScript，并调用 (如果可用) 调试函数。

使用 debugger 语句类似于在代码中设置断点。

对于javascript调试，debugger语句执行时，会暂停下面语句的执行，然后我们可以用开发者工具的这些按钮来进行，按顺序分别是

1、停止断点调试

2、不跳入函数中去，继续执行下一行代码（F10）

3、跳入函数中去（F11）

4、从执行的函数中跳出

5、禁用所有的断点，不做任何调试

6、程序运行时遇到异常时是否中断的开关

 

在按钮下面，这些面板可以监控javascript中变量的值变化，我们可以一步一步的观察其变化，在watch面板中，我们可以添加自己想要观察的变量。

在开发者工具中我们也可以点击行号进行断点设置，断点会出现在右侧。

这是通过断点，我们还可以在控制台输出信息来看，使用console.log()可以在控制台输出。

还可以通过alert（）语句来查看需要的信息。

 

二、后端

前端调试介绍完了，开始介绍后端调试。对于后端调试，我个人认为调试后端就是调试基本的java程序。对于后端调试我们基于intellj idea 集成开发环境来进行。

我们先来调试一个java程序，来清楚如何使用intellj idea 的调试方法。

在左侧行号出点击可以出现红色断点，然后我们在点击右上角运行三角箭头右边的小虫子，进入调试界面。

调试界面会直接运行你的程序到断点处，我们可以看出，在代码界面中，变量后面会出现当前的值。而在下方调试区，也可以看到自己变量的值。

主要是这几个按钮。

 

我们在运行中也可以找到

这些是经常会用到的。依次是

Step Over (F8)：步过，一行一行地往下走，如果这一行上有方法不会进入方法。

Step Into (F7)：步入，如果当前行有方法，可以进入方法内部，一般用于进入自定义方法内，不会进入官方类库的方法。

Force Step Into (Alt + Shift + F7)：强制步入，能进入任何方法，查看底层源码的时候可以用这个进入官方类库的方法。

Step Out (Shift + F8)：步出，从步入的方法内退出到方法调用处，此时方法已执行完毕，只是还没有完成赋值。

在Variables区，右键会弹出如上图菜单，我们可以使用其功能，添加需要观察的变量，改变变量值加快调试进度。

 

然后，再介绍一下

在应用运行的时升级软件，无需重新启动的方式有两种，热部署和热加载。

对于Java应用程序来说，热部署就是在服务器运行时重新部署项目，热加载即在在运行时重新加载class，从而升级应用。

在IDEA中，设置热部署热加载，在Edit configurations中

调整tomcat的。

 

在后端调试中，IDEA调试功能会更加突出。

我们可以在调试工具里清楚的看到，传值与代理等参数，按照一步一步调试有利于理解其中的流程。

还有response、request等在不同时期的不同值的变化。

 

在chrome中，我们也可以查看此属性

 

而在后端调试中，左侧的工具栏也可以方便调试。

从上向下依次是：

Rerun 'xxxx'：重新运行程序，会关闭服务后重新启动程序。

Update 'tech' application (Ctrl + F5)：更新程序，一般在你的代码有改动后可执行这个功能。

Resume Program (F9)：恢复程序，

Pause Program：暂停程序，启用Debug。

Stop 'xxx' (Ctrl + F2)：连续按两下，关闭程序。

View Breakpoints (Ctrl + Shift + F8)：查看所有断点。

 

在一个就是使用外部工具，这里就以postman为例。

使用postman发送请求我们可以获得结果一些参数。也可以利用postman来发出带数据的请求。

三、总结

上述介绍的只是一部分基础的调试，一个合格的开发人员应该熟练掌握调试的技巧，以上功能希望大家在开发时，经常使用。通过学习调试，也发现以前对于编写web应用中，自己的错误和因小问题而浪费的时间，引以为鉴。