Mobile Remote Web-Debugging mit Chrome und Android

OS und Programm:

• Android (vermutlich ab 4.0.4) mit Chrome Beta Browser
• Windows-PC mit Chrome Beta Browser

Problem:

Ihr wollte eure Webseite für die mobile Darstellung optimieren, doch wisst nicht wie ihr Darstellungsfehler beheben, einsehen und angehen könnt? Zusammen mit eurem PC und dem Android Smartphone oder Tablet und den Chrome Beta Browsern ist dies nun problemlos möglich.

Lösung:

Dank den umfangreichen, integrierten Entwickler-Tools eignet sich Chrome generell als sehr guter Webdevelopment-Browser und in der Kombination mit dem Chrome Beta Browser unter Android könnt ihr nun ganz bequem eure Smartphone/Tablet Browserausgabe in einem Tab auf eurem Windows-PC öffnen und analysieren. Wir zeigen euch das am Beispiel eines Nexus 4 und eines Nexus 7 (2013).

1. Vorbereitung Windows-PC
   1. Installation der neuesten Android Universal ADB Treiber (für Probleme bei der Installation der Treiber unter Windows 8/8.1 siehe unseren verlinkten Artikel)
   2. Installation der aktuellen Chrome Beta Webbrowser Version (für Windows XP/Vista/7/8)
2. Vorbereitung Android Device
   1. Installation des neuesten Chrome Beta for Android Browser im Playstore
   2. Aktivierung des USB-Debugging
      1. Android 4.2 und neuer benötigen eine Freischaltung der Entwickleroptionen: Gehe zu Einstellungen -> Über das Telefon -> Klickt hier 7x auf „Build-Nummer„
         
         Unter Android 4.0 und 4.1 sowie unter >4.2 nachdem Freischalten findet man die Entwickleroptionen nun unter Einstellungen -> Entwickleroptionen
      2. Jetzt aktiviert man das USB-Debugging
         
3. Startet euren Rechner jetzt am besten noch einmal neu
4. Verbindung zwischen Chrome Beta for Android und Chrome Beta for Windows
   1. Verbindet spätestens jetzt euer Android Device per USB-Kabel mit eurem Windows-PC
   2. Startet den Chrome Beta Browser aus Schritt 1.2, öffnet einen neuen Tab und gebt ins Adressfeld „about:inspect“ ein und bestätigt mit [Enter]
      
      

       

   3. Hakt das Kästchen „Discover USB Devices“ an. Es sollte kurze Zeit später die Nachricht „Pending authentication: please accept debugging session on the device.“ erscheinen
      
   4. Jetzt sollte auf eurem Android Device die Meldung „USB Debugging zulassen?“ erscheinen. Setzt hier den Haken und bestätigt mit „OK„.
      
   5. Wenn jetzt alles geklappt hat, sollte in dem Chrome Beta Tab euer Android Device auftauchen:
      
   6. Öffnet nun den Chrome Beta Browser auf eurem Android Device und ruft eine Internetseite auf. Jetzt sollte der mobile Browser in dem Tab eures Windows Chrome auftauchen. Klickt nun auf „Inspect„.
      
   7. In dem nun aufklappenden Fenster habt ihr die Möglichkeit mittels Maus im Browser eures Android Device zu navigieren, direkt Internetseiten über die Adresszeile des mobilen Browsers aufzurufen und könnt die Entwickler-Tools von Chrome nutzen, um u.A. die mobile Darstellung zu analysieren.