Wie debuggt man mit dem Whistle-Tool?
📝 Ein-Klick-Installation
Siehe dieses Whistle-Installations-Tutorial .
🖖 Wie man mobile Szenarien debuggt
Nach der Vorbereitung der Umgebung gehen Sie wie folgt vor:
Schritt 1: Netzwerkproxy konfigurieren
-
Stellen Sie sicher, dass Sie im selben lokalen Netzwerk sind, also mit demselben WiFi verbunden.
-
Konfigurieren Sie die WiFi-Proxy-Einstellungen, holen Sie die Proxy-Informationen unten und verknüpfen Sie Server und Port.
Schritt 2: Zertifikat installieren
Installieren Sie das Zertifikat korrekt: Klicken Sie auf „HTTPS“, um den QR-Code zu scannen, oder öffnen Sie den Browser und rufen Sie die Adresse „IP:Port“ oben auf.
Android: Einstieg zur CA-Zertifikatsinstallation, suchen Sie nach „Zertifikat“
iOS: Einstieg zur Zertifikatsinstallation, „Profiles & Device Management“
Wie verknüpft man einen Proxy zum Debuggen von Apps?
Nachfolgend am Beispiel der WebView-Oberfläche der TikTok-App
Standardkonfiguration:
Rules-Gruppe hinzufügen:
# Der gesamte Verkehr läuft über den lokalen Proxy; hier ist ein VPN erforderlich
* socks://127.0.0.1:4781
# Konfiguration für TikTok
disable://capture *.tiktok.com *.tiktokv.com *.byteoversea.com *.apple.com *.tiktokv.us *.us.tiktokv.com
# Einen WebView-Einstieg finden, den Useragent des aktuellen WebView prüfen, Beispiele: „Settings and Privacy“ / „Support“ / „Help Center“
support.tiktok.com/ redirect://https://www.whatsmyua.info
# Umleiten, um das Geschäftsszenario auszuführen
# support.tiktok.com/ redirect://https://www.xxx.com/xxxAngezeigter Inhalt vor dem Proxy:
Erfolgreich proxierte und umgeleitete Seite:
Wie integriert man Plugins für H5-Seiten-Debugging-Tools wie vConsole, eruda, mdebug?
Plugin installieren
npm i -g whistle.inspectPlugin konfigurieren
www.baidu.com/ whistle.inspect://eruda
www.baidu.com/ whistle.inspect://vconsole
www.baidu.com/ whistle.inspect://mdebug