Adobe Edge Inspect – Paralleler Schnelltest mobiler Seiten

Beim Erstellen einer mobilen bzw. responsiven Seite kommt früher oder später der Augenblick, an welchem diese auch auf mobilen Geräten und deren Browsern getestet werden muss. An dieser Stelle könnte Adobe Edge Inspect ins Spiel kommen. Es ermöglicht genau dies, inklusive der Möglichkeit die Seite über einen Remote-Debugger zu untersuchen.

Der erste Schritt hin zum fröhlichen Testen ist das Herunterladen und Installieren der Software  auf dem eigenen Rechner. Hierzu wird allerdings eine Adobe ID benötigt, welche bei Bedarf an dieser Stelle auch erstellt werden kann. Nach der Installation kann Edge Inspect entweder über die (leider) mit zu installierende Adobe Creative Cloud Software, oder über die normale Verknüpfung (bspw. im Startmenü) gestartet werden. Als nächstes folgt die Installation der Adobe Edge Inspect Erweiterung für den Chrome Browser, sowie der Edge Inspect App für die mobilen Geräte auf denen getestet werden soll. Sind diese Schritte erledigt, können die mobilen Geräte mit dem Rechner verbunden werden.

Hierbei ist zu beachten, dass sich alle Geräte im selben Netzwerk befinden. Nach dem Starten der App sucht diese automatisch nach einem Rechner mit aktivierter Chrome-Erweiterung. Es ist aber ebenfalls möglich über den “+”-Button manuell eine Verbindung hinzuzufügen, bspw. über die Eingabe der IP-Adresse. Wurde der Rechner gefunden, generiert die App einen 6-stelligen Code, welcher zur Verbindung benötigt wird. Nun muss nur noch am Rechner über die Edge Inspect-Software die Autorisierungsanfrage bestätigt und in der Chrome Erweiterung der Code im entsprechenden Feld eingegeben werden. Ist dies geschehen, wird automatisch die auf dem Rechner geöffnete Webseite auch auf dem Gerät dargestellt. Auf diese Art und Weise ist die Verbindung weiterer Geräte möglich, sodass Änderungen an der Webseite simultan auf allen getestet werden können. Voraussetzung dafür ist allerdings die Vollversion von Edge Inspect, welche nur mit einem bezahlten Adobe-Account genutzt werden kann. Auf diesen Umstand wird beim Download der Software leider nur unzureichend hingewiesen.

Screenshot_2015-10-21-15-50-20

Edge Inspect App auf mobilem Gerät

Sind erst einmal alle gewünschten Geräte verbunden, ist die Handhabung denkbar einfach. Werden Änderungen an der Seite vorgenommen (egal ob HTML, CSS oder JavaScript), muss diese einfach nur im Browser am Desktop aktualisiert werden, was dazu führt, dass automatisch auch alle verbundenen Geräte die aktualisierte Seite laden. Zusätzlich dazu, kann über die Chrome Erweiterung auch ein Remote-Debugger, bspw. weinre, gestartet werden, um die Seite noch weiter zu untersuchen. Hierzu muss einfach der “<>”-Button hinter dem jeweiligen Gerätenamen betätigt werden. Außerdem ist es möglich, direkt über die Chrome Erweiterung Screenshots vom Gerät anzufordern, welche dann auf dem Rechner gespeichert werden.

chrome_extension

Edge Inspect Chrome Erweiterung

Wenn auch die Einrichtung durch die Anzahl der zu installierenden Tools/Apps vielleicht etwas umständlich erscheint, so stellt Edge Inspect aufgrund der Möglichkeit des simultanen Testen auf mehreren, verschiedenen Geräten eine Alternative dar, die beim Entwickeln einer responsiven Seite zumindest in Betracht gezogen werden sollte. Das diese zusätzlich noch debugged werden können, ist ein weiterer Pluspunkt, der diesen Eindruck nur verstärkt.

Wir freuen uns über eine Bewertung, um ein Feedback zu erhalten:

Durchschnittlich 4.9 Sterne aus 8 Meinungen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.