Charles的使用与配置

基本使用

Charles是使用简单,也是开发过程中非常有用的工具,这里简单介绍下使用。

对于开发iOS的同学来说,如果要使用模拟器进行调试,配置非常简单。

第一步,打开Charles,勾选macOS Proxy:

proxy

第二步,再在help—SSL Proxying中勾选即可:

image-20200530141352348

而对于Android同学来说,重复第一步,然后再在Android的模拟器中配置即可。

调试HTTPS

以上的基本操作,基本上可以满足80%的日常开发,可以很快的排除问题。生产环境,我们都是使用HTTPS来进行加密访问的。如果线上出现了错误,急需要前后端进行排查。我们可以使用真机配合 Charles,来快速的定位出问题的API。

第一步,打开Charles,然后获取mac的IP地址,当然,你也可以在网络中查看:

image-20200530142444240

第二步,在手机上配置好相应的代理,然后打开线上APP,进行抓包,如果设置成功,Charles会自动弹出弹窗,然后点击allow:

image-20200530145100337

我们查看出错的APP,发现所有的API都是unknown:

image-20200530145326547

第三步,注册证书:

image-20200530145430913

此时会跳转到钥匙串,找到Charles对应的证书,证书是红色的,很容易找到。然后双击这个证书,然后选择始终信任:

image

第四步,通过Proxy–>SSL Proxying Settings,勾选Enable SSL Proxying, 并添加host,端口是443 这里是把所有的host都设置进去:

image-20200530145842162

第五步,通过help–>SSLProxying–> Install Charles Root Ceriticate on a Mobile Device or Remote Browser,可以获得下载提示:

image-20200530150343535

在iPhone上,使用Safari(必须),输入提示的网址chls.pro/ssl,提示下载描述文件,点击下载完成后,。然后在设置中“已下载描述文件”中安装。

第六步,在iPhone上,通用–关于本机—证书信任设置,信任证书即可。此时,你就可以看到HTTPS的数据啦。

弱网调试

点击proxy—throttle settings,可以模拟网络状态差的情况:

image-20200530152727780

通过配置网络的带宽,以及模拟网络的可靠性和稳定性,来模拟弱网情况。

断点调试

有时候,我们需要对接口进行一些操作,比如修改请求参数,编辑返回值等。那么就可以采取打断点的方式来进行调试。

第一步,选择你要调试的API,然后右击选择breakpoint。

image-20200530153517673

第二步,对选中的API重复发起请求:

image-20200530153618018

此时,则会出现断点页面,此时还没有发网络请求,你可以在这里编辑请求参数,还有接口:

image

编辑完毕后,点击execute,则会发起HTTP请求,当捕获到Server返回的结果后,你还可以对结果进行编辑:

image1

以上,就是我们开发中常用的Charles的用法。


   转载规则


《Charles的使用与配置》 刘星星 采用 知识共享署名 4.0 国际许可协议 进行许可。
 本篇
Charles的使用与配置 Charles的使用与配置
基本使用Charles是使用简单,也是开发过程中非常有用的工具,这里简单介绍下使用。 对于开发iOS的同学来说,如果要使用模拟器进行调试,配置非常简单。 第一步,打开Charles,勾选macOS Proxy: 第二步,再在hel
下一篇 
防抖和节流 防抖和节流
防抖和节流防抖和节流在前端日常开发中使用的的频率相当高,在小程序还有Hybrid应用开发中也会使用到它。像underscore中就提供了这样的高阶函数。 防抖常见的使用场景有: 监听scroll的滚动 搜索框输入查询 表单验证 按
2020-04-01
  目录