注：本文内容较长且细节较多，建议先收藏再阅读，原文将在 Github 上维护与更新。

在 HTTP 接口开发与调试过程中，我们经常遇到以下类似的问题：

「猫哥网络编程系列」最核心的任务便是向各位分享一个我从多年的前后端项目中总结而来的「万能」HTTP 调试法，掌握并从网络编程原理上理解它，能让我们顺利定位并解决所有 HTTP 接口问题。由于该方法主要涉及到的知识点包括 HTTP 代理（Proxy）、编辑（Edit）与数据模拟（Mock），因此我称之为「HTTP PEM 调试法」。

接下来，我们就针对前面提出的几个问题，详细讲解下 PEM 调试法的思路。

如何调试线上 App 中的 H5 页面？

「HTTP PEM 调试法」之 Proxy

在上一期《猫哥网络编程系列：详解 BAT 面试题》中，我们有介绍到 Windows 下的 Fiddler 和 Mac 下的 Charles 这两款 HTTP 抓包工具，其实它们就是两个 HTTP 代理服务器（HTTP Proxy Server）。由于 HTTP 是一种符合 REST 架构风格（Representational State Transfer）的协议，具有无状态（Stateless）与统一接口（Uniform Interface）的架构约束，因此其代理机制的实现十分的简单。

打个比方，我们可以把 Proxy Server 理解成一个快递中转站，当一个包裹经过中转站时，包裹的信息（发件人、收件人与包裹里的货物）通常不会做任何的改动，直接发往下一个中转站或顾客手中。但中转站完全有能力修改快递单信息、拆箱检查货物，甚至是私吞或调换货物。

当我们需要快速定位「线上产品的接口问题」时，如果没有源码、数据、依赖服务和足够的时间去搭建一个测试环境，则通常会使用 HTTP 代理服务器来进行快速抓包调试。

Fiddler 默认只允许本地 IP（127.0.0.1）使用代理服务，通过设置「Tools -> Connections -> Allow remote computers to connect」可以开启其他 IP（通常是同一局域网内的其他设备）使用代理服务。

Charles 默认开放代理服务，但陌生设备首次连接时需要授权确认，通过以下配置可以设置成无需授权。

以上两款软件默认的代理端口均是 8888 ，软件开启之后，我们可以在对应的平台终端下通过ipconfig（Windows） 或 ifconfig（Mac）命令查询本机的局域网 IP，还可以使用 telnet 命令检查代理通道是否可用。（注：Win7 下如何开启 telnet 命令请参考百度经验。）

以下是 Windows 下 CMD 终端的使用截图，Mac 系统下请类比参考。

接下来，我们将手机的 Wi-Fi 代理设置为上述的 IP 与 端口号，以下是 iOS 的设置截图（ Android 系统通常是长按已连接的 Wi-Fi ，在弹出的高级设置菜单中配置代理服务器）。

至此，手机上任意应用发起的 HTTP 请求都将会被代理服务器（本例中的 Fiddler/Charles 软件）监听到。

「HTTP PEM 调试法」之 Edit

通过代理服务器监听到 HTTP 请求之后，我们可以通过浏览报文的详细信息，定位出可能的接口问题。Fiddler 与 Charles 都具有同样强大的 HTTP 编辑（Edit）、重发（Replay/Repeat）、断点（Breakpoints）功能。Charles 的基础与高级用法请参考《Charles 从入门到精通》，Fiddler 教程可以参考 OSChina 专题《HTTP调试代理 Fiddler》，以下介绍 Fiddler 的部分常见用法。

Fiddler Edit 与 AutoResponder

抓到手机 HTTP 请求之后，通过编辑（Unlock For Editing）和重发（Replay）操作可以不断地调试接口的响应是否符合预期。

通过设置自动响应规则（AutoResponder Rules）可以将响应头设置成常见状态码的返回，或将响应体映射成本地文件，通过外部编辑器修改文件内容进行调试。其中，若设置响应为 *bpu 或 *bpafter 可以在请求前与响应前的事件触发时进行断点调试，十分方便。

需要注意的是，在 Fiddler 中使用 Replay 功能重发请求时，请求由 Fiddler 代理重新发起而非手机，因此手机 App 中的 H5 不会有任何变化。只有重新刷新 App 的 H5 页面，配合 HTTP 断点调试（Breakpoints ）的方式才可以让修改后的 HTTP 响应体在 App中生效。这里介绍另外一种配合 Weinre 的调试用法。

Weinre 基本用法

Weinre 属于知名 Hybrid 框架 Cordova 中的一款 Web App 远程调试工具。通过在页面中注入一段 JS 脚本，可以在 PC 和手机端的 H5 页面之间建立一个 Socket 双向数据传输通道。原理上可以理解为，当我们在 PC 端的后台进行 debug 时，相关的操作被序列化成一组 JSON 字符串，数据经由通道传输给手机端中的 H5 页面，页面在接收到这些数据之后反序列化成相应的 JS 脚本操作，在其 window 上下文中执行，并将执行的结果回传给通道，PC 端的 Chrome 通过监听通道获取到相应的数据在 debug 后台中展现出来。

以下介绍 Weinre 的基本用法：

问题是，我们「如何将 Weinre Script 自动注入到手机的 H5 页面中」？

HTTP Script 注入

想必用过中国电信宽带的同学都有过这样的体验：在刚开始浏览网页时，会自动跳出一些「宽带升级优惠」、「宽带缴费提醒」之类的页面。这种耍流氓的方式便是宽带运营商在 HTTP 代理层面的 Script 注入行为。前面已经提到 HTTP 协议是一种 REST 风格的架构，并且他的头部与主体报文为字符串文本流（对比二机制、十六进制数据流），在不使用 HTTPS 的情况下，很容易被中间路由或代理网关进行消息篡改。

通过 Fiddler Script 特性，我们可以自动对经过 Fiddler 的 HTTP 流量进行二次修改，注入任意内容（Mac 用户若已了解相关知识点，请直接跳至下方的 Charles 截图）。