Debuggen auf Mobilgeräten

In diesem Thema erfahren Sie, wie Sie JavaScript auf Mobilgeräten debuggen. Während der Entwicklung kann das Testen und Debuggen von Inhalten auf mobilen Plattformen sehr schwierig sein.

Überblick

In diesem Dokument erfahren Sie, wie Sie mit dem Debuggen auf Mobilgeräten beginnen, und es werden die folgenden Lösungen behandelt:

  • Debuggen auf iOS-Geräten
  • Debuggen auf Android-Geräten
  • Verwenden von Charles auf Mobilgeräten

Fehlersuche mit iOS

Mindestanforderungen für das iOS-Debugging

  • Safari Version 6+ läuft unter Mac MacOS
  • iPhone oder iPad mit iOS 6+

Verwenden von Safari Remote Debugging

Mit dem iOS 6-Update von Apple wurde das Safari Remote Debugging eingeführt, mit dem Sie Webseiten in der Safari-App auf iOS-Geräten debuggen können. Führen Sie zunächst die folgenden Schritte aus:

  1. Schließen Sie Ihr iOS-Gerät über ein USB-Kabel an Ihr Gerät an.
  2. Öffnen Sie auf Ihrem Gerät die die Einstellungen App. Wählen Safari Scrollen Sie zum Ende der Seite und öffnen Sie die Fortgeschrittene Speisekarte. Aktivieren Sie die Web Inspector Möglichkeit.
    Web-Inspektor
    Web-Inspektor
  3. Öffnen Sie das Gerät noch auf Ihrem Gerät Safari App und navigieren Sie zu einer beliebigen Webseite.
  4. Starten Sie auf Ihrem Mac Safari, öffnen Sie die Einstellungen (Safari > Einstellungen) und navigieren Sie zu den Advanced abschnitt. Aktivieren Sie die Menü "Entwickeln" in der Menüleiste anzeigen Möglichkeit.
    Entwicklungsmenü anzeigen
    Entwicklungsmenü anzeigen
  5. Öffne das Entwickeln Speisekarte. Sie sehen Ihr iOS-Gerät aufgelistet. Wenn Sie mit der Maus über Ihren Gerätenamen fahren, wird die URL zu der Site angezeigt, zu der Sie auf Ihrem Gerät navigiert haben.
    Finden Sie das Gerät
    Finden Sie das Gerät
  6. Wählen Sie die URL und a Web Inspector Das Fenster wird geöffnet, in dem Sie Inhalte in Ihrem mobilen Browser von Ihrem Desktop aus in der Vorschau anzeigen, überprüfen und debuggen können.
    Debuggen auf dem Desktop
    Debuggen auf dem Desktop
  7. In dem Ressourcen In diesem Abschnitt können Sie eine Vorschau der Webseite anzeigen und diese überprüfen. Bewegen Sie den Mauszeiger über Elemente in der Web Inspector hebt die entsprechenden Elemente im Browser Ihres iOS-Geräts hervor.
    Elemente überprüfen
    Elemente überprüfen
  8. Sie können auch die verwenden Debugger und Konsole Abschnitte zum weiteren Debuggen Ihrer Seite durch Festlegen von Haltepunkten, Protokollieren von Daten usw.

Fehlersuche mit Android

Mindestanforderungen für das Android-Debugging

  • Chrome 32+ läuft auf Mac oder Windows
  • Android-Gerät mit Chrome für Android 32+

Hinweis: Die Schritte in diesem Abschnitt wurden mit einem Gerät mit Android 11 durchgeführt.

Aktivieren des Debuggens auf Ihrem Gerät

Bevor Sie mit dem Debuggen von Inhalten auf Ihrem Gerät beginnen können, müssen Sie das USB-Debuggen in Ihren Geräteeinstellungen aktivieren.

  1. Wenn Sie Android 4.2+ verwenden, müssen Sie die Ihres Geräts aktivieren Entwickleroptionen bevor Sie das USB-Debugging aktivieren können. Öffnen Sie auf Ihrem Gerät die die Einstellungen App und wählen Sie die Über das Telefon Speisekarte. Suchen Sie die Ihres Geräts Build-Nummer und tippen Sie sieben Mal darauf.
  2. Geben Sie Ihr Gerätepasswort ein. Sie sollten nun eine Meldung sehen, die besagt: Sie sind jetzt ein Entwickler!
  3. Um auf die Entwickleroptionen in Android 11 zuzugreifen, kehren Sie zu den Einstellungen zurück und wählen Sie System.
  4. Erweitern Sie Erweitert, und tippen Sie auf Entwickleroptionen.
    Entwickleroptionen
    Entwickleroptionen
  5. Blättern Sie nach unten zu USB-Debugging und schalten Sie das Kippschalter ein.
    Aktivieren USB-Debugging
    Aktivieren USB-Debugging
  6. Weitere Einzelheiten finden Sie im Dokument Konfigurieren der Entwickleroptionen auf dem Gerät von Android.

Remote-Debugging mit Chrome für Android

Nachdem das USB-Debugging auf Ihrem Gerät aktiviert ist, führen Sie die folgenden Schritte aus, um das Remote-Debugging mit Chrome zu starten:

  1. Starten Sie auf Ihrem Computer Chrom und navigieren zu chrome://inspect#devices.
  2. Aktivieren Sie das Kontrollkästchen für USB-Geräte erkennen.
    Entdecken Sie USB-Geräte
    Entdecken Sie USB-Geräte
  3. Schließen Sie Ihr Gerät mit einem USB-Kabel an Ihr Gerät an. Auf Ihrem Gerät werden Sie in einem Dialogfeld gefragt, ob Sie das USB-Debugging zulassen möchten. Wählen Sie Zulassen, damit Ihr Computer eine Verbindung zu Ihrem Gerät herstellen kann.
    Verbindung zum Gerät zulassen
    Verbindung zum Gerät zulassen
  4. Öffnen Sie auf Ihrem Gerät die Chrom App und navigieren Sie zu einer Webseite.
  5. Zurückkehren zu Chrom auf deinem Computer. Auf der chrome://inspect#devices Seite sollten Sie Ihr angeschlossenes Gerät sehen. Unter Ihrem Gerätenamen sehen Sie eine Liste aller in Chrome auf Ihrem Gerät geöffneten Seiten.
    Verbundene Geräte
    Verbundene Geräte
  6. Um mit dem Debuggen einer Webseite zu beginnen, wählen Sie die Option prüfen Link unter der Seiten-URL. Dadurch werden Chrome's geöffnet Entwicklerwerkzeuge.
    Überprüfen Sie die Webseite
    Überprüfen Sie die Webseite
  7. Links von der Elemente Auf der Registerkarte können Sie das Gerätesymbol auswählen, um die Screencast-Funktion von DevTool zu öffnen. Auf diese Weise können Sie eine Live-Vorschau des Inhalts öffnen, wie er auf Ihrem Mobilgerät angezeigt wird. Weitere Informationen dazu, wie Sie mithilfe von Screencasting mit Ihrem Gerät interagieren können, finden Sie unter Googles Dokumentation.

Charles Proxy einrichten

Charles ist ein Webproxy, der auf Ihrem eigenen Computer ausgeführt werden kann und es Ihnen ermöglicht, Daten aufzuzeichnen, die über Ihren Webbrowser gesendet und empfangen werden. Besuche den Charles Website Weitere Informationen zu dieser Anwendung.

Mindestanforderungen für Charles

  • Charles ist kompatibel mit Windows, Mac und Linux
  • iOS- und / oder Android-Gerät

Führen Sie die folgenden Schritte aus, um Charles auf Ihrem Computer zum Laufen zu bringen.

  1. Herunterladen und installieren Charles auf Ihrer Maschine.
  2. Führen Sie auf Ihrem Computer aus Charles. Wählen Sie im Menü die Option Proxy> Proxy-Einstellungen. Stellen Sie sicher, dass ein Anschluss zugewiesen wurde (z. B. 8888).
    Proxy-Einstellungen
    Proxy-Einstellungen
  3. Wählen OK um Änderungen zu speichern und den Dialog zu schließen.
  4. Wählen Sie im Menü die Option Proxy> SSL-Proxy-Einstellungen. Sicherstellen, dass die Aktivieren Sie SSL-Proxy Option ist ausgewählt.
    SSL-Proxy-Einstellungen
    SSL-Proxy-Einstellungen
  5. In dem Ort Abschnitt, wählen Sie die Hinzufügen Taste. In dem Standort bearbeiten Navigieren Sie zum Dialogfeld Hafen Feld und eingeben 443. Wählen OK um diese Änderung zu speichern.
    Standort Port 443
    Standort Port 443
  6. Wählen OK zu schließen Standort bearbeiten Dialog.
    SSL-Einstellungen mit Standort
    SSL-Einstellungen mit Standort
  7. Wählen OK zu verlassen SSL-Proxy-Einstellungen Dialog.
  8. Navigieren Sie zu Hilfe> SSL-Proxy> Installieren Sie das Charles Root-Zertifikat auf einem mobilen Gerät oder einem Remote-Browser.
    Installieren Sie das Stammzertifikat
    Installieren Sie das Stammzertifikat
  9. Sie sollten eine Meldung sehen, die die lokale Server-IP und Portnummer (8888) identifiziert, die Sie für die Einrichtung des Geräts verwenden werden. Sie sollten auch die URL zum Herunterladen und Installieren des Zertifikats sehen. Kopieren Sie diese zur späteren Verwendung auf Ihren Computer.
    Zertifikatsnachricht
    Zertifikatsnachricht

Verwendung von Charles mit iOS-Geräten

In diesem Abschnitt erfahren Sie, wie Sie Ihr iOS-Gerät für die Arbeit mit Charles auf Ihrem Computer einrichten.

  1. Stellen Sie auf Ihrem Gerät sicher, dass Sie mit demselben Netzwerk wie Ihr Computer verbunden sind. Sie können dies überprüfen, indem Sie zu navigieren Einstellungen> Wifi und Wählen Sie den Netzwerknamen aus, um erweiterte Optionen anzuzeigen.
    Gerätenetzwerk
    Gerätenetzwerk
  2. Wählen Sie im Abschnitt HTTP unten die Option aus Handbuch Modus. Fügen Sie dann die Server-IP und die Portnummer (8888) hinzu, die Sie in einem vorherigen Schritt von Charles kopiert haben.
    Wifi Details
    Wifi Details
  3. Öffnen Sie auf Ihrem Gerät einen Browser und navigieren Sie zu https://www.charlesproxy.com/getssl. Sie werden zu Ihren Geräteeinstellungen weitergeleitet, wo Sie aufgefordert werden, das zu installieren Benutzerdefiniertes Stammzertifikat von Charles Proxy Profil. Wähle aus Installieren Klicken Sie auf die Schaltfläche, um das Charles-Zertifikat auf Ihrem Gerät zu installieren.
    Installieren Sie das Charles-Zertifikat
    Installieren Sie das Charles-Zertifikat
  4. Befolgen Sie die Schritte, um das Charles-Zertifikat zu installieren. Wenn Sie fertig sind, wählen Sie Getan.
    Charles-Profil installiert
    Charles-Profil installiert
  5. Als Nächstes können Sie sicherstellen, dass Ihr Gerät dem Charles-Zertifikat vertraut. Navigieren Sie auf Ihrem Gerät zu Allgemein> Info> Einstellungen für die Zertifikatvertrauensstellung. Hier finden Sie das Charles Proxy-Zertifikat.
    Einstellungen für die Zertifikatvertrauensstellung
    Einstellungen für die Zertifikatvertrauensstellung
  6. Aktivieren Sie das Charles-Zertifikat. Beachten Sie die Warnmeldung. Möglicherweise möchten Sie dieses Zertifikat deaktivieren, wenn Sie nicht mit Charles debuggen.
    Aktivieren Sie das Vertrauenszertifikat
    Aktivieren Sie das Vertrauenszertifikat
  7. Jetzt können Sie alle in Charles gesendeten und empfangenen Daten anzeigen.
    Siehe Charles-Daten
    Siehe Charles-Daten

Verwendung von Charles mit Android 11

In diesem Abschnitt erfahren Sie, wie Sie Ihr Android-Gerät für die Arbeit mit Charles auf Ihrem Computer einrichten.

  1. Gehen Sie auf Ihrem Gerät zu Einstellungen > Netzwerk & Internet.
  2. Tippen Sie auf Wi-Fi. Sie sehen eine Liste der Netzwerke, mit denen Sie auf Ihrem Gerät verbunden sind.
  3. Wählen Sie das drahtlose Netzwerk aus, mit dem Sie gerade verbunden sind. Denken Sie daran, dass dieses Netzwerk mit dem Netzwerk übereinstimmen muss, mit dem Sie auf Ihrem Computer verbunden sind.
  4. Tippen Sie auf das Stiftsymbol, um Ihre Interneteinstellungen zu bearbeiten.
  5. Setzen Sie Proxy auf Manuell.
  6. Fügen Sie den Wert für Ihren Charles Proxy-Hostnamen ein, den Sie im obigen Schritt in die Zwischenablage kopiert haben sollten. Geben Sie für den Proxy-Port ein 8888.
    Proxy-Host/Port-Werte
    Proxy-Host/Port-Werte
  7. Tippen Sie auf Speichern.
  8. Öffnen Sie auf Ihrem Gerät einen Browser und navigieren Sie zu https://www.charlesproxy.com/getssl/. Dadurch sollte das Charles SSL-Zertifikat automatisch auf Ihr Gerät heruntergeladen werden.
  9. Gehen Sie folgendermaßen vor, um das Zertifikat unter Android 11 zu installieren:
    1. Einstellungen öffnen.
    2. Navigieren Sie zu Sicherheit > Verschlüsselung & credentials > Installieren Sie ein Zertifikat.
    3. Wählen Sie CA-Zertifikat.
    4. Sie werden eine Warnung sehen. Wählen Sie Trotzdem installieren.
      Trotzdem installieren
      Trotzdem installieren
    5. Wählen Sie das SSL-Zertifikat des Charles-Proxys.
    6. Bestätigen Sie die Installation des Zertifikats.
  10. Navigieren Sie im Standardbrowser Ihres Geräts zu einer Website. Sie können alle in Charles gesendeten und empfangenen Daten sehen. Beachten Sie, dass es hilfreich sein kann, die Strukturliste zu filtern (in diesem Fall nach brightcove).
    Siehe Datenübertragung
    Siehe Datenübertragung
  11. Um den Netzwerkverkehr zu filtern, damit Sie nur den Verkehr von Ihrem Android-Gerät und nicht von Ihrem lokalen Rechner sehen:
    1. Wählen Sie im oberen Menü von Charles die Option Proxy.
    2. Deaktivieren Sie macOS Proxy (oder Windows Proxy).
  12. Fakultativ: So löschen Sie Zertifikate von Ihrem Gerät (mit Android 11):
    1. Öffnen Sie auf Ihrem Gerät die Einstellungen.
    2. Navigieren Sie zu Sicherheit > Verschlüsselung & credentials.
    3. Tippen Sie auf Anmeldeinformationen löschen.
    4. Klopfen OK bestätigen.

Verwendung von Charles mit Android 7

Ab Android 7 (SDK v24) ist das SSL-Netzwerk nicht mehr direkt einsehbar, da mit dieser SDK-Version eine neue Sicherheitsfunktion eingeführt wurde. Um den Netzwerkverkehr über Charles zu sehen, müssen Sie Ihrer Android-Anwendung ausdrücklich mitteilen, dass sie SSL-Abfragen zulassen soll.

  1. Öffnen Sie in Ihrer Anwendung die AndroidManifest.xml Datei.

    Android-Manifestdatei

  2. Fügen Sie im application Abschnitt eine networkSecurityConfig Option hinzu.

    Option Netzwerksicherheit

  3. Fügen Sie in einem XML-Ressourcenordner eine network_security_config.xml Datei wie folgt hinzu:

    Netzwerksicherheit xml-Datei
  4. Das ist es. Sie sollten nun sehen, dass der gesamte Netzwerkverkehr über Charles läuft.

Ressourcen

Weitere Informationen finden Sie in den folgenden Punkten: