一个非常适合前端小伙伴的抓包工具whistle

3,148 阅读3分钟

最近这个工具提高了开发效率,很多线上问题都引刃而解,所以分享出来;也想看看大家喜欢用啥,或者有好技巧推荐

1. 结构化介绍基础功能

其实看他的文档即可 wproxy.org/whistle/

我觉得比较重要的

  1. 快速上手
  2. 匹配原则

2. 实际场景

2.1 场景:URL 测试环境出现bug,我想本地直接开发,怎么配置?

real_url 是 http://172.31.60.219:8080/js/app.js

2.2 场景:原生APP 用webview 打开页面如何调试,如何真机调试?

其实和上面的代理一样,具体看你的想替换什么

注意点:

  1. 配置完这个,你就可以欢快的开始本地开发了
  2. 如果可以抓到包,但是看不到实际的改变,记得可以将webview重新关闭和打开
  3. 重新打开之后你就可以看到实际效果了

提高效率: 特别是一些需要使用原生应用的接口的需求;只能改完代码,发到线上环境,然后看下效果,现在用这个,可以很快的直接看到效果;

2.3 如何把APP的console拉到本地来调试

参考该文章 cloud.tencent.com/developer/a…

我们先配置下,具体规则可以看这里

然后我们就可以快乐的看到手机端的日志了,完全不需要vconsole这种东西的

此处不由得说一声,撕逼好神器,原生,大前端,后端无处藏身(不过我用的挺少的,因为下面有更好用的)

2.4 当然也有一个很猥琐的方式 -- 注入js

2. 3.

感觉一般般吧,唯一作用就是注入一些东西,比如vconsole

2.5 真机移动端页面调试【查看,修改真机端的页面DOM结构以及样式】

www.cnblogs.com/fafa-coding…

真心好用,推荐推荐

这个在电脑上调试手机上页面的工具是真的很大提高开发效率,基本上如果没有这个我感觉自己不会开发了

3. 其他

3.1 插件开发

@TODO

3.2 nohost: 基于whistle 实现的多用户多环境及抓包调试系统 团队级别的whistle。

计划在公司搭建一套,不知道能不能落地,如果可以我觉是提高大家效率的好方法

带来的好处有:

  1. 环境共享
  2. 抓包调试:
  3. 历史记录:环境配置及数据沉淀下来
  4. 插件扩展:如inspect
  5. 对外接口

4. 关于安装

wproxy.org/whistle/pri…

4.1 浏览器插件

4.2 安卓手机

www.cnblogs.com/lv-lxz/p/10…

4.3 ios 手机

4.3.1 同一个局域网 4.3.2 安装证书是最麻烦的,我也记录下来吧

在safari上打开你pc端的ip地址加上端口;这个前提是一定是在同一个局域网下面

打开 设置 — General — Profiles & Device Management 就可以看到你的证书了;

然后install

然后就是去信任:

设置 —> General —> about —> Certificate Trust Settings 

4.3.3 然后你就设置代理

这样子就可以在手机上抓到包了

最后: 是觉得很好用,然后就写了这个blog,不知道能不能帮助到一些同学~ 感觉写东西的严谨性还是得加强!!!

5. 其他问题

5.1 SwitchyOmega 打开代理之后,出现 ”您的连接不是私密连接“

image.png

则需要安装证书,这样才能访问https,通过证书验证