whistle 介绍
背景
在开发移动端 原生 H5 或者 hybrid时，会遇到需要抓包、mock数据等需求，经过我自己的一番探索，发现 whistle 这款工具十分好用。我经常运用于如下场景：
- HTTP 代理
- Mock 数据
- 抓包、配置规则
使用案例：
比如我在处理图片接口时，会遇到图片源403的问题，这时候我们就可以通过 whislte 代理接口，去除接口请求源，从而能正常从服务器获取数据。
又比如，我需要模拟H5活动页中的特殊场景，比如凌晨活动自动刷新功能，😉 我不可能等到凌晨再刷新页面，这时候就可以mock接口数据，刷时间到凌晨，从而完成刁钻的功能测试。
whistle 介绍
概念：
Whistle 是一款基于 Node.js 开发的跨平台网络抓包与调试代理工具。它通过在本地启动一个代理服务器，拦截、转发并记录所有经过它的网络请求（如 HTTP、HTTPS、HTTP/2、WebSocket 等），从而帮助开发者查看、分析甚至修改网络数据，极大地便利了前端开发、API 调试和移动端测试等工作 。
地址：https://github.com/avwo/whistle
安装 whistle
安装Whistle：
npm install -g whistle启动服务：
w2 start访问配置页：
- 域名访问 http://local.whistlejs.com/
问题：
安装https证书后，访问网页可能会提示“您的连接不是私密连接”。
这可能是由于证书没生效导致的。重启一下电脑即可。
移动端调试
注：可以暂时先配置pc端，调通了再配置移动端。
whistle 证书配置
查看代理地址：
nathanchen@NathansMacBook-Pro ~ % w2 start [i] Whistle@2.9.103 started [i] 1. Use your device to visit these URLs and note which one works: http://127.0.0.1:8899/ http://172.16.8.200:8899/ Note: If none are accessible, check your firewall settings For help, see https://github.com/avwo/whistle [i] 2. Set your device's HTTP PROXY to the working IP & PORT(8899) [i] 3. Open Chrome and visit http://local.whistlejs.com/ to begin配置流程：
- “设置”>“通用”>“关于本机”>“证书信任设置”。
- 在“针对根证书启用完全信任”下，开启对这个证书的信任*
移动端查看页面
基础信息：
XXX_5G：172.20.9.210 // http://172.18.9.210:8080/photo?type=-2快捷地址：
http://172.16.12.78:8080/移动端显示页面配置步骤：
- 确认网络连接
确保你的电脑和iPhone连接到同一个Wi-Fi网络。这是手机能够访问电脑本地服务的基础。
- 查找电脑的本地IP地址
你需要知道电脑在局域网中的IP地址来代替localhost。
- macOS用户：打开
系统偏好设置>网络，可以看到IP地址，通常是192.168.x.x或10.x.x.x的形式。也可以在终端输入ifconfig查找。 - Windows用户：在命令提示符中输入
ipconfig，查找IPv4 地址。
- 在iPhone上访问本地项目
在iPhone的Chrome浏览器地址栏中，输入以下地址进行访问：
http://<你的电脑IP地址>:8080/photography?type=-2
例如，如果你的电脑IP是192.168.1.100，则访问：
http://192.168.1.100:8080/photography?type=-2
疑问与解答：
1）本地项目，移动端查看页面
需求：电脑本地启动项目，访问地址为 http://localhost:8080/photography?type=-2， 开发者希望在 ios移动端的谷歌浏览器上查看页面，请问该如何实现？1）本地项目，移动端查看页面
需求：电脑本地启动项目，访问地址为 http://localhost:8080/photo?type=-2，开发者希望在 ios移动端的谷歌浏览器上查看页面，请问该如何实现？
实现步骤：
- 确认网络连接
确保你的电脑和iPhone连接到同一个Wi-Fi网络。这是手机能够访问电脑本地服务的基础。
- 查找电脑的本地IP地址
你需要知道电脑在局域网中的IP地址来代替localhost。
- macOS用户：打开
系统偏好设置>网络，可以看到IP地址，通常是192.168.x.x或10.x.x.x的形式。也可以在终端输入ifconfig查找。 - Windows用户：在命令提示符中输入
ipconfig，查找IPv4 地址。
- 在iPhone上访问本地项目
在iPhone的Chrome浏览器地址栏中，输入以下地址进行访问：
http://<你的电脑IP地址>:8080/photography?type=-2
例如，如果你的电脑IP是192.xxx.1.100，则访问：http://192.xxx.1.100:8080/photography?type=-2
Weinre真机远程调试
Weinre(Web Inspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具， 它使用JS编写， 可以让我们在电脑上直接调试运行在手机上的远程页面。
**使用场景：**页面在手机，调试在电脑。
whistle内置Weinre：
1）配置调试地址：点击dev进入移动端调试页面
2）手机访问 H5 页面
比如：https://juejin.cn/user/2889939852205864
3）在 Weinre 中调试页面
whistle 实践
移动端抓包
基础配置：
- 手机和PC同一网络下
- 网络配置代理 ⇒ 手动 ⇒ 配置服务器和端口
nathanchen@172 ~ % w2 start [i] Whistle@2.9.103 started [i] 1. Use your device to visit these URLs and note which one works: http://127.2.0.1:8899/ http://172.18.9.200:8899/开发环境
操作步骤：
1）移动端访问本地开发网页
http://<你的电脑IP地址>:8080/photo?type=-22）whistle 配置 weinre
3）weinre 调试移动端网页
线上环境
操作步骤：
1）移动端访问网址
https://m.xxx.com/2）whistle 配置 weinre
https://m.xxx.com weinre://xxxm3）weinre 调试移动端网页（同开发环境）
重定向
**效果：**重定向 github 到 baidu
替换规则：
https://github.com https://www.baidu.com https://github.com redirect://https://www.baidu.com替换请求的数据
摄影数据mock
**需求：**目前本地请求接口http://localhost:8080/photog/big
接口返回部分数据在谷歌开发者工具中查看如下：
{"code":200,"msg":"Succ","data":{"list":[{"uid":134923,"avatar":"https://img.xxx.com/test.jpg?image/0/w/400","username":"test","fanCount":7,"followCount":0,"intro":"test账号","cert":[],"isTal":false,"islow":true,...}开发者希望将list中的第一个项目的"intro": “test账号”,改为"intro": “nathan账号”,
实现方案：
在 Values 中创建修改后的数据文件
- 在 Whistle 界面点击
Values标签。 - 点击
Create创建一个新的键值对，例如键名设为modifiedResponse.json。 - 在值的内容区域，将完整的、修改后的 JSON 响应体粘贴进去，确保已将
"intro": "test账号"改为"intro": "nathan账号"。
{"code":200,"msg":"Succ","data":{"list":[{"uid":1349678,"avatar":"https://img2.xxx.com/test.jpg?imageView2/0/w/400","username":"test账号","fanCount":7,"followCount":0,"intro":"nathan账号","cert":[],"isTal":false,"islow":true,...// 确保其余结构和数据与原响应完全一致},...// 其余 list 项]}}- 在 Whistle 界面点击
编写并启用规则
- 点击
Rules标签，在规则编辑框中输入上面提到的规则语句，参考如下：
- 点击
http://localhost:8080/app/photos/recommend/master?page=1 resBody://{modifiedResponse.json}- 确保规则已启用。
- 保存规则。
- 验证结果
- 回到您的浏览器，打开开发者工具的
Network选项卡。 - 访问
http://localhost:8080/photo/master页面，使其再次请求目标接口。 - 找到名为
recommend/master?page=1的请求，查看其Response选项卡，确认intro字段的值已成功变为"nathan账号"。
- 回到您的浏览器，打开开发者工具的
权限问题
图片 403
问题描述：
当用户访问http://localhost:8080/photography/test页面时，调用接口获取数据，
图片接口：
https://img.xxx.com/ps/2024/07/one/xxx==1720691006008.jpg?imageMogr2/auto-orient/thumb/!500x500r/strip/quality/90
返回状态码Status Code 403 Forbidden
问题分析：
在项目中，开发者一般通过给图片配置 referrerpolicy=“no-referrer” 来解决问题：
<img class="commission__wrap__arrow" referrerpolicy="no-referrer" src="./images/arrow__right.png" />中的referrerpolicy="no-referrer"
但是给项目的每个图片都这么配置，感觉不够优雅。
分析下原因，是由于 图片服务器检查 Referer，非白名单域名返回 403
**配置方式：**找到接口，处理掉图片接口的Referer即可
# 图片防盗链 img2.xxx.com referer:// img4.xxx.com referer://问题与参考
问题：
无法代理本地前端项目（localhost）：
https://github.com/avwo/whistle/issues/1145
参考：
- 为什么推荐使用Whistle而不是Fiddler、Charles！
- Whistle 让你满意的代理工具
- Whistle 开发调试最佳实践
