Chrome Developer Tools
Der Browser Chrome bietet auf einem Tablet/Smartphone keinen direkten Entwicklermodus an.
Deshalb muss ein auf einem lokalen PC/Laptop installierter Chrome verwendet werden, um die Chrome Entwickler Werkzeuge zu nutzen.
In deren Entwicklungsumgebung kann dann alles mitgeloggt werden, was auf einem verbundenen Endgerät ausgeführt wird.
Mobiles Endgerät anschließen
Das mobile Endgerät muss mit einem PC bzw. Laptop verbunden werden. Hierfür muss im Tablet/Smartphone der USB-Debugging Modus aktiviert werden.
Sollte dieser noch nicht aktiviert sein, ist im Artikel “PC-Zugriff auf Samsung Tablet oder Handy aktivieren” die Vorgehensweise beschrieben.
Endgerät im Browser aufrufen
Sobald das Tablet / Smartphone mit dem PC verbunden ist, wird in einem normalen Chrome-Tab folgender Aufruf eingegeben:
chrome://inspect/#devices
Nach kurzer Wartezeit zeigen die DevTools alle verbundenen Geräte an, in diesem Beispiel ein Samsung SM-T733 Tablet.
Wird das Gerät unter “Other / Andere" angezeigt, auf “inspect” klicken.
Es öffnet sich links ein weiterer Bereich, in dem der Inhalt des remoteverbundenen Gerätes angezeigt wird. Rechts werden die Analysetools angezeigt.
Performance analysieren
Im Register „Performance“ besteht die Möglichkeit, einen Überblick über die Leistung einer Seite zu bekommen. Es die Möglichkeit, verschiedene Szenarios aufzunehmen, die anschließend automatisch analysiert werden. Zusätzlich gibt es einen Bericht über die Performance der Webseite.
Wichtig: Die Inhalte des Tablets müssen nochmals neu geladen werden, damit eine Auswertung erfolgen kann.
Dazu auf
- “Click the reload button / Das Laden der Seite aufzeichnen” klicken oder
- Strg+Shift+E ausführen .
Im Beispiel soll die Performance beim Laden des MOW analysiert werden.
Auswertung
Eine Auswertung kann direkt erfolgen und mit “Save profile” als Trace-File gespeichert werden für eine Auswertung durch unsere Entwicklungsabteilung.
