使用whistle实现移动网页（H5、公众号、企微应用）的本地开发及调试

写这篇文章的起因是前段时间做企微三方应用，改个样式都得发版才能在企微中查看，至于日志，测试环境尚可使用vConsole查看，但是一到生产环境就瞎了，一切问题都靠猜测，导致前端无法快速定位和解决问题。在X师兄的帮助下了解到了Whistle，发现非常的实用，以后老板再也不用担心(ma)我找不到bug了。好了，废话不多说，开始上干货。

一、Whistle 安装&使用

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

1.安装工具

// 使用此命令一键安装并启动whistle
npm i -g whistle && w2 start --init
// 命令注释：
// npm i -g whistle 全局安装whistle
// w2 start --init 启动whistle (--init)设置全局代理（即系统代理）

2.常用命令

设置系统代理：

w2 proxy

关闭系统代理：

w2 proxy --off

启动whistle：

w2 start

重启whistle：

w2 restart

停止whistle：

w2 stop

最后可以通过 Chrome 打开 Whistle 的管理界面（ 127.0.0.1:8899 或 local.whistlejs.com）查看抓包及配置规则调试请求。

启动完whistle后，接着进行代理配置

3.配置代理

篇幅有限，这里只提供本人最推荐的浏览器代理方式，其他方式请自行挖掘。

安装浏览器代理插件

使用科学上网下载并安装[SwitchyOmega]插件

选择[新建情景模式]

输入情景模式名称，其余选项可不更改，点击[创建]

根据下图进行配置，全部配置完成后。打开Whistle管理界面

配置https

• 下载根证书
  

• 安装根证书
  

• iOS安装证书
  1.打开safari，输入rootca.pro，按提示安装证书。（也可以直接扫描根证书二维码）
  注意：iOS 10.3 之后需要手动信任自定义根证书，设置路径：Settings > General > About > Certificate Trust Testings
  
  2.将设备跟PC设备在同一局域网并设置WiFi代理

前期准备已就绪，接下来就可以愉快的开(ban)发(zhuan)了

二、本地开发调试

本地开发前，我们先利用Whistle的反向代理来进行域名转发。当访问外网地址时会转发到我们本地，这样就可以本地开发调试企微/公众号等三方项目了。

Whistle规则配置

打开Whistle管理面板，点击侧边栏Rules，在右侧命令编辑框输入如下配置：

# 反向代理 前面地址为企微授权地址 后面地址为本地开发环境地址
https://xxx-xx.gaojihealth.cn/ http://xxx-local.gaojihealth.cn:9999/

此图仅做展示，实际开发中验证过企微授权是没问题的

三、利用whistle查看DOM节点及其样式，通过log快速定位问题

whistle集成了weinre的功能，同样只需配置一条规则即可通过在pc上通过weinre修改网页的DOM结构及其样式：
打开Whistle管理面板，点击侧边栏Rules，在右侧命令编辑框输入如下配置：

# 对以下请求地址，启用JS报错、DOM节点、network请求等调试配置
xx.gaojihealth.cn weinre://test

Whistle管理面板的菜单栏中点击Weinre->test

接着在移动端中 重新访问页面，此时即可在PC端对页面进行调试

结语

在前端技术发展如此迅速的今日，虽身处前端业务流水线中，但仍要有文能提笔控萝莉，武能上马定人妻的雄心壮志。路漫漫其修远兮，吾将上下而求索。
愿天下没有前端做题家，但行好事，莫问前程。