开篇：
本篇文章主要讲解内容为：通过whistle对网页抓包调试，尤其适合内嵌App内的H5网页
适合哪些开发人群看？
经常做hybird开发的同学
解决的痛点是什么？
charles及fiddler这类抓包工具只能抓http请求，对于一些只在App内才出现的效果无法进行元素审查、或查看日志等操作
如果您是以上人群并有上述痛点，请继续往下看，操作过程可能有点复杂，但只要一步步跟着做，配置好之后便可一劳永逸
好了，直接上干货：
安装及启动whistle
// 安装
npm install -g whistle
// 启动
whistle start
// or
w2 start
访问whistle服务
浏览器地址栏输入： localhost:8899 （ whistle默认端口8899）
电脑安装证书：
左侧菜单：rules --> 上面菜单：https。在弹出框点击二维码即可下载证书，然后安装、并在系统中信任证书
配置网络及手机证书
- 手机连接和电脑连接同一个局域网下的wifi
-
- 配置手动代理 ip为电脑本机ip，端口8899（如果没有修改whistle默认端口的话）
- 手机浏览器访问：rootca.pro下载证书，并在系统中信任证书
安装及配置SwitchyOmega
- 安装：有梯子的同学可以在chrome插件商店安装，不方便的同学可以通过百度网盘下载SwitchyOmega。百度网盘下载链接: pan.baidu.com/s/1TsTImXZx… 提取码: ea8m
- 配置
-
- 配置浏览器代理
-
- 在浏览器插件栏 开启代理
- 在浏览器插件栏 开启代理
配置需要whistle拦截的域名
- 填写如下配置，具体域名根据业务需求决定
- 如果需要vconsole，配置方式如下：（需把vconsole源码贴上）
需要其他配置请移步whistle官方文档：wproxy.org/whistle/
or
常用配置参考：zhuanlan.zhihu.com/p/483975945
开始使用😸
本地启动项目服务，用手机浏览器访问刚刚配置的域名 （示例中为www.baidu.com） 就可以访问本地代码啦。（需保证whistle配的端口和本地项目端口保持一致）
小tip：直接看log
加上如下配置：
可在network中直接看log
注意：
- webpack的devServer的配置：websocket的host值要配成127.0.0.1才可使用热更新功能。
- 代码中 使用console.warn()等语句可能会致使whistle报错进而导致页面崩溃，开发时候注意一下。
番外：
点击上面的“weinre”可以看到类似chrome DevTools的界面，此时用手机访问H5，如果在此处出现类似下图的内容，就代表拦截成功，快去愉快的调试吧~
