何小伟_代理工具调试开发环境页面

我常借Charles做这些事

抓取 Http和Https 的请求和响应

重发网络请求，方便后端调试，复杂和特殊情况使用非常爽

修改网络请求参数（客户端请求服务器发送时，修改请求后再转发）

网络请求的截获和动态修改

模拟慢速网络(2G/3G/4G)的访问流程

支持本地映射和远程映射，

抓取手机端访问资源（如HOST环境，可借Host配置进入测试环境）

代理工具调试开发环境页面

在实际开发环境中，有些场景需要配 Hosts 才能访问的开发页面，手机在默认情况下是没有权限修改Hosts文件的，除非是iOS设备越狱后和Android设备root后，所以一般情况下手机是无法访问开发环境页面，这时需要使用到 Mac系统的Charles代理工具，Windows 系统可使用 Fiddler 代理工具。

一.实现思路

Mac 作为代理服务器

手机通过 HTTP 代理连接到 Mac 电脑

手机上的请求都经过代理服务器

通过给 Mac 配 Hosts 实现目的

二.调试步骤

1、查看电脑 IP（菜单 -> Help -> Local IP Addresses）

2、查看端口（菜单 -> Settings -> Proxy Settings -> Proxies）

默认端口为：8888，勾选 Enable transparent HTTP proxying

3、将 IP、端口号填入手机 HTTP 代理

iOS 系统：设置 -> 无线局域网 -> 点击叹号 -> HTTP 代理 -> 手动

Android 系统：设置 -> 长按当前网络 -> 修改网络 -> 高级选项 -> 手动

4、Charles 允许授权

每次有新设备首次连接都会提示是否授权，可以通过 Proxy -> Access Control Settings 配置以下参数 0.0.0.0/0 来关闭。

5、使用 SwitchHosts! 软件给 Mac 电脑配 Hosts

6、手机访问开发环境页面。到这一步手机就可以访问到开发环境下的页面了，再结合前面所讲的方案来调试页面。

三.Charles调试功能

1 .网络映射修改文件 Map

Charles的map功能分为Map remote和Map local两种。

1. Map remote：将网络请求重定向另外一个网络地址

2. Map Local ：将网络请求重定向到本地文件

除了结合前面的方案调试，可以使用 Map Local 网络映射功能来实现对文件的修改，在菜单 -> Proxy -> Start Recording开启抓包后访问页面，找到抓取到的样式文件，点击右键 Map Local，在 Local path 中设置本地映射文件的路径，修改后刷新页面可以看到效果。

2.模拟网络速度

菜单 -> Proxy -> Throttle Settings -> 勾选 Enable Throttling，在 Throttling preset 中可以选择需要模拟的网络速度。

3.抓取 HTTPS 请求

默认情况下，Charles 无法抓取到 HTTPS 的请求，解决步骤如下：

Mac 端安装证书：菜单 -> Help -> SSL Proxying -> Install Charles Root Certificate

然后导出Charles SSL证书安装到手机，菜单 -> Help -> SSL Proxying -> Save Charles Root Certificate

Android 设备导出的 Charles SSL 证书存储到手机中并安装。

iOS 设备用 Safari 打开 页面，下载 Charles SSL 证书并安装。

证书安装完成后，还需要给 Charles SSL 代理配置域名和端口号，菜单 -> Proxy -> SSL Proxying Settings 勾选 Enable SSL Proxying 点击 Add 填入域名和端口号，经过以上步骤就可以抓取到 HTTPS 的请求了。

4.断点调试请求和响应内容

开启 Charles 断点 Proxy -> Breakpoints Settings -> Enable Breakpoints点击 Add 可设置断点条件或者单独对需要的文件右键 Breakpoints 设置断点。

访问页面后，即可编辑请求和响应的内容，点击 Execute按钮完成。

5.Repeat Advanced/重复发包工具

Charles让你选择一个请求并重复,在测试后端接口的时候非常有用；将请求重新发送到服务器，并将响应显示为新请求。特别是如果重新创建请求需要传一些列参数的时候，这将节省大量的精力。

Advanced Repeat就是重复发包多次，这个功能用来测试短信轰炸漏洞很方便（比如在应用中签到获得分数,比如填写一大串表单的请求时候），或者测试后端的性能。

上一篇: Charles做弱网测试

下一篇：用Charles抓https包