Whistle ツールでデバッグするには？

📝 ワンクリックインストール

こちらの Whistle インストールチュートリアルを参照してください。

🖖 モバイルシナリオのデバッグ方法

環境を整えたら、次の手順に従います。

ステップ 1：ネットワークプロキシを設定する

同一のローカルネットワーク、つまり同じ WiFi に接続していることを確認します。
WiFi のプロキシ設定を行い、下記からプロキシ情報を取得して Server と Port を紐付けます。

ステップ 2：証明書をインストールする

証明書を正しくインストールします。「HTTPS」をクリックして QR コードをスキャンするか、ブラウザで上記の「IP:Port」アドレスを開きます。

Android：CA 証明書のインストール入口。「証明書」で検索します。

iOS：証明書のインストール入口。「Profiles & Device Management」

アプリのデバッグ用にプロキシを紐付けるには？

以下では TikTok アプリの WebView 画面をデバッグする例を使います

デフォルト設定：

Rules グループを追加：


# すべてのトラフィックをローカルプロキシ経由。ここでは VPN が必要
* 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