Externes Debugging mit Firefox for Android

Diese Anleitung erklärt, wie man remote debugging verwendet, um Code unter Firefox for Android über USB zu inspizieren und zu debuggen.

Diese Anleitung ist in zwei Teile aufgeteilt: im ersten Teil, "Voraussetzungen", werden die Voraussetzungen erklärt, welche aber nur einmal durchgeführt werden müssen. Im zweiten Teil, "Verbinden", wird erklärt, wie man zum Gerät verbindet. Dieser zweite Teil muss immer wieder durchgeführt werden.

Voraussetzungen

Um zu beginnen, benötigen Sie folgendes:

  • einen Computer oder Laptop mit Firefox
  • ein Android-Mobilgerät mit Firefox for Android installiert 
  • ein USB-Kabel, um das Mobilgerät mit dem Computer zu verbinden

ADB Installation

Als nächstes müssen Sie das Mobilgerät und den Computer so einrichten, dass die beiden miteinander kommunizieren können. Dafür wird das adb Kommandozeilen-Programm verwendet.

Auf dem Android-Mobilgerät

Auf dem Computer/Laptop

  • Installieren Sie die passende Android SDK Version für Ihr Mobilgerät.
  • Installieren die Android Platform Tools mit Hilfe des Android SDK.
  • Android Platform Tools installiert adb im "platform-tools" Ordner im Android-SDK-Installationspfad. Stellen Sie sicher, dass der "platform-tools" Ordner in der PATH-Variable eingetragen ist.

Um dies zu testen, können Sie folgenden Befehl in  der Kommandozeile eingeben:

adb devices

Nun sehen Sie eine Ausgabe analog zu folgender:

List of devices attached
51800F220F01564 device

(Die lange Hex-Zeichenkette wird verschieden sein.)

Wenn diese Ausgabe korrekt ist, wurde ADB korrekt installiert und ADB konnte das Mobilgerät korrekt erkennen.

Falls unter OSX die Zeile unterhalb von "List of devices attached" leer sein sollte, könnte es an EasyTether liegen:

ADB on Mac OS X stops recognizing the attached device after installing EasyTether driver. Use kextload/kextunload to unload from memory the EasyTetherUSBEthernet.kext kernel extension manually. It is in /System/Library/Extensions/

(Aus der Webseite von EasyTether)

Remote Debugging aktivieren

Als nächstes muss "Remote Debugging" auf dem Mobilgerät und dem Computer aktiviert werden.

Firefox for Android 24 und früher

Um "Remote Debugging" auf dem Mobilgerät zu aktivieren, muss der Wert der devtools.debugger.remote-enabled Einstellung auf true gesetzt werden.

Gehen Sie nach about:config in Firefox for Android, tippen Sie "devtools" ins Suchfeld und drücken Sie auf den Suchen-Button. Nun sehen Sie alle devtools-Einstellungen. Setzen Sie nun die devtools Einstellung debugger.remote-enabled auf true, indem Sie auf "Umschalten" klicken.

Firefox for Android 25 und später

Bei Firefox for Android 24 und später gibt es einen Menü-Eintrag, um "Remote Debugging" zu aktivieren. Öffnen Sie das Menü, wählen Sie "Einstellungen", dann "Entwicklerwerkzeuge" (auf einigen Android-Geräten müssen Sie auf "Mehr" klicken, um den Einstellungen-Eintrag zu sehen). Aktivieren Sie das Kontrollkästchen bei "Remote debugging":

Der Browser zeigt nun eine Notifikation an, dass die Portweiterleitung noch aktiviert werden muss. Dies werden wir später machen.

Auf dem Computer

Auf dem Computer wird "Remote debugging" über die Entwicklerwerkzeuge aktiviert. Öffnen Sie die Entwicklerwerkzeuge, klicken Sie auf die "Einstellungen" Schaltfläche in der Symbolleiste und aktivieren Sie das Kontrollkästchen neben "Externes Debugging aktivieren":

Wenn Sie Firefox 26 oder älter verwenden, müssen Sie danach Firefox neu starten. Nach diesem Schritt sehen Sie im "Web-Entwickler" Menü einen neuen Eintrag "Verbinden...":
 

Verbinden

Da Sie nun alles eingerichtet haben, können Sie den Computer über den "Verbinden..." Menü-Eintrag mit Ihrem Firefox for Android verbinden. Dazu verbinden Sie zuerst Ihr Mobilgerät mit Ihrem Computer, falls Sie dies nicht bereits gemacht haben.

Auf dem Computer

Öffnen Sie ein Kommandozeilen-Fenster und tippen Sie:

adb forward tcp:6000 tcp:6000

(Falls Sie den zu verwendeten Port auf dem Android-Mobilgerät geändert haben, müssen Sie hier den geänderten Wert eintragen.)

Für Firefox OS, tippen Sie:

adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

Diesen Befehl müssen Sie immer ausführen, wenn das Mobilgerät über USB-Kabel an den Computer angeschlossen wird.

Gehen Sie nun ins "Web-Entwickler" Menü und wählen Sie "Verbinden...". Sie werden folgende Seite sehen:

Sofern Sie den Android-Port nicht geändert haben, wählen Sie hier 6000 und drücken auf "Verbinden".

Auf dem Android-Mobilgerät

Nun sehen Sie auf Ihrem Mobilgerät folgende Meldung, da sich nun Firefox mit Ihrem Mobilgerät verbinden möchte.

Drücken Sie auf "OK". Firefox auf Ihrem Computer wartet einige Sekunden, damit Sie genug Zeit haben, auf dem Mobilgerät die Meldung zu quittieren. Wenn die Zeit nicht ausreicht, können Sie nochmals auf "Verbinden" klicken.

Auf dem Computer

Als nächsten sehen Sie auf Ihrem Computer folgende Anzeige:

Nun werden Sie gefragt, ob Sie den Code in einem Browser Tab oder den Browser selbst debuggen möchten.

  • Sie sehen jeweils pro geöffnetem Tab einen Eintrag unter "Verfügbare externe Tabs". Sobald Sie auf den gewünschten Tab klicken, wird der Debugger an den Inhalt dieses Tabs angehängt. Wählen Sie diese Option, wenn Sie den Inhalt eines Tabs debuggen möchten.
  • Sie sehen einen Eintrag unter "Verfügbare externe Prozesse": das ist der Browser selbst. Wählen Sie diese Option, wenn Sie den Browser selbst debuggen möchten.

Wir entscheiden uns für das Anfügen des Debuggers an die mozilla.org Webseite. Die Entwicklerwerkzeuge werden in einem eigenen Fenster geöffnet und werden an die Webseite innerhalb von Firefox for Android angehängt:

Die Entwicklerwerkzeuge unterscheiden nicht zwischen lokalem Inhalt und Inhalt auf anderen Geräten. Sie funktionieren in beiden Fällen identisch.

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: EikeKre, mkohler, popeye007
 Zuletzt aktualisiert von: EikeKre,