使用charles|使用charles 调试移动端web应用 2019-08-23 使用charles调试移动端web应用

在做移动开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。Charles 通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析。

一、Charles
Charles是一个HTTP代理服务器，HTTP监视器，反转代理服务器，当浏览器连接Charles的代理访问互联网时，Charles可以监控浏览器发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信，包括request, response和HTTP headers （包含cookies与caching信息）。
二、使用方式
1、抓包浏览器请求在Mac下，通过Proxy -> macOS Proxy自动设置代理

使用charles|使用charles 调试移动端web应用 2019-08-23

文章图片
1566551313982.jpg
第一次使用需要输入Mac密码，之后 macOS Proxy就是勾中状态

文章图片
1566552364451.jpg
这时，就可以抓取到所有的Http请求了。不需要的时候，记得取消 macOS Proxy的勾选。

文章图片
1566552625204.jpg
(可以看到，Https的请求还是抓不了的)
2、移动端抓包请求以IOS为例，前提条件需要iphone连接上Mac所在局域网的WIFI。
打开手机连接的WIFI配置 -> 选择配置代理 -> 手动 -> 填入Mac的Ip地址

文章图片
1566553185349.jpg
比如我的Mac ip就是 192.168.7.110，端口默认是 8888，如果需要更改，可以通过 Proxy -> Proxy Settings...配置进行更改，一般来说使用默认的 8888就够了。 【使用charles|使用charles 调试移动端web应用 2019-08-23】
保存配置后，Charles会弹框提示是否允许，直接允许就行了，不允许你也用不了的。之后呢，就可以抓到手机端的http请求了。

文章图片
对部分内容打码处理
对于一般App的协议抓包可能到这就结束了，但是如果有这么一个场景：

你开发了一个web app，它一般运行在微信浏览器，并集成了微信支付。这时，你需要测试其支付相关的流程，并且需要取到微信的openId，但是后端又还没搭建测试环境，你要怎么测试你的开发代码？难道只能上商用环境进行测试？

接下来，就讲讲这问题的解决办法。
3、移动端web app的调试上面的问题简短总结下就是，如何在开发环境获取到微信的ipenId？
微信获取openId会识别请求的域名，如果不是当前绑定的域名，则会直接无视，所以开发环境直接请求是取不到openId的。那么，就需要用到Charles的代理映射功能，将移动端的商用地址映射代理成我们本地的开发地址，这样我们请求发出的域名其实还是商用的域名。
经过第2步，我们的手机已经使用了Charles的代理，然后用微信访问项目的商用地址，在Charles中可以看到其具体地址，右键该地址选择 Map Remote...

文章图片
1566555723409.jpg
弹出 Edit Mapping弹框

文章图片
1566556097852.jpg
上部分为项目原域名（ Host战略性打码），如果Query栏有值，则需要清空，没有就不用管了。下部分为需要映射的目标域名，一般是自己电脑的ip，端口就是web项目的本地服务端口，其他都不用写，点击 ok保存。
这时你再刷新手机的web app就会发现，跑的已经是本地代码了。可以愉快的测试开发代码，不用提心吊胆的上商用再测试。
4、改写协议返回的Response Body 调试协议的时候，难免需要各种不一样的数据做测试，而后端不一定能很方便的提供，这时就可以用Charles的另一个功能Map Local。
假如有一个接口getLuckPolicyOfDevice，返回如下json数据

文章图片
1567072760524.jpg
做调试的时候，想要修改 isUsed的值，来达到控制UI的呈现。
首先右键该协议请求，选择Save Response，保存该json数据，这里会让你选择保存路径，自由选一个路径存放（当然，你也可以选择自己敲入txt）

文章图片
1567073030961.jpg
保存后，默认是一个以协议为名的无后缀文件，如 getLuckPolicyOfDevice，可以自己加上 txt、json等后缀，方便打开。
使用WebStorm打开getLuckPolicyOfDevice文件，修改其isUsed项值为true，然后保存退出。
再次右键该协议请求，选择Map Local：