Remote-Fehlerbehebung für Android-Geräte

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Sie können Live-Inhalte auf einem Android-Gerät von Ihrem Windows-, Mac- oder Linux-Computer aus per Remote-Debugging debuggen. In dieser Anleitung erfahren Sie, wie Sie Folgendes tun:

  • Richten Sie Ihr Android-Gerät für das Remote-Debugging ein und erkennen Sie es von Ihrem Entwicklungscomputer aus.
  • Live-Inhalte auf Ihrem Android-Gerät von Ihrer Entwicklungsmaschine aus untersuchen und debuggen
  • 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 folgende Workflow funktioniert für die meisten Nutzer. Weitere Informationen finden Sie unter Fehlerbehebung: DevTools erkennt das Android-Gerät nicht.

  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üfe, 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“ und „Ausstehende Authentifizierung“ angezeigt.

    Das Offlinegerät muss noch authentifiziert werden.

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

  8. Wenn Sie den Modellnamen Ihres Android-Geräts sehen, haben die DevTools erfolgreich eine Verbindung zu Ihrem Gerät hergestellt.

    Ein erfolgreich verbundenes Gerät mit einem Modellnamen.

  9. Fahren Sie mit Schritt 2 fort.

Fehlerbehebung: DevTools erkennt das Android-Gerät nicht

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

  • Wenn Sie einen USB-Hub verwenden, versuchen Sie, Ihr Android-Gerät stattdessen direkt mit Ihrer Entwicklungsmaschine zu verbinden.
  • Ziehen Sie das USB-Kabel zwischen Ihrem Android-Gerät und der Entwicklungsmaschine ab und schließen Sie es dann wieder an. Das muss geschehen, während die Displays Ihres Android-Geräts und Ihrer Entwicklungsmaschine entsperrt sind.
  • Prüfen Sie, ob Ihr USB-Kabel funktioniert. Sie sollten Dateien auf Ihrem Android-Gerät von Ihrem Entwicklungscomputer aus ansehen können.

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

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

  • Trennen Sie das USB-Kabel und schließen Sie es wieder an, während die Entwicklertools auf Ihrem Entwicklungscomputer im Vordergrund sind und der Android-Startbildschirm angezeigt wird. Das bedeutet, dass der Prompt manchmal nicht angezeigt wird, wenn die Bildschirme Ihres Android-Geräts oder Ihrer Entwicklungsmaschine gesperrt sind.
  • Aktualisieren Sie die Displayeinstellungen für Ihr Android-Gerät und Ihre Entwicklungsmaschine so, dass sie nie in den Ruhemodus wechseln.
  • Den USB-Modus von Android auf PTP einstellen. Weitere Informationen finden Sie unter Dialogfeld „USB-Debugging autorisieren“ wird auf dem Galaxy S4 nicht angezeigt.
  • Wählen Sie auf dem Bildschirm Entwickleroptionen Ihres Android-Geräts USB-Debugging-Autorisierungen widerrufen aus, um das Gerät in den ursprünglichen Zustand zurückzusetzen.

Wenn Sie eine Lösung finden, die in diesem Abschnitt oder unter Chrome DevTools Devices does not detect device when plugged in nicht erwähnt wird, fügen Sie bitte eine Antwort zu dieser Stack Overflow-Frage hinzu oder erstellen Sie ein Problem im Repository developer.chrome.com.

Schritt 2: Inhalte auf Ihrem Android-Gerät über Ihre Entwicklungsmaschine 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 dann auf Öffnen. Die Seite wird auf Ihrem Android-Gerät auf 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 ein Abschnitt angezeigt. In diesem Beispiel ist nur ein Tab geöffnet.

  4. Klicken Sie neben der URL, die Sie gerade geöffnet haben, 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 Entwicklertools, die auf Ihrer Entwicklungsmaschine geöffnet wird. Wenn auf Ihrem Android-Gerät also eine sehr alte Version von Chrome ausgeführt wird, kann die DevTools-Instanz ganz anders aussehen als gewohnt.

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

Unter der URL finden Sie ein Menü zum Pausieren, Fokussieren, Neuladen oder Schließen eines Tabs.

Das Menü zum Pausieren, Neuladen, 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 Viewport Ihres Android-Geräts hervorzuheben.

Sie können auch auf ein Element auf dem Bildschirm Ihres 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 das Element auf dem Display Ihres Android-Geräts. Element auswählen wird nach der ersten Berührung deaktiviert. Sie müssen die Funktion also jedes Mal neu aktivieren, wenn Sie sie verwenden möchten.

Android-Bildschirm auf Ihren Entwicklercomputer streamen

Klicken Sie auf Toggle Screencast Screencast ein-/ausschalten, um die Inhalte Ihres Android-Geräts in Ihrer DevTools-Instanz anzusehen.

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

  • Klicks werden in Taps umgewandelt und lösen die entsprechenden Touch-Events auf dem Gerät aus.
  • Tasteneingaben auf Ihrem Computer werden an das Gerät gesendet.
  • Wenn Sie eine Pinch-Geste simulieren möchten, halten Sie beim Ziehen die Umschalttaste gedrückt.
  • Verwenden Sie zum Scrollen das Trackpad oder das Mausrad oder bewegen Sie den Mauszeiger schnell.

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 Framerates aus. Deaktivieren Sie die Bildschirmübertragung, wenn Sie Scrollvorgänge oder Animationen messen, um ein genaueres Bild der Seitenleistung zu erhalten.
  • Wenn das Display Ihres Android-Geräts gesperrt wird, verschwinden die Inhalte Ihres Screencasts. Entsperren Sie das Display Ihres Android-Geräts, um das Screencasting automatisch fortzusetzen.

Manuelles Debugging über die Android Debug Bridge (ADB)

In einigen seltenen Fällen kann eine alternative Methode für das Remote-Debugging nützlich sein. Möglicherweise möchten Sie beispielsweise eine direkte Verbindung zum Chrome-Entwicklertools-Protokoll (Chrome DevTools Protocol, CDP) von Chrome unter Android herstellen.

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

  1. Achten Sie darauf, dass auf Ihrem Android-Gerät die Entwickleroptionen und das USB-Debugging aktiviert sind.
  2. Öffnen Sie Chrome auf Ihrem Android-Gerät.

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

  4. Führen Sie in der Befehlszeile Ihres Entwicklercomputers 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. Nachdem die Verbindung hergestellt wurde, prüfen Sie Folgendes:

    • http://localhost:9222/json enthält Ihre page-Ziele.
    • http://localhost:9222/json/version macht den Zielendpunkt browser verfügbar, wie in der CDP-Dokumentation angegeben.
    • chrome://inspect/#devices wird auch ohne aktivierte Einstellung USB-Geräte erkennen ausgefüllt.

Informationen zur Fehlerbehebung finden Sie hier: