Ein bisschen mobiler

Endlich habe ich es mal geschafft mich ein paar Stunden hinzusetzen und das CSS für https://chrigl.de/ anzupassen. Die nicht-Edit-Variante der Seite läuft auf meinem Galaxy S3 ganz gut. Beim Edit-Bereich muss man ein paar kleine Abstriche machen. z.B. sind manche Felder minimal zu lang. Doch da ich der einzige Editor bin, kann ich gut darüber hinweg sehen.

Zuerst habe ich das CSS mit dem Firefox lokal auf dem Notebook mit media queries auf verschiede Größen getrimmt. Im Anschluss daran testete ich die Seite direkt im Firefox auf dem Galaxy S3. Wie zu erwarten sah ich ein anderes Ergebnis als auf dem Desktop-Firefox.

Da es aber doch die eine oder andere Seite im Netz gibt, die sich auch auf mobilen Geräten vernünftig anzeigen lassen, habe ich nach einer Debugging-Möglichkeit für den Firefox auf Android gesucht... und bin fündig geworden. Zu meiner Überraschung sogar mit Firefox-Bordmitteln (Remote debugging Firefox for Android und Firefox Remote Debugging ).

Zuerst galt es die Development-Option meines Cyanogenmod 10.2 zu aktivieren. Völlig intuitiv geht dies über Einstellungen => Über das Telefon. Dort gibt es ein Feld Build-Nummer. Wie man leicht errät, ist nach siebenmaligem drücken auf Build-Nummerdie Development-Option verfügbar. Erreichbar ist sie nun über Einstellungen => Developer options. Dort muss USB Debuggingaktiviert werden. Zusätzlich habe ich Firefox als Select debug appausgewählt.

Nach dem setzen des forwards konnte ich mit dem Devtools des Desktop-Firefoxes auf den Firefox auf Andriod verbinden und das DOM etc. ändern. Also alles wie lokal gewohnt. Es ist sogar möglich per Klick auf dem Telefon ein Element zu selektieren. Funktioniert sehr schön alles! Mit diesem Modus habe ich die letzten Kleinigkeiten ausgemerzt. Im echten Leben würde ich wohl früher mal auf dem Smartphone testen.

Für Interessierete steht der Quellcode auf Launchpad zur Verfügung.