使用 Charles 调试手机数据请求

导读：

以前使用 Fiddler 进行 web 调试的时候，可以玩转线上各种数据请求，并且替换掉数据，本地改改就可以调试线上内容了。那时候我应该还在大学里，用的是 window 和 firefox，需要兼容像 IE 6 这样的顽固浏览器。

而今天要介绍的是，在 Mac 下如何使用 Charles 来查看调试手机上的数据请求，以及一些问题的解决方法。

软件官方地址：https://www.charlesproxy.com
软件简介：Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).

跳过如何安装、以及如何免费注册的环境，我在这里直接介绍我遇到的一些问题吧。

常规操作及功能简单介绍

一般的操作流程是打开 Charles，在菜单 Proxy 中去勾选 macOS Proxy，这样就可以了。如下图：

紧接着，在你的浏览器发起请求的时候，就可以看到一堆日志出现了。如下图：

左侧为你本地发起的所有数据请求，包含 http / https 的。右侧为每一个请求的详细情况。

Charles 抓取不到数据了

如果你遇到抓取不到数据了，那么可以先排查下你的网络设置。详细路径为：偏好设置 -> 网络 -> 高级 -> 代理，打开设置页面，在 HTTP 和 HTTPS 代理都填上 Charles 的代理并打勾。

设置的代理服务器指向本地，端口应该和你的 Charles 端口一致即可。例如 127.0.0.1:8888。一般这样设置完保存了就可以了。

手机上如何通过 Charles 抓包？

首先确保的一个事情是，你的手机和你的电脑在同一个网络，这时候你可以的拿到电脑的 IP 地址，而将 Chairles 作为 Proxy 代理。

简单的操作方法（安卓）下：网络设置 -> 选中你的 Wifi 网络 -> 高级设置 -> 代理 -> 手动设置 -> 填入 Mac 的 IP 以及 Charles 的端口即可。

手机上访问不了网页了？

一般这种情况，是因为你访问了 HTTPS 的网页。这时候需要将 Charles 的证书安装到你的手机上。安装方法：菜单上 -> Help -> SSL Proxying -> 选择远程安装，这时候会弹出一个界面，你只需要在手机上访问 chls.pro/ssl 就可以下载到证书了。随后安装到手机即可。如下图：

暂时就这么多，后续有更新到问题再补上。