Remote-Fehlerbehebung für Android-Geräte

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Liveinhalte auf einem Android-Gerät von einem Windows-, Mac- oder Linux-Computer aus per Fernzugriff debuggen In dieser Anleitung erfahren Sie, wie Sie Folgendes tun:

  • Richten Sie Ihr Android-Gerät für die Remote-Fehlerbehebung ein und suchen Sie es auf Ihrem Entwicklungscomputer.
  • Live-Inhalte auf Ihrem Android-Gerät von Ihrem Entwicklungscomputer aus prüfen und beheben
  • Inhalte von Ihrem Android-Gerät auf eine DevTools-Instanz auf Ihrem Entwicklungscomputer streamen.

Diagramm zum Remote-Debugging

Schritt 1: Android-Gerät finden

Der unten beschriebene Workflow funktioniert für die meisten Nutzer. Weitere Informationen finden Sie unter Fehlerbehebung: Android-Gerät wird von den DevTools nicht erkannt.

  1. Öffnen Sie auf Ihrem Android-Gerät den Bildschirm Entwickleroptionen. Weitere Informationen finden Sie unter Entwickleroptionen auf dem Gerät konfigurieren.
  2. Wählen Sie USB-Debugging aktivieren aus.
  3. Öffnen Sie Chrome auf Ihrem Entwicklungscomputer.
  4. Öffnen Sie chrome://inspect#devices.

  5. Prüfen Sie, ob Kästchen. USB-Geräte erkennen aktiviert ist.

    Das Kästchen „USB-Geräte erkennen“ ist aktiviert.

  6. Verbinden Sie Ihr Android-Gerät über ein USB-Kabel direkt mit Ihrem Entwicklungscomputer.

  7. Wenn Sie Ihr Gerät zum ersten Mal verbinden, wird es als „Offline“ angezeigt und die Authentifizierung steht aus.

    Authentifizierung des Offlinegeräts ausstehend.

    Akzeptieren Sie in diesem Fall die Aufforderung zur Debug-Sitzung auf dem Display Ihres Geräts.

  8. Wenn der Modellname Ihres Android-Geräts angezeigt wird, wurde die Verbindung zu Ihrem Gerät über DevTools erfolgreich hergestellt.

    Ein erfolgreich verbundenes Gerät mit einem Modellnamen.

  9. Fahren Sie mit Schritt 2 fort.

Fehlerbehebung: Android-Gerät wird von den DevTools nicht erkannt

Prüfen Sie, ob Ihre Hardware richtig eingerichtet ist:

  • Wenn Sie einen USB-Hub verwenden, versuchen Sie stattdessen, Ihr Android-Gerät direkt mit Ihrem Entwicklungscomputer zu verbinden.
  • Trennen Sie das USB-Kabel zwischen Ihrem Android-Gerät und dem Entwicklungscomputer und schließen Sie es dann wieder an. Achten Sie darauf, dass das Display Ihres Android-Geräts und Ihres Entwicklungscomputers entsperrt ist.
  • Prüfen Sie, ob das USB-Kabel funktioniert. Sie sollten in der Lage sein, Dateien auf Ihrem Android-Gerät von Ihrem Entwicklungscomputer aus zu prüfen.

Prüfen Sie, ob Ihre Software richtig eingerichtet ist:

Wenn auf Ihrem Android-Gerät die Aufforderung USB-Debugging zulassen nicht angezeigt wird, versuchen Sie Folgendes:

  • Trennen Sie das USB-Kabel und schließen Sie es wieder an, während die DevTools auf Ihrem Entwicklungscomputer im Fokus sind und der Android-Startbildschirm angezeigt wird. Mit anderen Worten: Manchmal wird die Aufforderung nicht angezeigt, wenn die Bildschirme Ihres Android- oder Entwicklungscomputers gesperrt sind.
  • Aktualisieren Sie die Displayeinstellungen für Ihr Android-Gerät und Ihren Entwicklungscomputer, damit sie nie in den Ruhemodus wechseln.
  • Legen Sie den USB-Modus von Android auf „PTP“ fest. Weitere Informationen finden Sie unter Auf dem Galaxy S4 wird das Dialogfeld „USB-Debugging autorisieren“ nicht angezeigt.
  • Wählen Sie auf Ihrem Android-Gerät auf dem Bildschirm Entwickleroptionen die Option USB-Debugging-Autorisierungen widerrufen aus, um den ursprünglichen Zustand wiederherzustellen.

Wenn Sie eine Lösung finden, die in diesem Abschnitt oder im Artikel Chrome DevTools: Geräte werden nicht erkannt, wenn sie angeschlossen sind nicht erwähnt wird, fügen Sie bitte eine Antwort auf diese Stack Overflow-Frage hinzu oder erstellen Sie ein Problem im Repository developer.chrome.com.

Schritt 2: Inhalte auf Ihrem Android-Gerät von Ihrem Entwicklungscomputer aus debuggen

  1. Öffnen Sie Chrome auf Ihrem Android-Gerät.

  2. In chrome://inspect/#devices auf Ihrem Entwicklungscomputer sehen Sie den Modellnamen Ihres Android-Geräts, gefolgt von der Seriennummer. Darunter sehen Sie die Chrome-Version, die auf dem Gerät ausgeführt wird, mit der Versionsnummer in Klammern.

    Die Chrome-Version, die auf dem Gerät ausgeführt wird.

  3. Geben Sie im Textfeld Tab mit URL öffnen eine URL ein und klicken Sie auf Öffnen. Die Seite wird auf Ihrem Android-Gerät in einem neuen Tab geöffnet.

    Ein Remote-Tab, der in einem Abschnitt aufgeführt ist.

    Jeder Remote-Chrome-Tab erhält einen eigenen Bereich in chrome://inspect/#devices. In diesem Abschnitt können Sie mit diesem Tab interagieren. Wenn Apps WebView verwenden, wird für jede dieser Apps auch ein Abschnitt angezeigt. In diesem Beispiel ist nur ein Tab geöffnet.

  4. Klicken Sie neben der gerade geöffneten URL auf Prüfen. Eine neue DevTools-Instanz wird geöffnet.

Eine neue DevTools-Instanz für den Remote-Tab.

Die Version von Chrome, die auf Ihrem Android-Gerät ausgeführt wird, bestimmt die Version der DevTools, die auf Ihrem Entwicklungscomputer geöffnet wird. Wenn auf Ihrem Android-Gerät eine sehr alte Version von Chrome ausgeführt wird, sieht die DevTools-Instanz möglicherweise ganz anders aus als gewohnt.

Weitere Aktionen: Tabs pausieren, fokussieren, neu laden oder schließen

Unter der URL finden Sie ein Menü, mit dem Sie einen Tab pausieren, fokussieren, neu laden oder schließen können.

Das Menü zum Pausieren, Aktualisieren, Fokussieren oder Schließen eines Tabs.

Elemente prüfen

Rufen Sie in Ihrer DevTools-Instanz den Bereich Elemente auf und bewegen Sie den Mauszeiger auf ein Element, um es im Darstellungsbereich Ihres Android-Geräts hervorzuheben.

Du kannst auch auf ein Element auf dem Display deines Android-Geräts tippen, um es im Bereich Elemente auszuwählen. Klicken Sie in Ihrer DevTools-Instanz auf Element auswählen Element auswählen und tippen Sie dann auf dem Display Ihres Android-Geräts auf das Element. Hinweis: Die Funktion Element auswählen wird nach der ersten Berührung deaktiviert. Sie müssen sie also jedes Mal wieder aktivieren, wenn Sie sie verwenden möchten.

Android-Display auf Ihren Entwicklungscomputer streamen

Klicken Sie auf Screencast aktivieren/deaktivieren Screencast ein-/ausschalten, um den Inhalt Ihres Android-Geräts in Ihrer DevTools-Instanz anzusehen.

Sie haben mehrere Möglichkeiten, mit dem Screencast zu interagieren:

  • Klicks werden in Tippaktionen umgewandelt, wodurch die entsprechenden Touch-Ereignisse auf dem Gerät ausgelöst werden.
  • Tastenanschläge auf Ihrem Computer werden an das Gerät gesendet.
  • Wenn Sie eine Zusammen-/Auseinander-Bewegung simulieren möchten, halten Sie beim Ziehen die Umschalttaste gedrückt.
  • Zum Scrollen können Sie das Touchpad oder das Mausrad verwenden oder mit dem Mauszeiger wischen.

Hinweise zu Screencasts:

  • In Screencasts werden nur Seiteninhalte angezeigt. Transparente Bereiche des Screencasts stellen Geräteoberflächen dar, z. B. die Chrome-Adressleiste, die Android-Statusleiste oder die Android-Tastatur.
  • Screencasts wirken sich negativ auf die Framerate aus. Deaktivieren Sie das Screencasting, während Sie Scroll- oder Animationsaufrufe erfassen, um ein genaueres Bild der Leistung Ihrer Seite zu erhalten.
  • Wenn das Display Ihres Android-Geräts gesperrt wird, verschwinden die Inhalte des Screencasts. Entsperren Sie das Display Ihres Android-Geräts, um den Screencast automatisch fortzusetzen.

Manuell über Android Debug Bridge (adb) debuggen

In seltenen Fällen kann eine alternative Methode zur Remote-Fehlerbehebung nützlich sein. Beispielsweise können Sie eine direkte Verbindung zum Chrome DevTools Protocol (CDP) Ihres Chrome-Browsers auf Android herstellen.

Dazu können Sie die Android Debug Bridge (adb) verwenden:

  1. Aktivieren Sie auf Ihrem Android-Gerät die Entwickleroptionen und das USB-Debugging.
  2. Öffnen Sie Chrome auf Ihrem Android-Gerät.

  3. Verbinden Sie das Android-Gerät mit Ihrem Entwicklungscomputer über:

  4. Führen Sie in der Befehlszeile Ihres Entwicklungscomputers adb devices -l aus und prüfen Sie, ob Ihr Gerät in der Liste enthalten ist.

  5. Leiten Sie den CDP-Socket auf dem Gerät an den lokalen Port Ihres Computers weiter, z. B. 9222. Führen Sie hierzu Folgendes aus:

    adb forward tcp:9222 localabstract:chrome_devtools_remote

  6. Nach der erfolgreichen Verbindung wird Folgendes angezeigt:

    • http://localhost:9222/json enthält Ihre page-Zielvorhaben.
    • http://localhost:9222/json/version stellt den Zielendpunkt browser bereit, wie in der CDP-Dokumentation angegeben.
    • chrome://inspect/#devices ist ausgefüllt, auch wenn die Einstellung USB-Geräte erkennen nicht aktiviert ist.

Informationen zur Fehlerbehebung finden Sie hier: