如何使用Whistle工具进行调试？
📝 一键安装
可参考此处Whistle 安装教程
🖖 如何调试移动端场景
准备好环境后，按以下步骤操作：
步骤一：配置网络代理
-
保证在同一个局域网，即连接相同 WiFi 即可。
-
进行 WiFi 的代理配置，代理信息从下面获取，关联 Server & Port 即可。
步骤二：安装证书
正确安装证书，点击「HTTPS」进行扫码或者打开浏览器并访问上面的地址「IP:Port」。
Android：安装 CA 证书入口，搜索「证书」即可
iOS：安装证书入口，「Profiles & Device Management」
如何关联代理调试 APP？
下面以调试 Tiktok App 中 Webview 的界面为例
默认配置时：
新增 Rules 组：
# 所有流量走本地代理，此处需要科学上网
* socks://127.0.0.1:4781
# 针对 tiktok 的相关配置
disable://capture *.tiktok.com *.tiktokv.com *.byteoversea.com *.apple.com *.tiktokv.us *.us.tiktokv.com
# 查找一个 Webview 的入口，查看当前 Webview 的 Useragent，举例子「Settings and Privacy」/「Support」/「Help Center」
support.tiktok.com/ redirect://https://www.whatsmyua.info
# 重定向到执行业务场景
# support.tiktok.com/ redirect://https://www.xxx.com/xxx未代理前显示内容如下：
成功代理并重定向页面如下：
如何集成 vConsole、eruda、mdebug 等调试 H5 页面工具的插件？
安装插件
npm i -g whistle.inspect配置插件
www.baidu.com/ whistle.inspect://eruda
www.baidu.com/ whistle.inspect://vconsole
www.baidu.com/ whistle.inspect://mdebug