使用场景

在日常开发中，往往会碰到许多在真机上才会出现的问题，在测试环境尚且可以通过发布代码解决，遇到线上问题时，怎么去快速定位问题调试代码呢？这里推荐调试神器whistle，有了神器，你可以：

• 在电脑本地编码，手机上直接看页面效果，无需发布到服务器，调试效率up！up！up！
• 可在微信及浏览器或其他允许代理的app中调试h5页面，通过代理模拟线上请求环境，提前进行生产验证，无需等前端发布。
• 可以抓包生产返回的数据，定位问题
• （其他暂未发掘的功能，如有补充，评论区讨论哈...）

使用步骤

whistle 安装：

Node安装成功后，执行如下npm命令安装whistle

sudo npm install -g whistle

whistle 启动：

 whistle start

然后会自动生成代理地址和端口。

image.png

访问 http://127.0.0.1:8899/#rules 可以进入规则配置页。

网络代理设置

ios 手机设置

WI-FI选择

手机和电脑需要连接同一个网段下的wifi，才支持代理测试

https 证书信任

进入 whistle 管理台，点击头部 https 按钮，选中 Capture TUNNEL CONNECTs， Enable HTTP/2，相机扫码打开链接下载证书（如果扫码不行就直接下载了再传到手机，ios下需要隔空投送才能打开证书安装）。

先设置-通用-描述文件与设备管理，安装证书。

再选择通用-关于本机-证书信任设置，信任 whistle 证书。

以上是ios的设置，安卓也类似，需要安装证书，信任证书，打开开发者调试。

代理设置

手机连接和电脑一样的wifi，将wifi设置手动代理为 whistle 启动时显示的 ip 和 端口。

whistle 规则设置

将 whistle 规则配置为代理的域名指向本地开发 ip 和端口。比如访问 https://test.whistle.com/s/home/ 时代理到本地开发环境http://0.0.0.0:5000/ 配置如下：

# 配置 host
https://test.whistle.com/s/home/  http://0.0.0.0:5000/ 
# 配置资源
/test.whistle.com\/js\/(.*)\.(.*)/ http://0.0.0.0:5000/js/$1.$2

具体参考匹配原则 。

最后

最后可以愉快的在本地进行开发，手机真机上快速显示效果啦。

Weinre

weinre 是一个强大的移动端调试工具，whistle 已经将它集成在内了。通过它我们可以调试各种样式真机兼容问题。

新建 Values weinre如下，key 可以为空。

image.png

再新建规则

test.whistle.com weinre://test

选择 test 匹配，打开新页。

image.png

刷新手机页面，这时就看到 html 调试页面。

image.png