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应用中，自己的错误和因小问题而浪费的时间，引以为鉴。