注:本文内容较长且细节较多,建议先收藏再阅读,原文将在Github上维护与更新。
在HTTP接口开发与调试过程中,我们经常遇到以下类似的问题:
为什么本地环境接口可以调用成功,但放到手机上就跑不起来?
这个接口很复杂,内部调用了好几个其他接口,如何定位问题究竟出在哪一步?
后端开发还没有把接口提供好,前端开发任务无法推进……
「猫哥网络编程系列」最核心的任务便是向各位分享一个我从多年的前后端项目中总结而来的「万能」HTTP调试法,掌握并从网络编程原理上理解它,能让我们顺利定位并解决所有HTTP接口问题。由于该方法主要涉及到的知识点包括HTTP代理(Proxy)、编辑(Edit)与数据模拟(Mock),因此我称之为「HTTPPEM调试法」。
接下来,我们就针对前面提出的几个问题,详细讲解下PEM调试法的思路。
如何调试线上App中的H5页面?
「HTTPPEM调试法」之Proxy在上一期《猫哥网络编程系列:详解BAT面试题》中,我们有介绍到Windows下的Fiddler和Mac下的Charles这两款HTTP抓包工具,其实它们就是两个HTTP代理服务器(HTTPProxyServer)。由于HTTP是一种符合REST架构风格(RepresentationalStateTransfer)的协议,具有无状态(Stateless)与统一接口(UniformInterface)的架构约束,因此其代理机制的实现十分的简单。
打个比方,我们可以把ProxyServer理解成一个快递中转站,当一个包裹经过中转站时,包裹的信息(发件人、收件人与包裹里的货物)通常不会做任何的改动,直接发往下一个中转站或顾客手中。但中转站完全有能力修改快递单信息、拆箱检查货物,甚至是私吞或调换货物。
当我们需要快速定位「线上产品的接口问题」时,如果没有源码、数据、依赖服务和足够的时间去搭建一个测试环境,则通常会使用HTTP代理服务器来进行快速抓包调试。
Fiddler默认只允许本地IP(.0.0.1)使用代理服务,通过设置「Tools-Connections-Allowremote