Web开发常规调试方法与常见问题分析

一、Web项目基本原理

现在的web项目大都已经前后端独立开发与部署。

前后端独立开发，一般是前端与后端通过web接口(常见的有RESTful与websocket)文档进行交流。前端开发人员先更具业务需求与实际原型进行ui的编程实现与事件的设计，并通过web接口进行业务数据的增删改查。后端开发人员根据定义的接口文档，实现业务数据的计算与增删改查，并对持久化的数据（一般保存在数据库里）进行操作。

前后端独立部署，前端项目均为html5/css/javascript/图片等静态资源，只需要web服务器就可以部署运行。常用的web服务器有apache与nginx。后端开发人员则只需要把接口服务发布到应用服务器，并正确连接数据库。常用的java的应用服务器有tomcat、jetty等。

对了，在此声明下，这里所说的前端，并不只是pc站的html页面，也包括微网站、微信小程序、APP应用等。

二、常规调试方法

根据上面的分工，可以明显地web开发中遇到的问题分为：前端实现问题，接口调用问题，接口实现问题。

a) 前端实现问题

前端实现问题是指，前端在调用接口前或者调用接口后，业务逻辑错误或者程序错误造成的系统用户交互异常。针对不用的前端，有不同的调试工具。

Pc站与微网站可以使用chrome（推荐）或者firefox的开发者工具进行调试。

微信小程序与公众号可以使用微信官方开发者工具进行调试。

APP使用开发环境的真机联调进行调试。

b) 接口调用问题

接口调用问题，多为前端调用接口错误或者接口本身存在bug引起的，无法获取前端人员预期的返回结果。

在开发环境中，可以使用上述的工具进行调试。在生产环境中进行故障排查是，pc站与微网站还可以通过pc浏览器进行故障分析。但公众号、小程序、APP需要通过charles等抓包工具进行分析。

如果没有接口调用的数据包，则前端程序存在问题；

如果接口的请求参数与请求头信息存在错误，则前端调用接口使用错误；

如果接口的响应参数与响应头信息存在错误，则接口实现存在问题；

如果接口调用正常，则前端程序对数据结果处理存在问题。

c) 接口实现问题

接口实现问题，多为后端开发人员没有根据正确的请求参数返回正确的响应结果。多由逻辑错误、数据持久化处理错误与系统级错误引起的。

在开发时可以通过断点跟踪就行分析。生成环境需要通过分析系统日志或者程序的日志进行分析。

三、常见问题分析

在以上几大类问题中，有些尤为突出，下面进行详细分析。

a) 浏览器兼容问题

i. 低版本浏览器的兼容问题

说到低版本浏览器，不得不诟病IE9及其以下的老爷们。这些落后的浏览器已经被官方废弃，却在中国尚存大量的用户群体。而且“国”字号的浏览器们也任然使用这些内核。

对于这个问题，尽量与客户商量，放弃低版本浏览器，在用低版本浏览器访问网站时，提示现在高版本浏览器，并提供下载地址。

IE9及以下存在跨域访问问题；

IE7及以下存在ajax使用的问题；

IE7及以下还存在css3、javascript对象缺失等问题。

ii. Html5新特性的兼容问题

Html5的一些新特性如webrtc、webGL等新特性，即使在新版浏览器中也存在兼容问题。响应技术尚未完全标准化，选择一个靠谱的库很重要。

b) 字体库跨域问题

字体跨域问题，是html页面与css文件（字体库的引入是在css中配置的）不在同一个域下造成的。

解决办法就是修改web服务器（apache或者nginx）的配置，允许字体库文件的跨域访问。或者所有静态文件都在一个域下访问。

c) 接口调用跨域问题

i. 普通跨域问题

由于前端文件与后端接口服务独立部署，跨域问题尤为突出。Websocket接口还好些，本身就解决了跨域访问的问题；RESTful的使用需要处理下头信息，允许跨域访问（设置Access-Control-Allow-Origin的值，如果省事，可以设置为*，但为了防止接口被滥用，建议配置具体的域规则）。

ii. 伪跨域问题

所谓伪跨域，是指后端框架已经支持跨域访问，但由于业务代码异常或者应用服务器异常，返回的响应信息不符合预期的结果，造成浏览器提示跨域问题。

这个问题，最好使用抓包工具，分析响应参数与响应头信息是否正确。并及时解决服务器或者程序的问题。

iii. 低版本浏览器的跨域问题

好吧，又是低版本浏览器。IE9及以下的浏览器，存在跨域的问题（本身也不支持websocket）。对于这个问题，前人使用的通常是jsonp的方式，但jsonp使用的是get方式，明显不兼容RESTful的规则。如果使用jsonp，需要前端与后端做些调整。

仅仅为了几个老爷级别浏览器，改动太多代码就不值当了。不是跨域吗？那就让他们一个域吧。Web服务器（apache或者nginx）除了提供web服务外，还有强大的代理功能，把其他域的接口服务路径代理为与页面同域的路径并不是件复杂的事。