Website-Debugging auf Android-Geräten mit Chrome
Für mobile Endgeräte entwickeln kann sehr mühsam sein. Man hat keine Entwicklertools um die HTML-Struktur, CSS-Regeln oder JavaScript-Fehler und -Debugginginfos zu sehen. Oft probiert man dann endlos herum, debuggt Javascript mit alert(); Ausgaben, oder verzweifelt ganz einfach. Das Ganze natürlich online, da das Gerät nicht auf den lokalen Rechner zugreift.
Zumindest für Android-Geräte gibt es aber ein mehr als komfortable Lösung für dieses Problem, die ich euch nicht vorenthalten möchte.
Remote Debugging mit Googles Chrome Browser
Benötigt wird
- Android 4.0+ am mobilen Gerät mit Chrome für Android
- USB-Kabel zum verbinden des Geräts mit dem PC
- Chrome 32+ am PC
1. USB-Debugging am Gerät aktivieren
Als erstes muss am Android-Gerät in Einstellungen > Entwickleroptionen -> USB-Debugging aktiviert werden. Wenn die Entwickleroptionen nicht vorhanden sind, erfährst du im Artikel Entwickleroptionen auf Android-Geräten aktiveren, wie diese zu aktivieren sind.
2. Chrome am PC auf den USB-Kontakt vorbereiten
In der Adresszeile im Chrome-Browser wird chrome://inspect eingegeben, was die DevTools Einstellungen hervorbringt. Es erscheint ein Fenster ähnlich dem im Screenshot. Hier muss Discover USB devices aktiviert sein.
3. Das Android-Gerät mit einem USB-Kabel verbinden
Sollten Sie Windows verwendet, ist es nötig, den OEM-Treiber des Geräts installiert zu haben. Auf meinem Ubuntu-System funktionierte es ohne diesen Schritt. Die Treiber findet man am Ende auf dieser Seite auf android.com.
Sobald das Gerät verbunden ist, wartet der Browser (Bild links oben) auf auf die Bestätigung der Verbindung am gerät (Bild rechts). Nach Bestätigung sieht man im Chrome am PC alle offenen Chrome-Tabs des Android-Gerätes (Bild links unten).
4. Debuggen beginnen!
Wenn man nun bei einem beliebigen Tab auf inspect klickt, öffnen sich die gewohnten Chrome Developer Tools. Darin kann man alles wie gewohnt debuggen, wie zum Beispiel HTML, CSS, JavaScript, Page-Load-Time, etc. Am Android-Gerät kann man so die Webseiten mobil Absurfen und am PC Debuggen.
Noch zwei nützliche Tipps
- Drückt man F5 (bzw. Strg+R oder Cmd+R auf Mac), lädt sich die Seite am Android-Gerät neu, ohne es berühren zu müssen.
- Das markierte Icon rechts oben im vorigen Screenshot aktiviert den Screencast des Android-Geräts zum PC (siehe nächster Screenshot). Damit kann der Blick voll und ganz dem PC-Bildschirm gewidmet werden.
Ich hoffe diese Anleitung hilft euch künftig, das mobile Debuggen schneller bewältigen zu können!
Quelle und Detailinfos zu dem Thema auf englisch:
Remote Debugging on Android with Chrome (developer.chrome.com)