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服务外,还有强大的代理功能,把其他域的接口服务路径代理为与页面同域的路径并不是件复杂的事。
转载于:https://www.cnblogs.com/zytrue/p/8497066.html
Web开发常规调试方法与常见问题分析相关推荐
- ZXR10 1809 路由器 1800开启WEB配置界面调试方法
ZXR10 1809 路由器 1800开启WEB配置界面调试方法 中兴ZXR10 1800 1809路由器,昨天配置时发现了个命令可以实现WEB配置,以前一直用超级终端配置. WEB配置相比超级终端 ...
- 《Python Web开发 - 测试驱动方法》阅后感
这本书的原名是叫<Test-Driven Development with Python>,小标题是 Obey the Testing Goat: Using Django, Seleni ...
- 《Python Web开发 - 测试驱动方法》
这本书的原名是叫<Test-Driven Development with Python>,小标题是 Obey the Testing Goat: Using Django, Seleni ...
- Web 开发 Browser 调试大全
Summary 一下.Browser很多,对应的调试插件有很多. 为了在茫茫中,锁定一盏或几盏明灯.这里总结一下 1. Firebug -- for Firefox 2. IE Developer T ...
- [Phonegap+Sencha Touch] 移动开发71 Sencha项目开发、调试方法建议
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50171151 一.开发时的调试 方法1:不开启任何服务器 因为Sencha项目在开发状 ...
- 瑞芯微读取寄存器_经验-瑞芯微RK3399嵌入式开发板调试方法-电路城论坛 - 电子工程师学习交流园地...
RK3399的CPU采用big.LITTLE大小核架构,双Cortex-A72大核+四Cortex-A53小核结构,对整数.浮点.内存等作了大幅优化,在整体性能.功耗及核心面积三个方面都具革命性提升. ...
- Flask Web开发--1.多租户SPC质量分析系统设计
更多创客作品,请关注笔者网站园丁鸟,搜集全球极具创意,且有价值的创客作品 前言 今年在全民防疫的情况下,春节基本上除了购买必要的生活必须品,基本上没有出过门,趁着这个1个月的时间把最近工作中学到有关S ...
- web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践 为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
- VS Code 新扩展,面向 Web 开发人员调试 DOM
微软项目经理 Paul Gildea 发博说,他们针对 Web 开发人员,发布了一个新的 VS Code 扩展-- Elements for Microsoft Edge,这个扩展还是一个预览版,目 ...
最新文章
- Java HashMap和Hashtable的区别
- 开发人员职位:对编程语言Python的需求明显下降
- 定时任务调度系统设计
- 解析 | K8S之网络插件exec
- python字符串逆序输出代码_一行代码实现字符串逆序输出
- 对html2canvas的研究
- 64位处理器_电脑操作系统的32位和64位有什么区别
- html的表单标记格式,HTML表单标签
- 解决Maven的jar包冲突问题
- hbuilderx的快捷键整理pdf_47个电脑快捷键大全,让你工作提升100倍,一般人我不告诉他...
- html新浪微博页面练习,js实现新浪微博首页效果
- 6种常用的项目管理模式
- 鸿蒙系统能玩魔兽世界吗,魔兽世界TBC燃烧远征测试服,H英雄本的装备2小时内可以交易, 亲友们可以互相毛装备了...
- java通过poi读取excel中的日期类型
- python单词词典_Python自然语言处理学习笔记(42):5.3 使用Python字典将单词映射到属性...
- 云服务完整删除mysql
- 计算机给文件重命名快捷键,批量重命名文件 一个F2快捷键即可全部搞定
- C#:Krypton控件使用方法详解(第十六讲) ——kryptonCheckedListBox
- 输入两个正整数m和n,输出m到n之间每个整数的自然对数
- Screen coordinate and Client Coordinat