Charles官网
mac上我一般都会用Charles作为抓包和代理映射工具

使用场景:移动端进行本地的实机调试,线上站点调试。

举个例子:我们开发搭建一个移动端页,我们最终的目的是让页面流转到移动设备上进行使用,不同的系统平台、不同的机型、不同的浏览器引擎、甚至他们各自不同的版本都可能影响兼容性和功能点正常使用。那么浏览器开发方式结束之后第一时间就需要进行真机上的开发,你不可能发一次预发环境调试一次,这样效率太低而且做法过于”愚蠢“。那么就需要在启动本地服务的方便修改的情况下,能调试线上的M所有资源。

所以这里用到映射代理,可以把A地址map到B地址。在不改变目标A地址情况下,让访问的资源转到B地址(可以是线上服务也可以是本地服务甚至是本地静态资源),这有点像DNS劫持钓鱼网站的做法,但是我们是用来本地调试方便开发,方便的代理线上地址到本地服务或者本地资源进行调试开发。

重点介绍下charles的使用,window上的fiddler原理是一样的。

普通抓包

Charles和需要抓包的网络请求设备处于同一网络环境中。
1.工具栏的proxy -> macOS Proxy勾选就可以抓包本机的请求
2.移动设备或者其他设备抓包请将网络的代理设置成手动,代理地址即为Charles软件所在设备的网络环境ip,端口一般为8888,设置完成后Charles会有弹框提醒是否允许信任之类的询问,直接选择allow,这样就可以愉快的抓其他设备的请求包来看了,这种抓包不需要安装ssl证书也可以抓https

装本机证书

装移动端证书

映射代理抓包

这种不仅仅是抓包,而是一种映射代理,可以把A地址映射到B地址。在不改变A地址情况下,让访问自动跳到B地址,这有点像DNS劫持,钓鱼网站这样的做法,但是我们是用来方便开发,你可以方便的代理线上地址到本地服务或者本地资源进行调试开发。
1.在工具栏的Tools->Map Remote里面进行设置即可。
注意映射的地址要相同,映射的文件名也需要相同才能匹配成功,
如果你映射的是AB两网站的grade2/class3/*
用Charles去映射A网站的grade2/class3/names.js到B网站的grade2/class3/ages.js
那么ages.jsnames.js两者就映射不成功,不应该用grade2/class3/*
而是用grade2/class3/names.js -> grade2/class3/ages.js强制一对一映射。

2.这里如果要映射的地址是https的话,需要下载Charles的ssl证书到你的设备里,否则安全机制会导致映射失败,下载地址在工具栏 Help->SSL proxying里面下载本地版的和移动版的有相关的提示。

Configure your device to use Charles as its HTTP proxy on x.x.x.x:8888, then browse to chls.pro/ssl to download and install the certificate.
大致意思就是移动版的需要连接代理设置端口号,参考方法1,然后访问chls.pro/ssl,就可以下载相应的证书了。
流程示意图如下:

HTTPS映射不成功看这里

如果上面的ssl证书装完还是不可以映射https,那么就要在这里多进行一个操作的设置,在proxy -> SSL Proxying setting里,进行需要进行https地址的配置,默认端口为443,注意这里的实测配置为*后的域名后缀地址必须为.com,其他区域或者个性域名后缀没有映射成功,如.me`.love,或许通过强制配置可以成功。 配置SSL Proxying setting`

移动端的控制台vconsole

Npm地址 https://www.npmjs.com/package/vconsole

可以方便的第一时间开启debug模式,在移动端查看控制台打印信息以及network和系统信息等,非常方便定位问题。唯一需要注意的是iOS8Android 5以下的引入兼容性问题,可能会导致白屏

类似的比较好用的工具还有Erudahttps://github.com/liriliri/eruda/blob/master/doc/README_CN.md

script用法

1
2
3
4
5
<script src="{CDN Url}/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
</script>

commonJS或者ESmod中使用

1
npm install -D vconsole
1
2
3
import Vconsole from 'vconsole'
//const Vconsole = require('vconsole')
var vConsole = new VConsole()

原创内容,欢迎交流转载请注明出处