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
- USB Debugging aktivieren (nur Schritt 2 von diesem Link).
- Schliessen Sie das Mobilgerät über USB an den Computer an
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":
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.