今天在开发页面时遇到了一个问题，如下图。说白了就是 本地改的代码在本地运行项目后无法生效，当时感觉天要塌了，因为印象中把新代码提交到预发流程是很麻烦的，而且无法实时调试开发起来还是太艰难了。之前在字节有任意门，阿里有摩天轮，但初来腾讯还不知道有什么自研工具，就在我手足无措之时，mt 为我打开了新世界的大门：Whistle
我可以先通过一个例子来讲一下 Whistle 的使用场景
H5 页面的开发流程是这样的
- 打包：把你写的 React/Vue 源代码，通过 Webpack/Vite 编译成纯 HTML + JS + CSS 文件（静态文件）
- 上传服务器：把这些文件部署到服务器上，比如 h5.example.com
- 原生 App 加载：App 里的 WebView 通过 URL 访问这个地址，就能显示 H5 页面了
所以每次改一行代码，都要走"改代码 → 打包 → 上传 → App 里刷新" 的流程，非常痛苦
但是用 Whistle 代理后，一切都会变的不一样
正常流程：
App WebView ──请求──> https://h5.example.com/app.js ──> 线上服务器返回线上代码
用 Whistle 代理后：
App WebView ──请求──> https://h5.example.com/app.js
│
Whistle 拦截！
│
▼
返回你本地电脑上的 localhost:5173 的开发代码
原理就是：
- 手机和电脑连同一个 WiFi
- 手机设置 HTTP 代理指向电脑上的 Whistle
- 手机上所有网络请求都会经过 Whistle
- Whistle 根据规则，把对线上 H5 地址的请求劫持，转发到你本地 Vite 开发服务器
- App 以为自己在加载线上页面，实际上拿到的是你本地正在开发的代码。
所以 Whistle 本质是一个抓包工具，可以做到拦截线上页面请求数据，再响应本地代码。
对 Whistle 有了大概的了解，接下来就要学习一下如何使用，由于本人比较懒，阅文无数后找到了一个详细且通用的文章，有兴趣的可以去看一下～
