如何使用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