日常开发神器之Charles基础使用



原创 IT工匠 2019-11-30 11:16:43

日常开发神器之Charles基础使用

1:摘要

在日常的的开发中,经常需要前端或者客户端与服务端进行配合、一起配合完成某个功能的开发,在这个过程中,服务端扮演的角色是为客户端提供数据接口,客户端在合适的时机通过调用服务端的接口获取到数据,然后按照特定的逻辑将数据显示到客户端。这整个过程,服务端对于客户端是黑盒的,客户端不需要知道服务端的具体实现,只需要和服务端约定好交互的接口即可,所以,为了节约开发周期,我们经常会采取服务端和客户端同步开发的策略,服务端事先将接口约定好,给到客户端,客户端按照服务端给到的接口规范,来mock假的数据,以保证客户端的开发不会因为服务端接口未就绪而delay,而charles就是这样一款客户端神器,可以帮助开发人员提高开发效率,本文从实战出发介绍一些charles常用的、重要的功能,希望可以对大家有所帮助,本文目录如下:

日常开发神器之Charles基础使用

本文主要内容

2:安装与配置

首先在charles的官网:https://www.charlesproxy.com/ 下载软件,然后在charles端和手机端分别进行配置。

注:官网的下载速度特别慢,大家可以关注博主后后台私信“charles”获取mac的dmg包。

2.1:charles端

在 Charles 的菜单栏上选择 “Proxy”->”Proxy Settings”,填入代理端口 8888,并且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的设置,如下图所示:

日常开发神器之Charles基础使用

charles端配置

2.2:手机端

首先保证手机和开启charles的电脑连接同一网络(保证二者都连接同一个WiFi即可),然后:

1:点击所连wifi

日常开发神器之Charles基础使用

手机端点击已经连接的无线网络

2:点击代理

日常开发神器之Charles基础使用

点击代理

3:选择手动

日常开发神器之Charles基础使用

选择手动

4:填写端口和ip

日常开发神器之Charles基础使用

填写ip和端口

主要保证两点:

  • 主机名和开启Charles&与手机连接至同一WiFi的电脑的ip地址相同
  • 端口号和2.1节中设置的Port相同(此处是8888)

其他的选项可以不填,保持默认即可。

2.3:安装证书

经过上述两个步骤,charles应该已经可以抓取手机上的http请求了,但是现在大多数请求都是https的,要想抓取并处理https请求,就必须安装证书,安装证书也需要分PC端和手机端两部分。

2.3.1:PC端安装证书

在Mac上配置Charles证书,具体位置在Charles菜单栏中的Help——SSL Proxying——Install Charles Root Certificate:

日常开发神器之Charles基础使用

pc端安装证书

如果证书不受信任,需要更改为完全信任:

日常开发神器之Charles基础使用

pc端信任证书

2.3.2:Android端安装证书

这里有两个方法:

方法一: 在手机端的浏览器访问chls.pro/ssl这个地址,如果正常的话,会自动下载证书

方法二:方法一是比较省力的方法,但是遗憾的是,我经常会遇到方法一不work的情况,这种情况下建议使用以下步骤进行证书安装:

  • 将证书保存到本地,如下图所示:最好选cer格式进行保存:
  • 将下载的证书文件传到手机上,然后在手机端安装,安装的时候有两种情况直接点击cer证书文件,有的手机会直接弹出安装,按照手机提示逐步安装即可,这种情况最省力直接点击cer证书没有反映、无法安装,这种情况下需要到手机的设置里搜索”信任“:选择信任的代理,点击”从存储设备安装“,然后选择本地的证书文件进行安装即可:至此,我们就完成了charles的基础配置,现在我们应该已经可以正常地抓取手机的网络请求了。

3:常见用法

3.1:将原来的网络请求目标重定向至开发机

在开发中,我们经常遇到的情况是,服务端已经开发完成了,但是还没有上线,这时服务端可能会给客户端一个开发机的地址,我们可以临时请求开发机以完成客户端的开发,这种情况下客户端需要将原有的请求地址修改为开发机的地址,比如原来需要请求的地址是https://mcs.snssdk.com,现在需要将这个请求换成开发机的地址:129.168.2.3,这种情况下有两种解决方案:

  • 在代码中直接使用开发机的地址替换掉原来的地址
  • 使用charles的map remote功能进行重定向

两种方法相比,第一种方法成本较高、而且不够灵活,所以在实际生产中,我们比较推荐使用第二种方法,具体的步骤是这样的:

1:保证charles和手机端按照上述配置无误

2:我们以今日头条为例,比如我们想mockhttps://mcs.snssdk.com这个接口,那么首先在charles中找到手机发起的https://mcs.snssdk.com这个请求:

日常开发神器之Charles基础使用

找到目标请求的url

3:右击并选择map remote:

日常开发神器之Charles基础使用

选择map remote

4:填写开发机的信息:

日常开发神器之Charles基础使用

填写开发机信息

map from指的是你原来的接口的信息,你可以根据你的需要修改path、query等信息,map to指的是你需要重定向的目标,地址和端口要填写正确,其他信息按照你自己的需求进行灵活定制,然后点击ok即可,这时charles就会将https://mcs.snssdk.com的请求重定向到你填写的开发机的地址。

3.2:使用本地数据mock特定网络地址的请求结果

有的时候我们想使用本地的数据当做网络请求的结果返回,这时候就可以使用charles的map local功能,主要的步骤和3.1类似,还是以https://mcs.snssdk.com这个请求为例:

1:找到要mock的接口并右击选择map local:

日常开发神器之Charles基础使用

选择map local

2:选择local path,选中你想要返回的数据对应的文件:

日常开发神器之Charles基础使用

选择local path

文件内的数据格式需要和你请求的接口返回的数据格式一样,建议的做法是右击对应接口的请求并选择save response:

日常开发神器之Charles基础使用

这个时候你就把你的这个请求的返回结果保存了下来,然后直接在保存的文件的格式上进行修改,最后local path选择你修改过的文件即可。

至此,我们就介绍完了map local的用法。

4:总结

本文介绍了charles的基本配置与常见用法,希望大家通过本文可以对charles有一个初步的认识和了解,并在实际开发中善用charles,提升自己的开发效率,我是IT工匠,分享好用的IT技术和资讯,欢迎关注~


0