HTTP（HTTPS）抓包，代理工具，程序员测试开发必会

作为一名web开发或者测试人员，进行http抓包分析和http请求代理，是一项必备的技能，这样才能更加准确的debug或者测试接口，今天小编给大家介绍下代理神器，Charles

 

首先简单介绍一下

Charles是一个HTTP代理服务器,HTTP监视器,反转代理服务器，当浏览器连接Charles的代理访问互联网时，Charles可以监控浏览器发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信，这些包括request, response和HTTP headers （包含cookies与caching信息）。

我常借用Charles做这些事情 ：

抓取 Http 和 Https 的请求和响应，抓包是最常用的了。

重发网络请求，方便后端调试，复杂和特殊情况下的一件重发还是非常爽的（捕获的记录，直接repeat就可以了，如果想修改还可以修改）。

修改网络请求参数（客户端向服务器发送的时候，可以修改后再转发出去）。

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

支持模拟慢速网络，主要是模仿手机上的2G/3G/4G的访问流程。

支持本地映射和远程映射，比如你可以把线上资源映射到本地某个文件夹下，这样可以方面的处理一些特殊情况下的bug和线上调试（网络的css，js等资源用的是本地代码，这些你可以本地随便修改，数据之类的都是线上的环境，方面在线调试）；

可以抓手机端访问的资源（如果是配置HOST的环境，手机可以借用host配置进入测试环境）

将 Charles 设置成系统代理

之前提到，Charles 是通过将自己设置成代理服务器来完成封包截取的，所以使用 Charles 的第一步是将其设置成系统的代理服务器。

启动 Charles 后，第一次 Charles 会请求你给它设置系统代理的权限。你可以输入登录密码授予 Charles 该权限。你也可以忽略该请求，然后在需要将 Charles 设置成系统代理时，选择菜单中的 “Proxy” –> “Mac OS X Proxy” 来将 Charles 设置成系统代理。如下所示：

 

之后，你就可以看到源源不断的网络请求出现在 Charles 的界面中。

需要注意的是，Chrome 和 Firefox 浏览器默认并不使用系统的代理服务器设置，而 Charles 是通过将自己设置成代理服务器来完成封包截取的，所以在默认情况下无法截取 Chrome 和 Firefox 浏览器的网络通讯内容。如果你需要截取的话，在 Chrome 中设置成使用系统的代理服务器设置即可，或者直接将代理服务器设置成 127.0.0.1:8888 也可达到相同效果。

移动端抓包

1）使用Charles工具查看PC本地IP和端口号（端口号默认为8888，也可自行修改），选择“Help->Local IP Address”

 

查看默认端口号“Proxy->Proxy Settings”

 

 

2）长按Android设备当前连接的WiFi，选择”Modify network”->”Advanced options”->“Proxy”->”Manual”，如下图所示，输入”Proxy hostname”和”Proxy port”（即上一步查看的IP地址和端口号）然后点击保存，见下图：

 

3）点击保存后，Charles会弹出connection确认弹窗，选择”Allow”，见下图：

 

4）注意，如果首次连接时，Charles未出现该提示，请手动进入Charles的设置选项，添加当前手机的IP，选择“Proxy->Access Control Settings”

 

点击“Add”手动添加IP

 

证书安装---

上述操作只是完成了代理配置的一半，想要Charles抓到包还需要在移动设备上安装证书。

1）手机浏览器访问链接http://www.charlesproxy.com/getssl/（链接名字长，注意不要写错），也可以在Charles中查看下载证书的地址，见下图红框标注的位置

 

 

2）安装动态证书（证书名称随意填写即可），凭据用途默认即可，证书安装时需要设置系统锁，设置锁屏成功后证书会提示证书安装成功。到此，你的设备和Charles就建立了连接，可以尝试在设备上访问一个地址，在Charles左侧视图就能实时看到请求啦~但你会发现，有些请求为什么会显示成红叉unknown呢？请接着往下看~

【注】此步操作不成功的请下滑页面到底看【踩坑】部分。

 

当然charles是需要激活的，以后的文章，小编带来如何激活哦，记得关注下！！