Debuggen auf Mobilgeräten

Mindestanforderungen für iOS-Debugging

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

Verwenden von Safari Remote Debugging

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

1. Verbinden Sie Ihr iOS-Gerät über ein USB-Kabel mit Ihrem Computer.
2. Öffnen Sie auf Ihrem Gerät die App „Einstellungen“ . Wählen Sie Safari, scrollen Sie zum Ende der Seite und öffnen Sie das Menü Erweitert. Aktivieren Sie die Option Web Inspector .

   

3. Öffne die Safari-App auf deinem Gerät und navigiere zu einer beliebigen Webseite.
4. Starte auf deinem Mac Safari, öffne die Einstellungen(> Safari-Einstellungen) und gehe zum Abschnitt „ Erweitert“ . Aktivieren Sie das Menü „Entwickeln anzeigen“ in der Menüleiste .

   

5. Öffnen Sie das Entwicklungsmenü . Ihr iOS-Gerät wird aufgelistet. Wenn Sie mit der Maus über Ihren Gerätenamen fahren, wird die URL zu der Website, die Sie auf Ihrem Gerät aufgerufen haben, angezeigt.

   

6. Wählen Sie die URL aus, und es wird ein Web Inspector-Fenster geöffnet, in dem Sie Inhalte in Ihrem mobilen Browser von Ihrem Desktop aus in der Vorschau anzeigen, überprüfen und debuggen können.

   

7. Im Abschnitt Ressourcen können Sie die Webseite in der Vorschau anzeigen und überprüfen. Wenn Sie den Mauszeiger über Elemente im Web Inspector zeigen, werden die entsprechenden Elemente im Browser auf Ihrem iOS-Gerät hervorgehoben.

   

8. Sie können auch die Abschnitte Debugger und Konsole verwenden, um Ihre Seite weiter zu debuggen, indem Sie Haltepunkte festlegen, Daten protokollieren usw.

Mindestanforderungen für 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 4.3 geschrieben.

Debugging auf Ihrem Gerät aktivieren

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

1. Wenn Sie Android 4.2+ verwenden, müssen Sie die Entwickleroptionen Ihres Geräts aktivieren, bevor Sie das USB-Debugging aktivieren können. Öffnen Sie auf Ihrem Gerät die App Einstellungen und wählen Sie das Menü Über das Telefon aus. Suchen Sie die Build-Nummer Ihres Geräts und tippen Sie sieben Mal darauf.
2. Klicken Sie auf die Schaltfläche „ Zurück “ Ihres Geräts und Sie sehen das Menü „ Entwickleroptionen “ in den Einstellungen.

   

3. Öffnen Sie das Menü Entwickleroptionen und markieren Sie das Kontrollkästchen, um das USB-Debuggingzu aktivieren.

   

Remote-Debuggen 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 Chrome und navigieren Sie zu about:inspect. Aktivieren Sie auf der Seite Geräte die Option Discover USB devices .

   

2. Verbinden Sie Ihr Gerät über ein USB-Kabel mit Ihrem Gerät. Auf Ihrem Gerät werden Sie mit einem Dialog aufgefordert, in dem Sie gefragt werden, ob Sie das USB-Debugging zulassen möchten. Wählen Sie OK , damit Ihr Computer eine Verbindung zu Ihrem Gerät herstellen kann.

   

3. Öffnen Sie auf Ihrem Gerät die Chrome-App und navigieren Sie zu einer Webseite.
4. Kehren Sie auf Ihrem Computer zu Chrome zurück. Auf der about:inspect Seite sollten Sie Ihr verbundenes Gerät sehen. Unterhalb Ihres Gerätenamens können Sie eine Liste aller in Chrome auf Ihrem Gerät geöffneten Seiten sehen.

   

5. Um mit dem Debuggen einer Webseite zu beginnen, wählen Sie den Link „ Inspect “ unter der Seiten-URL aus. Dies öffnet die Entwicklertoolsvon Chrome.

   

6. Links auf der Registerkarte Elemente 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 darüber, wie Sie mit Screencasting mit Ihrem Gerät interagieren können, finden Sie in der Dokumentation von Google.

Mindestanforderungen für Charles

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

Einrichten von Charles auf Ihrem Computer

Befolgen Sie die nachstehenden Schritte, um Charles auf Ihrem Computer zum Laufen zu bringen.

1. Downloaden und installieren Sie Charles auf Ihrem Computer.
2. Führe auf deinem Computer Charlesaus. Wählen Sie im Menü > Proxy-Proxy-Einstellungenaus. Stellen Sie sicher, dass ein Port zugewiesen wurde (z. B. 8888), und die Option Transparentes HTTP-Proxying aktivieren ausgewählt ist.

   

3. Wählen Sie OK aus, um die Änderungen zu speichern und den Dialog zu schließen.
4. Wählen Sie im Menü > Proxy-SSL-Proxy-Einstellungenaus. Stellen Sie sicher, dass die Option SSL-Proxying aktivieren ausgewählt ist.

   

5. Wählen Sie im Bereich Standort die Schaltfläche Hinzufügen aus. Navigieren Sie im Dialogfeld „Standort bearbeiten “ zum Feld „ Port “ und geben Sie 443ein. Wählen Sie OK , um diese Änderung zu speichern.

   

6. Wählen Sie OK , um das Dialogfeld „Standort bearbeiten “ zu schließen.

   

7. Wählen Sie OK , um das Dialogfeld SSL Proxying Settings zu schließen.
8. Navigieren Sie zu Hilfe bei > SSL Proxying, das Charles Root-Zertifikat auf einem Mobilgerät oder Remote-Browser zu > installieren.

   

9. Es sollte eine Meldung angezeigt werden, die die lokale Server-IP und die Portnummer (8888) identifiziert, die Sie zum Einrichten 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.

   

Einrichten von Charles auf Ihrem Gerät

In diesem Abschnitt erfahren Sie, wie Sie Ihr iOS- und/oder Android-Gerät so einrichten, dass es mit Charles auf Ihrem Computer zusammenarbeitet.

Einrichten Ihres iOS-Geräts

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 den Einstellungen > Wifi navigieren und den Netzwerknamen auswählen, um erweiterte Optionen anzuzeigen.

   

2. Wählen Sie im HTTP-Bereich unten den Manuell-Modus aus. Fügen Sie dann die Server-IP und die Portnummer (8888) hinzu, die Sie in einem vorherigen Schritt von Charles kopiert haben.

   

3. Öffnen Sie auf Ihrem Gerät einen Browser und navigieren Sie zu http://www.charlesproxy.com/getssl. Sie werden zu Ihren Geräteeinstellungen weitergeleitet, wo Sie aufgefordert werden, das Charles Proxy Custom Root Certificate-Profil zu installieren. Klicken Sie auf die Schaltfläche Installieren , um das Charles-Zertifikat auf Ihrem Gerät zu installieren.

   

4. Befolgen Sie die Schritte zur Installation des Charles Zertifikats. Wenn Sie fertig sind, wählen Sie Fertigaus

   

5. Als Nächstes können Sie sicherstellen, dass Ihr Gerät dem Charles-Zertifikat vertraut. Navigieren Sie auf Ihrem Gerät zu General > About > Certificate Trust Settings. Hier finden Sie das Charles-Proxy-Zertifikat.

   

6. Aktivieren Sie das Charles-Zertifikat. Beachten Sie die Warnmeldung. Vielleicht möchten Sie dieses Zertifikat deaktivieren, wenn Sie nicht mit Charles debuggen.

   

7. Jetzt können Sie alle in Charles gesendeten und empfangenen Daten sehen.

   

Einrichten Ihres Android-Geräts

1. Öffnen Sie auf Ihrem Gerät einen Browser und navigieren Sie zu //chls.pro/ssl.
2. Sie werden mit einem Dialogfeld „ Zertifikatsname “ aufgefordert. Geben Sie einen Namen für das Zertifikat an und legen Sie das Feld Gebraucht für auf WLANfest. Wählen Sie OK aus, um das Zertifikat zu installieren.

   

3. Öffnen Sie als Nächstes das Menü Einstellungen > Wi-Fi . Sie sehen eine Liste der Netzwerke, mit denen Sie auf Ihrem Gerät verbunden sind. Wählen Sie das drahtlose Netzwerk aus, mit dem Sie derzeit verbunden sind. Denken Sie daran, dass dieses Netzwerk mit dem Netzwerk übereinstimmen muss, mit dem Sie auf Ihrem Computer verbunden sind.
4. Dadurch wird ein kleiner Dialog mit drei Optionen geöffnet: Bearbeiten, Anzeigen oder Vergessen. Wählen Sie Bearbeitenaus.
5. Scrollen Sie in diesem Dialogfeld nach unten und aktivieren Sie das Feld Erweiterte Optionen anzeigen . Dies zeigt Proxy- und IP-Einstellungen.

   

6. Ändern Sie das Feld Proxy-Einstellungen auf Manuell.
7. Füllen Sie das Feld Proxy-Hostname mit der IP-Adresse Ihres Computers und dem Proxy-Portfeld aus, um dem in Charles festgelegten Port zu entsprechen (standardmäßig ist der Port auf 8888 festgelegt). Wählen Sie Speichernaus.

   

8. Navigieren Sie im Standardbrowser Ihres Geräts zu einer Website. Sie können alle in Charles gesendeten und empfangenen Daten sehen.