使用whistle进行手机抓包并调试

whistle是一个基于Node实现的跨平台web调试代理工具,类似Windows上的Fiddler,Mac上的Charles,主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应,也可以作为HTTP代理服务器使用,不同于Fiddler通过断点修改请求响应的方式,whistle采用的是类似配置系统hosts的方式,一切操作都可以通过配置实现,支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式,且可以通过Node模块扩展功能。

虽然长期以来一直使用的工具是Fiddler,但当我看到whistle的第一眼,就果断抛弃了Fiddler,转而使用whistle,诸多原因,我们下面一一来聊:

1、我们先看看whistle的官方文档:https://wproxy.org/whistle,点进去看的第一感觉这工具很强大,很灵活,而对比Filddler和Charles,功能比较弱,而且使用不是太灵活。

2、支持多种匹配规则的配置方式,而且规则还支持变量,使用下来就两个字:舒服,而Fiddler和Charles规则配置都有些困惑,特别死Charles规则的配置方式很死板。

3、支持使用动态规则,通过w2 use来导入动态的规则,很容易可以和项目编译流程打通,比如我们在项目根目录下新建whistle.cfg.js,内容:

const { name } = require('./package.json');
const path = require('path');
 
function resolve(pathname) {
  return path.resolve(__dirname, pathname);
}
 
module.exports = {
  name,
  rules: `
/www.test.com/commons.js/ ${resolve('./dist/commons.js')}
`
};

然后在编译命令运行之前,运行w2 use ./whistle.cfg.js,我们就可以导入一个以我们的项目名称为名字的规则列表(目前只有一条),而这段${resolve(’./dist/commons.js’)代码最终也会被替换为真实的项目路径。

4、支持hosts指向更改,而且无缓存,我们再也不需要去一层层去找hosts文件,再也不用关心更改的hosts是否生效了,再也不用去纠结Windows和Mac下hosts文件的存放位置,一条规则搞定:

www.test.com 118.118.118.118

5、支持各种请求和响应更改

6、原生支持远程调试,我们只需要加一条规则就可以搞定:

www.example.com weinre://example

…, 好处实在是太多,这里就不再多做介绍,有兴趣的朋友可以自行去研究,我们还是回到本文的主旨,手机端抓包和调试。

要进行手机端抓包,我们需要在手机上设置代理指向运行的whistle机器的特定端口(默认8899),IPhone和安卓手机设置代理的方式大同小异,这里主要介绍一下IPhone的设置方式:

1、打开手机上面的“设置”功能,进入手机的系统功能设置,如图所示。使用whistle进行手机抓包并调试_第1张图片
2、进入手机的设置功能之后,选择“无线局域网”,点击进入,如图所示。使用whistle进行手机抓包并调试_第2张图片
3、进入无线局域网之后,选择一个要设置HTTP代理的网络,点击进入,如图所示。使用whistle进行手机抓包并调试_第3张图片
4、进入该网络配置之后,下拉页面,找到HTTP代理模块的“配置代理”,点击进入,如图所示。使用whistle进行手机抓包并调试_第4张图片
5、进入配置代理的模块后,可以看到状态是关闭的,点击其中的“手动”,如图所示。使用whistle进行手机抓包并调试_第5张图片
6、点击手动之后,就会出来一个模块让填写代理服务的ip和端口,正确输入即可,然后点击右上角的“存储”,如图所示。使用whistle进行手机抓包并调试_第6张图片
设置完代理后,我们已经可以抓http网站的包,但是如果我们访问https的网站,会发现会提示证书有问题,我们需要安装并信任证书,证书安装我们可以通过Safari(一定要是Safari)访问:http://电脑ip:8899,使用whistle进行手机抓包并调试_第7张图片
依次点击步骤一和步骤二下载证书,步骤三开启https抓包,证书下载完毕后,我们可以在描述文件中找到下载的证书并点击安装:使用whistle进行手机抓包并调试_第8张图片
安装证书后我们需要信任证书,在“设置”>“通用”>“关于本机”>“证书信任设置”。在“针对根证书启用完全信任”下,开启对这个证书的信任。使用whistle进行手机抓包并调试_第9张图片
到这里我们就可以抓手机上的https的包了,但是我们如何调试手机端的页面呢?

1、我们可以通过上面介绍的weinre来开启whsitle自带的远程调试工具

2、我么可以利用log来远程来查看远程控制台或者打印变量

3、我们可以通过resPrepend或resAppend配合本地文件或者变量来向手机端页面注入调试面板,比如eruda。例:

新建规则:

www.example.com resAppend://{append}

新建变量append,内容为:

<script src="http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js"></script>

开启规则后,我们在请求www.example.com网站的时候就会自动注入eruda调试面板,通过调试面板我们可以方便的对手机端页面进行调试。

写在最后:

1、如果上面步骤都完成后,我们依然无法抓包,考虑是电脑端防火墙的原因,我们可以选择关闭防火墙和本地的杀毒软件,当然也可以放行8899端口,不过设置稍微有些繁琐。

2、手机抓包结束后,记得恢复代理为关闭,不然会影响后续正常情况下的请求发送。

你可能感兴趣的:(JavaScript,前端技术,技术分享,http,网络协议,网络,手机调试,应用调试)