2022-03-10-【架构】Whistle+SwitchyOmega微前端

Whistle 安装

SwitchyOmega chrome 扩展安装

配置

h5 真机联调

Whistle 的规则确实运行在本地机器上，但通过网络代理，任何设备（手机、平板、其他电脑）都可以“借用”这些规则。

要实现真机（手机）调试并看到 vConsole，你需要完成**“让手机流量经过电脑 Whistle”**的配置。以下是标准的操作全过程：

---

第一步：确保手机与电脑在同一网络

手机和安装了 Whistle 的电脑必须连接在同一个 Wi-Fi 下，且彼此能够 ping 通。

---

第二步：获取电脑的局域网 IP

在 Mac 终端输入以下命令：

ifconfig

找到 en0 对应的 inet 地址（通常是 192.168.x.x 这种形式）。

---

第三步：手机端配置代理

1. 打开手机 Wi-Fi 设置，找到当前连接的 Wi-Fi。
2. 选择 配置代理 -> 手动。
3. 服务器/主机名：填写你刚才获取的电脑 IP（如 192.168.1.100）。
4. 端口：填写 Whistle 的启动端口，默认是 8899。
5. 保存设置。

---

第四步：手机端安装并信任证书（关键！）

因为现代网站几乎都是 HTTPS，如果不做这一步，手机访问网页会提示“网络连接不安全”，且 Whistle 无法注入 vConsole。

1. 下载证书：手机浏览器访问 http://rootca.it，点击下载证书。
2. 安装证书：

• iOS：设置 -> 已下载描述文件 -> 安装。
• Android：设置 -> 安全 -> 从存储盘安装证书（不同机型路径略有差异）。

3. 信任证书（最易漏掉）：

• iOS（必须）：设置 -> 通用 -> 关于本机 -> 证书信任设置 -> 找到 Whistle 证书，打开开关。
• Android：通常安装后即生效，部分系统需在受信任的凭据中确认。

---

第五步：在电脑 Whistle 编写规则

在电脑端的 Whistle 界面（127.0.0.1:8899）中编写你之前的规则：

# 代理你要调试的线上域名，并注入 vConsole 和 禁用缓存
m.example.com  whistle.inspect://vConsole  cache://no

---

第六步：真机验证

1. 在手机上打开 Safari 或 Chrome 浏览器。
2. 输入 https://m.example.com。
3. 奇迹发生：你会发现手机网页的右下角出现了绿色的 vConsole 按钮！

---

进阶：如何调试“他人”的页面？

如果你想调试一个不是你开发的页面（比如某大厂的官网），方法完全一样：

1. 在 Whistle 里写：https://www.baidu.com whistle.inspect://vConsole。
2. 只要你的手机挂了你的 Whistle 代理，你打开百度也能看到 vConsole，并能看到百度页面的内部请求和 Log。

---

常见问题排查：

• 手机打不开网页：检查电脑防火墙是否关闭，或者是否允许 8899 端口入站。
• 看不到 vConsole：
• 检查 Whistle 的 HTTPS 菜单里是否勾选了 Capture HTTPS CONNECTs。
• 检查手机上是否开启了证书的“完全信任”开关。
• 检查手机浏览器是否使用了之前的缓存（尝试清理浏览器数据或使用隐私模式）。

总结

本地安装的 Whistle 就像一个中转站。手机把请求发给中转站，中转站根据你 pc 端配置的 Rules 把 vConsole 脚本“塞”进网页里，再发回给手机。所以，只要手机设置了代理到本机的电脑，它就能享受电脑上配置的所有调试规则。