whistle安装以及使用

一**、**whistle安装

1、安装node

在Windows系统中调用Node.js的LTS版本安装包。可以通过wget命令下载并解压至当前目录以实现默认安装。

安装完Node后，在cmd中执行node -v，查看当前Node版本。

2、安装whistle

安装指令（MacOS或Linux系统中普通用户需在终端中执行时先输入sudo, 如: sudo npm install -g whistle）：

$ npm install -g whistle

当然，如果npm安装的速度太慢，可以使用xxx镜像进行安装：

npm install cnpm -g --registry=http://registry.m.xxx.com/ cnpm install -g whistle 或者直接指定镜像安装： $ npm install whistle -g --registry=http://registry.m.xxx.com/

安装完成后，请在命令行界面中执行whistle --help或w2 --help（建议这些命令操作简单），以便验证安装是否完成。若正确显示帮助信息，则表示安装成功。

whistle常用的一些命令：

w2 start // 启动whistle (注：每次电脑开机后，记得在cmd中输入该命令启动whistle) w2 restart // 重启whistle w2 stop // 停止whistle w2 run // 调试模式启动whistle(主要用于查看whistle的异常及插件开发)

3、浏览器配置代理

获取可靠的浏览器代理插件并访问其详细信息：...https://cf.jd.com/download/attachments/384176802/Proxy SwitchyOmega-ok?version=2&modificationDate=1619312713000&api=v2

（2）浏览器引入插件

Chrome浏览器地址栏输入：chrome://extensions/

打开“开发者模式”

加载已解压的扩展程序，找到下载的插件路径，导入

添加成功后，最终插件页效果如下图所示：

（3）浏览器代理配置

完成安装后的插件配置过程中，在浏览器的入口位置（即位于地址栏旁边的位置）会自动显示一个标志性的图标（即SwitchyOmega标志），这个图标通常呈甜甜圈状并标有标识符"SwitchyOmega"。点击该图标进入选项界面以进行配置设置。

进入“选项”页面，

1）新建whistle代理，情景模式选择默认("代理服务器")；

通常需要为代理服务器设置相关信息以便于本地开发。根据上图配置协议、地址和端口等参数。

3）清空掉“不代理的地址列表”

4）点击“应用选项”按钮保存

新建一个whistle代理（代理本地）完成。

4、安装HTTPS证书

在浏览器地址栏中打开http://127.0.0.1:8899后，在HTTPS协议下选择或检查TUNNEL CONNECTs选项以启动下载流程

获取下载的数字证书，并完成其安装。对于https数字证书的安装，请确保在配置中指定其为 trusted root certificate directory。

mac下：

打开下载的rootCA.crt，双击下图不被信任的whistle证书

双击带交叉的whistle证书，选择始终信任即安装完成

5、配置host代理规则

在浏览器地址栏输入：http://127.0.0.1:8899/

二**、**手机配置代理

通常情况下，在电脑完成模拟开发后，则应在手机端进行真实机测试。而在尚未将产品发布至线上平台之前，则若希望访问测试页面，则必须确保手机设备与相应的网络代理建立连接，并且以便实现正常的网络接入。

（1）手机连上公司WiFi

（2）在连接WiFi过程中，配置代理，

注意：如果手机需要连接127.0.0.1的代理，请按照以下步骤操作：首先，在手机端输入IP地址并访问http://127.0.0.1:8899页面；其次, 单击页面右上方的"在线"标识；最后, 在命令提示符窗口中输入"ipconfig", 以便查看IP地址

IOS系统：依次点击对应的WiFi链接并下拉滚动至配置界面后，在此界面中选择并下拉滚动至并点击'配置代理'选项；随后单击'手动'按钮后，在弹出的对话框中依次输入设备的公网IP地址及端口号设置

Android设备：通过长按Wi-Fi连接 -> 进入网络设置并选择"修改网络" -> 向下滚动至选项菜单 -> 选择高级设置并查看详细选项 -> 与iOS设备同步

（3）安装证书,手机扫如下二维码，下载证书，

Android手机：

打开预览好的文件→设置锁屏密码→依次→在弹出的对话框中键入证书名称（可任意选择）→勾选「VPN及应用相关项」（需要注意的是：必须选择「VPN及应用相关项」才能确保后续调试时内容正常显示）

iOS手机：

在完成手机设置代理操作后，请将Safari地址栏输入rootca.pro，并按照提示完成证书安装。此外还可以通过 whistle 安卓版应用中的二维码进行扫描完成证书安装。

2）在获取到证书后，请按照以下步骤操作：首先打开设备并进入设置应用，在通用选项中找到并选择"描述文件"功能项；随后在显示的所有设备列表中找到与当前设备型号一致的设备，并将获取到的证书导入至该设备；最后查看该设备的相关说明文档以完成安装操作。

信任证书：进入设置——>通用——>证书信任设置——>找到安装的证书开启即可

安装完成后，在手机的安全中心区域完成证书的信任配置工作。具体操作如下：首先打开设置选项，在通用菜单中找到关于本机的相关子项；接着进入"证书信任设置"界面；最后选择需要信任的证书进行配置

=====>到这里，手机配置代理完成！

三**、**** whistle使用**

whistle相关功能

1、host代理配置

在whistle的Rules界面中可以配置host 例如：

127.0.0.1 wqs.kkk.com

当访问wqs.xxx.com及其子域名如wqs.xxx.com/..等时

提示：在配置界面中，请采用#标记来标识目标信息。
其他相关提示请参考host规则配置注意点。

2、network抓包

在 whistle 的网络界面上，可以访问已连接至当前代理的设备（包括 PC 和移动端），在执行网络请求过程中所获取的相关数据。例如，在路由器或服务器上的详细日志信息。

如图所示：在下方的输入框内，在network右上方

network页面左侧：whistle界面导航栏，

network页面中间：当前的请求包列表

在网页的下方部分设置有一个输入字段，在此处可键入需查询的相关数据包名称以实现自动匹配功能于包含这些关键码的数据包中。

在页面中央选择一个请求，在其右上方显示该请求的相关参数（包括request头header、webForms以及等）

在网络页面右下方的位置处显示的是选中的请求所返回的数据参数。当这些返回的数据是以JavaScript对象格式呈现时，在body字段中即可找到相关信息；而如果返回的是XMLHttpRequest格式的数据，则应在JSONView字段中查询。

3、页面重定向

在Rules界面中，通过redirect://命令实现访问页面的重定向。例如：

点开"百度一下"就能明白

当通过该代理设备访问baidu.com时，页面将被自动转发至xxx.com，并表现为域名和内容将被自动转移至xxx.com

4、模拟慢速网络及接口错误

完成功能开发后我们经常需要进行降级处理以及模拟慢速接口体验优化行为以应对可能出现的问题那么我们可以通过resDelay://和statusCode://来模拟慢速及接口错误的表现如前所述：

获取优惠券信息

获取优惠券信息

在发送至wq.xxx.com/official_account/queryCouponInfo接口的HTTP请求中，HTTP状态码被模拟为500的状态。

[wq.xxx.com/official_account/queryCouponInfo](HTTP://wq.jd.com/official_account 获取优惠信息 "wq.xxx.com/official_account 获取优惠信息") resDelayValue: 1000

当发起wq.xxx.com/official_account/queryCouponInfo接口时，该HTTP请求的操作时间会被模拟为存在1秒的延迟状态。

5、mock接口数据

在开发过程中，在你遇到接口返回的数据内容不符合你的预期时，请考虑使用 whistle 库来生成符合预期的测试数据，并以此为基础进行测试与开发工作。那么该如何 mock 数据呢？

在操作流程指引中对应于代理选项界面，请在系统控制台中键入：模拟数据接口 tpl://{模拟数据名称}

该连接指向https://wq.xxx.com/mcoss/data/get?func=item_comm 并通过tpl标签实现参数传递

该采用名为‘item_comm’的模拟数据替代https://wq.xxx.com/mcoss/data/get?func=item_comm所返回的数据内容。完成规则配置后，在值页面设置相关参数时需进入values界面并设置相应的模拟数据内容。操作方法是可通过Ctrl+点击选中模拟数据名称（item_comm）直接切换至values页面，并依照原有的接口返回格式对这些模拟数据进行调整。

若返回的数据采用jsonp格式编码，则应特别注意确保所有调用中的 callback 名称保持一致。
系统会动态地将 {callback} 字段设置为其对应的值。

6、注入eruda

由于在移动端没有内置的console控制台而导致无法查看日志信息，在这种情况下调试起来会非常困难难以迅速定位问题因此可以考虑通过向页面中注入一段JavaScript文件来模拟console的功能从而帮助更好地解决问题

首先，在Rules界面对应的代理选项界面中，输入：待注入页面 htmlAppend://{js文件名}

例：https://m.xxx.com/ htmlAppend://{html_test}

当将PC端及移动端设备接入该代理后，在访问m.xxx.com时，均会在页面上嵌入一段JavaScript脚本。完成规则配置后，请进入值域界面并设置模拟数据。通过按下Ctrl键并点击模拟数据名称（html_test），可快速切换至值域界面，并编写JavaScript脚本内容。

注入页面的js代码：

配置好代理规则之后访问该网站地址m.xxx.com时会注意到一个齿轮图标出现这个齿轮图标即是模拟控制台入口点击该齿轮图标后即可查看打印的日志信息

当使用htmlAppend方法注入JavaScript代码时，在进行页面内容注入操作时，目标网页的域名必须明确标注。举个例子，在访问http://st.jingxi.com/wxsq_project/expire_coupon/index.shtml这一页面时，请确保其域名信息与当前网页一致无误，并正确引用外部资源链接如：http://st.jingxi.com/wxsq_project/expire_coupon/index.shtml "st.jingxi.com/wxsq_project/expire_coupon/index.shtml"

配置规则时必须遵循以下连接：st.jingxi.com/wxsq_project/expire_coupon/index.shtml htmlAppend://{html_test} （✔）

绝对禁止采用以下方式：st.jingxi.com HTML拼接{html_test} (✖)

由于采用错误的配置方式，在每个包含有st.jingxi.com域名的页面或接口中都会被恶意代码注入JavaScript脚本。当且仅当当前页面中的某个接口恰好也是st.jingxi.com时，并且返回的数据采用JSONP格式，则会导致所有此类请求在执行JavaScript回调函数时都会出现解析失败的情况。

7、配置weinre

调用eruda.js后，在移动端能够通过console输出日志信息。当出现样式兼容问题时，在调试CSS会带来一定的不便。则可借助weinre进行相关调试。

在对应的代理选项界面上设置规则：待注入页面为$weinre://{名称}。

我们提供详细的官方信息如下：www.wqs.xxx.com/wxsq_project/jx_youxuan/index.html
我们的官方网站地址为：www.wqs.jd.com/wxsq_project/jx_youxuan/index.html "www.wqs.xxx.com"
v in re: test1

按下Ctrl+S键进行保存操作。然后将鼠标移动至winre界面中,系统会自动生成下拉菜单列表。单击新建的test1选项,随后会跳转至winre界面中。

此时，在targets下显示的内容为空（为空），这表示尚未与该代理建立连接并启动规则配置界面。即可在PC端或移动端访问规则配置界面。

注意：在使用京喜小程序或京喜APP时打开的页面会自动将wqs.xxx.com域名映射为st.jingxi.com或m.jingxi.com，在rule界面进行规则配置时建议首先查看当前页面的链接地址设置是否正确；如果未正确设置，则系统会在rule界面提示配置wqs问题

目前，在 targets 中显示绿色连线表明已有设备打开了规则配置页面。如果有多台设备与此代理相连时，在 Target 下会呈现多条不同颜色的连线。单击相应的连线即可在其他界面显示相应的连线内容。Weinr 界面注释：

Remote：weinre首页

Elements(*)：查看DOM结构

Resources：查看session等资源数据

Network: 查看网络请求（抓包）

Console(*):控制台

目前，在Elements部分查找DOM结构，则可以查看样式在移动端的兼容性问题

当前可以选择对应的DOM元素，在右侧则可以查看相应的CSS样式，并且在移动端设备上会呈现相对应的样式勾选状态。

whistle代理的问题

1、无限重定向问题

当遇到页面提示重定向次数过多导致内容不展示报错的情况时，在开发过程中通常会遇到此类问题。这种情况通常是由于代理服务器未能正确配置对应域名下的HTTPS流量被转换为HTTP流量的操作。然而，在某些特殊情况下（即如果在发起的HTTP流量中又存在强制性的HTTP流量被转换为HTTPS流量的操作），这会导致原本通过HTTPS连接过来的流量又被重新导向到HTTPS上（即HTTP流量被转换成HTTPS流量）。这种反复操作会形成无限循环的重定向过程，并最终导致页面出现错误信息。针对这种情况，在配置代理规则时需要特别注意并关闭该特定条件下的HTTPS转HTTP转换功能

比如：login登陆请求

2、host规则配置注意点

在代理host配置时，需要有几个注意点：

（1）对应ip的域名尽可能做到越具体越好；例如，在本地开发一个Legos页面其链接为wqs.xxx.com/index.static.shtml

127.0.0.1:7000 wqs.xxx.com （✖）

127.0.0.1:7000连接指向wqs.xxx.com/index.static.shtml （✔）

原因：前一种代理方式会导致所有wqs.xxx.com域名都被重定向到本地服务器127.0.0.1如果需要访问其他位于[wqs.xxx.com/子目录下的网页或接口资源，则会无法正常获取这些内容因此建议尽可能使用更具体的域名配置以避免此类问题的发生

3、常见问题

①证书安装及下载：扫码或访问rootca.pro

②VPN下无法下载证书，需要断开VPN下载

③手机访问代理Https证书要勾选上

④关闭whistle代理时需执行 停止whistle命令

$ w2 stop

关闭 whistle 后必须在浏览器中右上角-设置-高级-系统-SwitchyOmega 代理设置禁用,否则会影响本地网络的正常使用