使用抓包工具Charles实现真机调试本地站点

Charles简介

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

工作原理

我们在PC端开发时,我们可以通过修改hosts文件来访问本地站点。但是当使用手机时,修改手机的hosts文件就不是那么简单了(尤其是iPhone)。Charles的工作原理就是将你手机所有的网络请求全部发送到PC上,通过PC代理的方式去完成网络请求并且同时抓取你的请求数据。通过这一特点我们可以实现在真机*问到PC的本地站点的功能。

操作步骤

使用抓包工具Charles实现真机调试本地站点

  1. 下载 Charles
  2. 确保你的手机和PC在同一局域网
  3. 在Charles中依次选择 ProxyProxy Settings填写入代理的端口号
    使用抓包工具Charles实现真机调试本地站点
  4. 设置完成之后,我们打开这个小红点,红点亮时表明Charles正在工作
    使用抓包工具Charles实现真机调试本地站点
  5. 打开我们的手机,连接到同个局域网内的WIFI。将代理设置为手动,分别填写入服务器(PC端的IP地址) 端口 (Charles上设置的端口号,我这里为3999)
    使用抓包工具Charles实现真机调试本地站点
  6. 当我们手机第一次连接上时,需要在Charles确认,此时会弹出这个窗口,我们只需要点击Allow即可开始进行代理。
    使用抓包工具Charles实现真机调试本地站点
  7. 当上述一切完成后,我们可以看到左侧栏会列出手机上所有的请求列表,至此一切大功告成。
    使用抓包工具Charles实现真机调试本地站点