web项目调试

 

web项目调试

web项目往往由前端和后台组成，涉及的内容和知识特别多，初学者由于对其运行机制理解不到位，同时没有掌握恰当的调试方法，当项目出现问题时就比较茫然、无从下手。提高调试能力对于程序员来讲是至关重要，是成为一个合格程序员的必经之路。

一、总体思路

（1）理解清楚web项目运行基本机制，理清程序运行轨迹；

（2）掌握Java代码调试方法和技巧；

（3）掌握浏览器前端调试方法和技巧；

（4）基于以上方法，实践并总结，积累调试经验，提高调试的效率。

 

二、web项目运行基本机制

三如何界定前台/后台问题

当一个涉及前后台的功能（甚至是整个页面）没有达到预期，首先要界定是前台还是后台的问题。首先是理清思路：

（1）确认前台是否正确发出了请求

这可以和接口文档进行比对。如果请求有问题那么前台肯定是有问题的，没有问题继续下一步。

（2）确认后台是否正确返回了结果

也是需要和接口文档进行比对，如果返回的结果有问题那么后台肯定是有问题的，没有问题那么就是前端的处理反馈逻辑有问题。

通过以上步骤，可以快速界定是前台还是后台出问题了，而且还可以进一步确定是前端的发送请求有问题还是处理反馈有问题。

查看发送的请求和后台反馈结果的方法是浏览器抓包，这里以Google浏览器为例，其它浏览器类似。

（1）打开浏览器开发者工具

在浏览器中按F12打开开发者工具

（2）查看发送的请求

a. 切换到network标签页

b. 执行访问后台的操作

此处以登录为例，输入账号、密码，单击登录按钮。此时就可以观察到发送的请求

单击这个请求，可以在Headers标签页查看详细信息。 

如果是post方式，查看的请求是这样的 

c. 查看后台反馈结果

在Response标签页中可以查看后台反馈结果。

 

四、前端调试

如果已经确定前端有问题，可以通过调试进一步确定问题。

（1）语法错误

如果有语法错误，在Console标签页中可以查看错误提示和位置

 

 此处是提示url没有定义，原因是定义的变量叫“url1”，而使用的变量叫“url”。

 

 

 

（2）逻辑错误

遇到逻辑错误就需要借助于断点、查看表达式调试方法定位错误了

（1）打开需调试的文件

切换到Sources标签页、打开文件

 

 

 

 

（2）设置断点 

 

 

（3）运行前端代码

运行前端代码与Java代码有所不同，前端代码是在浏览器中运行。因为这里想调试的代码是当页面加载完成后自动执行的，所以刷新页面即可执行这些代码。当执行至断点处，程序暂停。

 上图中的蓝色框就是标记即将要执行的代码，然后就可以像调试Java代码一样借助于工具进行调试

 

上图中红色框中的四个按钮分别是：

resume：继续执行后续代码，直到遇到下一个断点，快捷键是F8

step over：继续下一条，如果是函数调用也当做一条普通代码执行，即不查看函数内部执行过程，快捷键是F10。

step into：也是继续下一条，如果是函数调用会进入函数内部查看执行过程，快捷键是F11。

step out：跳出函数，直接到函数调用处，快捷键是Shift+F11。

如果现在想查看当前代码中断点处函数调用（该函数在cookie.js文件中定义）的详细过程，可以使用F11，执行之后可以看到程序调到cookie.js中的getCookie函数内部了。

（4）查看表达式

可以想临时查看一下变量或者表达式的值，可以按下图方式操作。

如果需要特别关注变量或者表达式的值，也可以按下图步骤添加到watch窗口。