Chrome Remote Debugging: Developer Tools für mobile Webseiten

chrome 

Die in den Chrome-Browser integrierten Developer Tools sind ein sehr mächtiges Werkzeug zur Entwicklung und Veränderung von Webseiten und dem Aufspüren und Ausbessern von Fehlern. Leider stehen diese Tools nur in der Desktop-Version von Chrome zur Verfügung und sind somit nur sehr schwer zum Debugging von mobilen Webseiten zu nutzen. Mit dem neuen Remote Debugging können diese nun aber auch auf einem angeschlossenen Android-Smartphone genutzt werden.


Die Developer Tools bieten nicht nur die Möglichkeit, den HTML-Aufbau und CSS-Angaben zu ändern und dessen Auswirkungen live zu sehen, sondern stellen auch umfangreiche Werkzeuge zur Messung der Performance, Überwachung von Javascripts und Ressourcen-Verwaltung sowie die Anzeige von Events zur Verfügung. All dies ist natürlich auch auf mobilen Webseiten ein großes Thema, der mobile Chrome-Browser verfügt aber nicht über diese Tools – da sie auf dem kleinen Display wohl auch nur sehr schwer zu bedienen wären.

Chrome Remote Debugging

Mit dem neuen Remote Debugging wird dieses Problem nun gelöst: Nach einigen Schritten der Vorbereitung, die Google sehr gut auch mit einem Video beschreibt, kann das Smartphone per USB-Kabel an den PC oder Laptop angeschlossen und dann die beiden Chrome-Browser miteinander verbunden werden. Nachdem sowohl auf dem Smartphone als auch im Chrome-Browser unter dem neuen Tool „Inspect Devices“ unter der URL chrome://inspect die Vorbereitungen getroffen wurden, kann es schon losgehen.

Die Darstellung der Webseite wird weiterhin auf dem Smartphone übernommen, da diese ja für dieses Gerät optimiert werden soll. Die Developer Tools laufen im Vollbild auf dem Desktop-Browser und funktionieren genau so wie gewohnt. Bearbeitungen auf dem PC werden Live auf dem Smartphone angezeigt, beim überfahren von HTML-Tags wird der entsprechende Bereich direkt auf dem Smartphone markiert – so wie man es auch vom Browser kennt.


Dieses Remote Debugging schließt eine große Lücke in der Entwicklung von Webseiten die für mobile Geräte angepasst sind. Bisher war es nur über Umwege möglich, ein SmartphoneDisplay auf dem PC zu simulieren, und auch dann war es nicht 100%ig sicher ob es auf dem Smartphone tatsächlich so dargestellt wird wie gewünscht. Ein mächtiges Werkzeug, dass sich jeder Entwickler näher ansehen und nutzen sollte.

» Google Chrome Remote Debugging




Teile diesen Artikel:

Facebook twitter Pocket Pocket

comment 2 Kommentare zum Thema "Chrome Remote Debugging: Developer Tools für mobile Webseiten"

  • Das ist schnee von Vorgestern. Remote Debugging gibt es schon lange. Ganz zu anfang musste man da zwar noch mit ADB eine Verbindung aufbauen, aber es war verfügbar. Aber auch die Variante ohne manuellen ADB connect gibt es schon seit einer weile.

Kommentare sind geschlossen.