Einleitung
Wenn Sie als Webentwickler auf das Multigeräte-Web ausgerichtet sind, müssen Sie Ihre Websites und Webanwendungen wahrscheinlich für eine Reihe verschiedener Geräte und Konfigurationen testen. Synchronisierte Tests können hier hilfreich sein und sind eine effektive Methode, um dieselbe Interaktion automatisch über mehrere Geräte und Browser gleichzeitig hinweg durchzuführen.
Synchronisierte Tests können zwei besonders zeitaufwendige Probleme lösen:
- Alle Geräte werden mit der URL synchronisiert, die du testen möchtest. Das manuelle Laden auf jedem Gerät war gestern, dauert länger und macht es leichter, Regressionen zu übersehen.
- Interaktionen synchronisieren: Die Möglichkeit, eine Seite zu laden, eignet sich hervorragend für visuelle Tests. Für Interaktionstests sollten Sie aber idealerweise auch Scrollvorgänge, Klicks und andere Verhaltensweisen synchronisieren können.
Wenn Sie Zugriff auf einige Ihrer Zielgeräte haben, gibt es eine Reihe von Tools, mit denen Sie den Fluss von Desktop zu Ihren Mobilgeräten verbessern können. In diesem Artikel geht es um Ghostlab, Remote Preview, Adobe Edge Inspect und Grunt.
Tools
GhostLab (Mac)
Ghostlab ist eine kommerzielle Mac-Anwendung (49 $), mit der Tests für Websites und Webanwendungen auf mehreren Geräten synchronisiert werden können. Bei minimaler Einrichtung können Sie gleichzeitig Folgendes synchronisieren:
- Klicks
- Navigation
- Scrolls
- Eingabe in Formularen (z. B. Anmeldeformulare, Registrierung)
So ist es ganz einfach, die Endnutzererfahrung Ihrer Website auf mehreren Geräten zu testen. Nachdem Sie die Seite in einem Browser auf Ihren Geräten geöffnet haben, werden bei Änderungen an der Navigation (einschließlich Aktualisierungen) alle anderen verbundenen Geräte sofort aktualisiert. Ghostlab unterstützt die Überwachung lokaler Verzeichnisse. Diese Aktualisierung erfolgt also auch, wenn Sie Änderungen an lokalen Dateien speichern. Dadurch werden alle Dateien immer synchronisiert.
Die Einrichtung von Ghostlab war sehr einfach. Laden Sie zuerst die Testversion oder die Vollversion herunter, installieren Sie diese und führen Sie sie aus, wenn Sie etwas kaufen möchten. Verbinde dann deinen Mac und die Geräte, die du testen möchtest, mit demselben WLAN, damit sie sichtbar sind.
Sobald Ghostlab ausgeführt wird, können Sie entweder auf „+“ klicken, um eine URL zum Testen hinzuzufügen, oder sie einfach aus der Adressleiste des Browsers ziehen. Alternativ können Sie den lokalen Ordner, den Sie testen möchten, in das Hauptfenster ziehen. Daraufhin wird ein neuer Websiteeintrag erstellt. In diesem Artikel teste ich eine Live-Version von http://html5rocks.com.
Sie können dann einen neuen Ghostlab-Server starten, indem Sie neben dem Namen Ihrer Website auf die Wiedergabeschaltfläche ">" klicken. Dadurch wird ein neuer Server gestartet, der unter einer für Ihr Netzwerk spezifischen IP-Adresse verfügbar ist (z. B. http://192.168.21.43:8080).
Ich habe ein Nexus 4 verbunden und Chrome für Android auf die IP-Adresse verwiesen, die ich von Ghostlab erhalten habe. Das ist alles, was ich tun muss. Ghostlab erfordert im Gegensatz zu einigen anderen Lösungen nicht die Installation eines dedizierten Clients pro Gerät, und Sie können die Tests jetzt noch schneller durchführen.
Jedes Gerät, das Sie mit der Ghostlab-URL verbinden, wird der Liste der verbundenen Clients in der Seitenleiste rechts des Ghostlab-Hauptfensters hinzugefügt. Wenn Sie auf den Gerätenamen doppelklicken, werden zusätzliche Details wie Bildschirmgröße, Betriebssystem usw. angezeigt. Sie sollten jetzt das Navigieren und Synchronisieren von Klicks testen können. Hurra!
Ghostlab kann auch Statistiken zu verbundenen Geräten anzeigen, z. B. den UA-String, die Breite und Höhe des Darstellungsbereichs, die Pixeldichte des Geräts, das Seitenverhältnis und mehr. Sie können die zu prüfende Basis-URL jederzeit manuell ändern, indem Sie neben einem Eintrag auf das Zahnradsymbol für die Einstellungen klicken. Daraufhin wird ein Konfigurationsfenster wie folgt geöffnet:
Jetzt kann ich eines meiner anderen verbundenen Geräte auswählen, auf verschiedene Links rund um HTML5Rocks klicken und die Navigation wird sowohl auf meinem Desktop-Chrome (auf dem ich dieselbe Ghostlab-URL eingegeben habe) als auch auf allen meinen Geräten synchronisiert.
Noch besser ist, dass Ghostlab eine Option bietet, mit der du alle Links im Netzwerk über einen Proxy weiterleiten kannst. So musst du nicht auf http://192.168.21.43:8080/www.html5rocks.com navigieren, sondern www.html5rocks.com/en/http://http://192.168.21.43/www.htm5rocks.com/en/performance
Wenn Sie die Funktion aktivieren möchten, klicken Sie auf dem Tab „Inhalte laden“ das Kästchen „Alle Inhalte über Ghostlab laden“ an.
So sieht es in Aktion aus:
Ghostlab kann beliebig viele Websites oder Fenster in jedem unterstützten Browser laden. So können Sie nicht nur Ihre Website in unterschiedlichen Auflösungen testen, sondern auch sehen, wie sich der Code in verschiedenen Browsern und auf unterschiedlichen Plattformen verhält. Super!
Mit Ghostlab können Sie die Einrichtung für den Projektarbeitsbereich konfigurieren, den Sie in der Vorschau anzeigen möchten, und angeben, ob Änderungen am Verzeichnis beobachtet und aktualisiert werden sollen, wenn sie erkannt werden. Das bedeutet, dass Änderungen dazu führen, dass alle verbundenen Clients aktualisiert werden. Keine manuellen Aktualisierungen mehr!
Sie fragen sich vielleicht, wofür Ghostlab sonst noch helfen kann. Es ist zwar kein Schweizer Taschenmesser, unterstützt aber auch die Codeprüfung auf verbundenen Geräten per Fernzugriff. Wenn Sie auf der Hauptoberfläche auf einen Gerätenamen doppelklicken, wird eine Option zum Debuggen angezeigt, mit der eine Version der Chrome-Entwicklertools gestartet wird, mit denen Sie experimentieren können.
Dies ist in Ghostlab über das gebündelte Weinre Remote Web Inspector möglich, mit dem Sie Fehler in Skripts beheben und Stile auf verbundenen Geräten anpassen können. Ähnlich wie bei der Remote-Fehlerbehebung, die für Chrome für Android verfügbar ist, können Sie Elemente auswählen, einige Leistungsprofile ausführen und Debugging-Skripts ausführen.
Insgesamt war ich beeindruckt, wie schnell ich Ghostlab für tägliche Tests auf verschiedenen Geräten nutzen konnte. Für freiberuflich Tätige könnten die Kosten für eine gewerbliche Lizenz etwas hoch sein (weitere Optionen siehe unten). Ansonsten kann ich Ghostlab aber gerne empfehlen.
Adobe Edge Inspect CC (Mac, Windows)
Adobe Edge Inspect ist Teil des Adobe Creative Cloud-Abonnementpakets, steht aber auch als kostenlose Testversion zur Verfügung. Sie können damit mehrere iOS- und Android-Geräte mit Chrome verwenden (über die Chrome-Erweiterung Edge Inspector). Wenn Sie eine bestimmte URL aufrufen, bleiben alle Ihre verbundenen Geräte synchronisiert.
Registrieren Sie sich zuerst für ein Adobe Creative Cloud-Konto oder melden Sie sich in einem bestehenden Konto an, falls Sie bereits eines haben. Laden Sie als Nächstes Edge Inspector von Adobe.com herunter und installieren Sie das Tool (derzeit für Mac und Windows verfügbar, aber nicht für Linux). Die docs für Edge Inspect sollten Sie immer griffbereit haben.
Nach der Installation benötigen Sie die Edge Inspect-Erweiterung für Chrome, damit Sie das Surfen zwischen verbundenen Geräten synchronisieren können.
Außerdem müssen Sie auf jedem Gerät, mit dem Sie Aktionen synchronisieren möchten, einen Edge-Inspect-Client installieren. Glücklicherweise gibt es Clients für iOS, Android und Kindle.
Nachdem wir den Installationsprozess durchlaufen haben, können wir jetzt mit der Prüfung unserer Seiten beginnen. Alle Geräte müssen mit demselben Netzwerk verbunden sein, damit dies funktioniert.
Starten Sie Edge Inspect auf Ihrem Desktop, die Edge Inspect-Erweiterung in Chrome und dann die App auf Ihren Geräten (siehe unten):
Jetzt können wir auf einem Computer eine Website wie HTML5Rocks.com aufrufen und auf unserem Mobilgerät wird diese Seite automatisch aufgerufen.
In der Erweiterung wird dein Gerät nun auch mit dem Symbol <> daneben angezeigt (siehe Screenshot unten). Wenn Sie darauf klicken, wird eine Weinre-Instanz gestartet, mit der Sie Ihre Seite untersuchen und Fehler beheben können.
Weinre ist ein DOM-Viewer und eine Konsole, dem Funktionen der Chrome-Entwicklertools wie JavaScript-Debugging, Profilerstellung und Netzwerkabfolge fehlen. Es ist zwar das absolute Minimum an Entwicklertools, aber nützlich für die Plausibilitätsprüfung des DOM- und des JavaScript-Status.
Die Edge Inspect-Erweiterung unterstützt auch das Generieren von Screenshots von verbundenen Geräten im Handumdrehen. Nützlich für Layouttests oder einfach um Aufnahmen Ihrer Seite zu erhalten, die Sie mit anderen teilen können.
Für Entwickler, die bereits für CC bezahlen, ist Edge Inspect eine großartige Lösung. Allerdings gibt es einige Einschränkungen. Beispielsweise muss bei jedem Gerät ein dedizierter Client installiert werden, und es gibt ein wenig zusätzliche Einrichtungsschritte, die Sie bei einer Alternative wie Ghostlab möglicherweise nicht finden.
Remote-Vorschau (Mac, Windows, Linux)
Die Remote-Vorschau ist ein Open-Source-Tool, mit dem Sie HTML-Seiten und Inhalte hosten können, die sich auf mehreren Geräten anzeigen lassen.
In der Remotevorschau wird in einem Intervall von 1.100 ms ein XHR-Aufruf ausgeführt, um zu prüfen, ob eine URL in einer Konfigurationsdatei geändert wurde. Ist dies der Fall, aktualisiert das Skript das Attribut "src" eines iFrames, der für jedes Gerät in die Seite geladen wird, und lädt die Seite in die Seite. Wenn keine Änderungen erkannt werden, führt das Skript die Abfragen durch, bis eine Änderung vorgenommen wurde.
Diese Methode eignet sich hervorragend, um Geräte zu verketten und einfach eine URL für alle Geräte zu ändern. So gehts:
- Laden Sie die Remotevorschau herunter und verschieben Sie alle zugehörigen Dateien auf einen lokal zugänglichen Server. Das kann Dropbox, ein Entwicklungsserver oder etwas anderes sein.
- Laden Sie "index.html" aus diesem Download auf alle Ihre Zielgeräte. Diese Seite wird als Treiber verwendet und lädt die zu testende Seite mit einem iFrame.
- Bearbeiten Sie die Datei "url.txt" (im Download enthalten und jetzt auf Ihrem Server bereitgestellt) mit der URL, die Sie in der Vorschau ansehen möchten. Speichern Sie diese Datei.
- In der Remotevorschau wird festgestellt, dass sich die Datei „url.txt“ geändert hat. Alle verbundenen Geräte werden aktualisiert, um die URL zu laden.
Remote Preview ist zwar eine Lo-Fi-Lösung, sie ist aber kostenlos und funktioniert.
Grunt + Live-Refresh (Mac, Windows, Linux)
Grunt (und Yeoman) sind Befehlszeilentools, die für das Gerüst und die Erstellung von Projekten auf dem Frontend verwendet werden. Wenn du diese Tools bereits verwendest und den Live-Neuladevorgang eingerichtet hast, kannst du deinen Workflow ganz einfach aktualisieren, um geräteübergreifende Tests zu ermöglichen. Dabei führt jede Änderung im Editor dazu, dass eines der Geräte neu geladen wird, auf denen du deine lokale App geöffnet hast.
Wahrscheinlich sind Sie es gewohnt, grunt server zu verwenden. Bei der Ausführung im Stammverzeichnis Ihres Projekts wird nach Änderungen an Ihren Quelldateien gesucht und das Browserfenster wird automatisch aktualisiert. Dies ist auf die Aufgabe „grun-contrib-watch“ zurückzuführen, die wir als Teil des Servers ausführen.
Wenn Sie Yeoman verwendet haben, um das Gerüst Ihres Projekts aufzubauen, wurde ein Gruntfile erstellt, das alles enthält, was Sie benötigen, um die Live-Aktualisierung auf Ihrem Desktop durchzuführen. Damit sie geräteübergreifend funktioniert, müssen Sie nur eine Eigenschaft ändern, nämlich hostname (auf Ihrem Computer). Es sollte unter connect aufgeführt sein. Wenn hostname auf localhost gesetzt ist, ändern Sie es einfach in 0.0.0.0. Führen Sie als Nächstes grunt server aus. Wie gewohnt sollte ein neues Fenster mit einer Vorschau Ihrer Seite geöffnet werden. Die URL sieht wahrscheinlich so aus: http://localhost:9000 (9000 ist der Port).
Starten Sie einen neuen Tab oder ein neues Terminal und verwenden Sie ipconfig | grep inet, um die interne IP-Adresse Ihres Systems zu ermitteln. Es sieht in etwa so aus: 192.168.32.20. Der letzte Schritt besteht darin, einen Browser wie Chrome auf dem Gerät zu öffnen, mit dem Sie Live-Updates synchronisieren möchten, und diese IP-Adresse gefolgt von der zuvor angegebenen Portnummer einzugeben, z. B.192.169.32.20:9000.
Fertig! Das Live-Neuladen sollte jetzt dazu führen, dass alle Änderungen, die Sie an den Quelldateien auf Ihrem Desktop vornehmen, ein erneutes Laden in Ihrem Desktop-Browser und im Browser auf Ihrem Mobilgerät auslösen. Super!
Yeoman verfügt außerdem über einen mobilen Generator, mit dem dieser Workflow im Handumdrehen eingerichtet werden kann.
Emmet LiveStyle
Emmet LiveStyle ist ein Browser- und Editor-Plug-in, das die Live-Bearbeitung von CSS im Entwicklungs-Workflow ermöglicht. Sie ist derzeit für Chrome, Safari und Sublime Text verfügbar und unterstützt die bidirektionale Bearbeitung (von Editor zu Browser und umgekehrt).
Emmet LiveStyle erzwingt keine vollständige Aktualisierung des Browsers, wenn Sie Änderungen vornehmen, sondern überträgt stattdessen CSS-Änderungen über das Remote-Debugging-Protokoll der Entwicklertools. Das bedeutet, dass Änderungen, die in Ihrem Desktop-Editor vorgenommen wurden, in jeder verbundenen Version von Chrome angezeigt werden können, egal ob in der Desktopversion von Chrome oder Chrome für Android.
LiveStyle hat einen sogenannten „Multi-View-Modus“, der sich ideal zum Testen und Optimieren responsiver Designs über Fenster und Geräte hinweg eignet. Im Mehrfachansichtsmodus werden alle Editor-Updates auf alle Fenster angewendet, ebenso wie Entwicklertools-Updates für dieselbe Seite.
Nach dem Installieren des LiveStyle-Pakets kannst du mit der Live-CSS-Bearbeitung beginnen:
- Sublime Text starten und eine CSS-Datei in einem Projekt öffnen
- Starten Sie Chrome und rufen Sie die Seite mit dem CSS auf, das Sie bearbeiten möchten.
- Öffne die Entwicklertools und rufe den Bereich „LiveStyle“ auf. Aktiviere die Option „LiveStyle aktivieren“. Hinweis: Die Entwicklertools müssen während der Live-Bearbeitungssitzung für jedes Fenster geöffnet bleiben, damit Stilaktualisierungen angewendet werden können.
- Wenn diese Option aktiviert wurde, werden links eine Liste der Stylesheets und rechts eine Liste Ihrer Editordateien angezeigt. Wählen Sie die Editordatei aus, die mit dem Browser verknüpft werden soll. Fertig! Zack!
Jetzt wird die Liste der Editordateien automatisch aktualisiert, wenn Sie Dateien bearbeiten, erstellen, öffnen oder schließen.
Ergebnisse
Geräteübergreifende Tests sind immer noch ein neuer Bereich, der sich schnell entwickelt und viele neue Anbieter in der Entwicklung sind. Glücklicherweise gibt es eine Reihe von kostenlosen und kommerziellen Tools, mit denen Sie Kompatibilität und Tests mit einer Vielzahl von Geräten gewährleisten können.
Dennoch gibt es in diesem Bereich noch viel Potenzial für Verbesserungen und wir möchten Sie ermutigen, darüber nachzudenken, wie die Tools für geräteübergreifende Tests weiter verbessert werden können. Alles, was die Einrichtungszeit verkürzt und den geräteübergreifenden Workflow verbessert, ist ein Gewinn.
Probleme
Die vielleicht größten Probleme, die ich während der Tests mit diesen Tools hatte, waren Geräte, die regelmäßig in den Ruhemodus wechselten. Das ist kein Kompromiss, aber nach einiger Zeit ärgerlich. Um das Problem zu umgehen, empfiehlt es sich, die Geräte nach Möglichkeit so einzustellen, dass sie nicht in den Ruhezustand versetzt werden. Allerdings kann dadurch der Akku entladen werden, wenn das Gerät nicht immer an die Stromversorgung angeschlossen ist.
Ich selbst hatte keine größeren Probleme mit GhostLab. Mit 49 $kann der Preis für manche Nutzer etwas hoch sein. Denken Sie jedoch daran, ob Sie sich mehr oder weniger auszahlen, wenn Sie ihn regelmäßig nutzen. Das Schönste an der Einrichtung war, sich keine Gedanken um die Installation und Verwaltung eines Clients pro Zielgerät machen zu müssen. Dieselbe URL funktionierte überall.
Mit Adobe Edge Inspect ist es ziemlich mühsam, auf jedem Gerät bestimmte Clients zu installieren und zu verwenden. Außerdem stellte ich fest, dass nicht alle verbundenen Clients kontinuierlich aktualisiert wurden. Das bedeutete, dass ich das selbst über die Chrome-Erweiterung tun musste. Außerdem ist ein Creative Cloud-Abo erforderlich und Websites können nur im Client und nicht in einem ausgewählten Browser auf den Geräten geladen werden. Dies kann Ihre Möglichkeiten einschränken, präzise Tests durchzuführen.
Die Remote-Vorschau funktioniert wie angegeben, ist aber sehr ressourcenintensiv. Wenn Sie also nicht nur Ihre Website geräteübergreifend aktualisieren, benötigen Sie erweiterte Tools. So werden beispielsweise Klicks oder Scrollen nicht synchronisiert.
Empfehlungen
Wenn Sie für den Einstieg nach einer kostenlosen plattformübergreifenden Lösung suchen, empfehle ich die Remotevorschau. Für alle, die in einem Unternehmen arbeiten, das nach einer kostenpflichtigen Lösung sucht, hat sich GhostLab durchweg hervorragend gemacht, ist aber nur für Macs verfügbar. Für Windows-Nutzer ist Adobe Edge Inspect die beste Lösung. Abgesehen von einigen kleinen Macken hat es in der Regel alles erledigt.
Grunt und LiveStyle eignen sich außerdem hervorragend zur Erweiterung deiner Live-Iteration während der Entwicklung.