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

我常借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包