whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）

问题：移动端页面适配不同型号手机和不同浏览器调试

使用whistle原因

在前端页面开发过程中经常遇到真机页面与PC上的Chrome浏览器调试器不一致，例如iPhone上的Safari浏览器、微信自带浏览器等自带的底部导航栏无法在PC上的Chrome浏览器上模拟。
在真机上调试页面又无法查看页面文档结构以及元素属性等代码，导致页面Bug无法定位等问题。
因此，在开发过程中需要使用whistle在真机上进行移动端页面跨平台调试，在PC上预览移动端的页面结构等调试功能。
whistle是基于Node实现的跨平台web调试代理工具，具体详情请自行百度，在此只介绍使用方法不多做赘述。

whistle使用方法

（Windows7环境下，其他环境请参考对照使用）

1、下载安装

1. 首先下载 node.js 并安装
2. 打开CMD（win+R 输入cmd点击确定）
3. 通过NPM下载whistle全局安装（在CMD中输入npm install -g whistle）
4. 下载完成后运行whistle（在CMD中输入w2 start默认打开端口8899，也可输入w2 start -p 8888修改端口号为8888，以此类推）
5. 安装Chrome代理插件：推荐安装 SwitchyOmega 。下载SwitchyOmega_Chromium.crx文件，将其拖动Chrome扩展程序（在Chrome浏览器地址栏中输入chrome://extensions/）中。
   
   若直接拖动到Chrome扩展程序中报错：
   
   可以把.crx后缀改为.rar后缀直接解压，再通过点击“加载已解压的扩展程序”选择解压后的文件夹进行插件安装。
   
   
6. 配置SwitchyOmega代理服务器

---

2、配置Wi-Fi代理

1.移动端Wi-Fi配置（以iPhoneX为例）

将移动设备与PC接入同一局域网Wi-Fi，并手动配置代理，输入PC服务器及设置的端口号

2.PC端防火墙配置（以Windows7为例）

手机调试或者远程访问时，可能会因为whistle所在机器的防火墙设置，导致无法远程访问，可以通过设置白名单，或者关闭防火墙，具体操作如下：

在控制面板中打开Windows防火墙

选择高级设置

选择入站规则

选择新建规则

选择端口点击下一步

选择特定的本地窗口，输入w2 start时填写的端口号（默认为8899），点击下一步

点击下一步

点击下一步

点击下一步

点击下一步

输入名称，命名为test，点击完成

查看test规则

3.访问配置页面

启动whistle及配置完代理后，用Chrome浏览器(由于css兼容性问题界面只支持Chrome浏览器)访问配置页面，如果能正常打开页面，whistle安装启动完毕，可以开始使用。

可以通过以下两种方式来访问配置页面：

方式1：域名访问 http://local.whistlejs.com/
方式2：通过ip+端口来访问，形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899
方式2：通过命令行参数 -P xxxx 自定义webui的端口(xxxx表示要设置的端口号)，自定义端口支持上述两种方式访问，也支持 http://127.0.0.1:xxxx

---

3、配置whistle规则

1. 点击Rules输入要调试页面的本地服务器地址及端口号加weinre://test使用whistle内置的weinre进行调试。
   如下图所示，其中“test”为weinre分类名，可随意设置。
   
2. 点击Weinre再选择分类名“test”
   
3. 点击选择访问的页面链接
   
4. 再点击Elements就可以在PC上调试真机的移动端页面啦
   

本文相关链接

https://nodejs.org/zh-cn/download/
https://github.com/FelisCatus/SwitchyOmega/releases/
http://wproxy.org/whistle/install.html

本文参考链接

https://segmentfault.com/a/1190000019969743
https://segmentfault.com/a/1190000016058875?utm_source=tag-newest
https://www.cnblogs.com/fafa-coding/p/10833547.html
https://imweb.io/topic/5981a34bf8b6c96352a59401
https://jingyan.baidu.com/article/870c6fc317cae7b03ee4be48.html
https://www.jianshu.com/p/2584ebdb88c9

后续篇：配置证书访问HTTPS线上站点

1. 点击选择HTTPS
   
2. 勾选弹窗上的Capture TUNNEL CONNECTs选项
   
3. 移动端设备扫描二维码下载证书，在设置中安装信任证书
   
   
   
4. 在PC上调试，调试方法与本地路径相同，在此不重复介绍