Tutorials

Tutorial: „Element untersuchen“ in Firefox Mobile (Android) nutzen

Melden

Im Gegensatz zur Desktop-Version verfügt die mobile Version von Firefox für Android über keine direkt integrierten Entwickler-Werkzeuge, die man einfach per Rechtsklick öffnen kann. Dennoch gibt es zwei sehr effektive Wege, um Elemente auf dem Smartphone zu untersuchen:

  1. Die offizielle Methode (Empfohlen): Fern-Debugging über einen PC (voller Zugriff auf alle Entwicklertools).
  2. Die Standalone-Methode: Direkt auf dem Smartphone mittels eines Hilfsskripts (Eruda).

Methode 1: Fern-Debugging über den PC (Volle Entwicklertools)

Mit dieser Methode spiegelst du die Entwicklertools (Inspector, Konsole, Netzwerk etc.) deines Desktop-Browsers auf die geöffnete Seite deines Android-Smartphones.

Voraussetzungen:

  • Ein Android-Smartphone mit installiertem Firefox.
  • Ein PC/Mac mit installiertem Firefox Desktop.
  • Ein passendes USB-Kabel.

Schritt 1: USB-Debugging auf dem Android-Gerät aktivieren

Damit der Computer auf das Smartphone zugreifen kann, musst du die Entwickleroptionen von Android freischalten:

  1. Öffne die Einstellungen deines Android-Smartphones.
  2. Gehe auf Über das Telefon (oder Telefoninfo).
  3. Suche den Eintrag Build-Nummer und tippe 7-mal schnell hintereinander darauf, bis die Meldung erscheint: „Sie sind jetzt Entwickler!“.
  4. Gehe zurück in das Hauptmenü der Einstellungen, öffne System > Entwickleroptionen.
  5. Aktiviere dort den Schalter bei USB-Debugging.

Schritt 2: Debugging in Firefox Mobile aktivieren

  1. Öffne die Firefox-App auf deinem Smartphone.
  2. Tippe auf die drei Punkte (Menü) und wähle Einstellungen.
  3. Scrolle ganz nach unten zu Erweitert und aktiviere die Option Remote-Debugging über USB.

Schritt 3: Smartphone und PC verbinden

  1. Verbinde dein Smartphone per USB-Kabel mit dem Computer.
  2. Auf deinem Smartphone erscheint eine Abfrage: „USB-Debugging zulassen?“. Setze den Haken bei „Von diesem Computer immer zulassen“ und tippe auf Zulassen.

Schritt 4: „Element untersuchen“ am PC starten

  1. Öffne Firefox auf deinem Desktop-Computer.
  2. Tippe in die Adresszeile folgenden Befehl ein und drücke Enter: about:debugging
  3. Klicke in der linken Seitenleiste auf Dieses Firefox bzw. auf Geräte (USB-Geräte).
  4. Dein Smartphone sollte nun in der Liste erscheinen. Klicke daneben auf Verbinden.
  5. Sobald die Verbindung steht, siehst du alle Tabs, die aktuell auf deinem Smartphone geöffnet sind.
  6. Klicke neben dem gewünschten Tab auf Untersuchen (Inspect).

Es öffnet sich das gewohnte Entwickler-Fenster: Du kannst nun HTML und CSS in Echtzeit auf deinem Smartphone bearbeiten, Konsolen-Befehle ausführen und Netzwerkanfragen analysieren.

Methode 2: Direkt auf dem Smartphone untersuchen (Ohne PC)

Wenn du keinen PC zur Hand hast, kannst du eine JavaScript-Konsole (wie z. B. Eruda) über ein Lesezeichen in die mobile Seite einschleusen.

  1. Öffne Firefox auf dem Smartphone und erstelle ein beliebiges neues Lesezeichen.
  2. Bearbeite das Lesezeichen:
    • Name: Element untersuchen
    • Adresse (URL): Füge folgenden Code komplett ein:
      javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
  3. Speichere das Lesezeichen.
  4. Surfe nun auf die Website, die du untersuchen möchtest.
  5. Tippe in die Adresszeile den Namen deines Lesezeichens ein (Element untersuchen) und wähle das Lesezeichen aus den Vorschlägen aus (ein einfaches Aufrufen über das Lesezeichen-Menü blockiert moderne Browser aus Sicherheitsgründen oft; die Eingabe über die Adresszeile umgeht dies).
  6. Es erscheint ein kleines Zahnrad-Symbol auf der Website. Tippe darauf, um eine voll funktionsfähige mobile Entwicklerkonsole direkt auf dem Smartphone-Bildschirm zu öffnen.
0