- 17/07/2012
- 0
Wenn man heutige Webseiten entwickelt, liegt es nah diese auch für mobile Endgeräte anzupassen. Entwicklern stehen dabei eine schier endlose Zahl an Smartphones und Tablets mit unterschiedlichen Auflösungen gegenüber.
Möchte man nun gleichzeitig auf allen zur Verfügung stehenden Geräten die Darstellung der Webseite betrachten, stellt dies einen erheblichen Aufwand dar. Dazu kommt, dass das Debugging des HTML und CSS Codes von den mobilen Betriebssystemen schlecht oder gar nicht unterstützt wird.
Adobe Shadow*
Abhilfe schafft die Software Adobe Shadow. Shadow ist ein Überprüfungs- und Vorschautool, dass es Frontend-Entwicklern ermöglicht effizient Webseiten zu gestalten.
Installation
Die Installation teilt sich in folgende Punkte auf:
- die Adobe Shadow Helper Application, die im jeweiligen Betriebssystem des PCs/Macs installiert wird
- die Shadow App, welche im jeweiligen mobilen Betriebssystem installiert werden muss
- die Browser-Extension, welche derzeit nur für Google Chrome erhältlich ist
Synchronisation
Nach erfolgreicher Installation kann es auch schon losgehen. Beachten Sie bitte, dass sich alle Geräte innerhalb des selben WLAN Funknetzwerkes befinden müssen.
Auf dem PC/Mac muss die Adobe Shadow Helper Application gestartet werden, damit die Extension im Browser lauffähig ist. Öffnen Sie im Smartphone die heruntergeladene App. Im Auswahlbildschirm wird das zu synchronisierende Gerät angezeigt. Wählen Sie Ihr Gerät aus und geben Sie den in der App angezeigten Code in die Extension des Browsers ein (siehe Screenshot). Nach erfolgreicher Eingabe wird das Browserbild synchronisiert. Jeder Klick, den Sie im Browserfenster ausführen, wird auf dem eingebundenen Gerät durchgeführt. Sie können beliebig viele Geräte gleichzeitig synchronisieren.
Debugging
Eine Besonderheit von Adobe Shadow ist das Debugging auf mobilen Endgeräten. Führen Sie folgende Schritte durch, um die Chrome Developer Tools auf Ihrem mobilen Gerät zu verwenden:
- Öffnen Sie den Remote Inspector „weinre“ (siehe unteren Screenshot).
- Wählen Sie das Zielgerät (target) aus.
- Wählen Sie den Reiter „Elements“ aus, um auf die HTML / CSS Struktur zugreifen zu können und manipulieren Sie den Code nach belieben.
Sollten Sie die obigen Schritte befolgt haben, steht Ihnen nun die volle Funktionalität der Chrome Developer Tools zur Verfügung. Was halten Sie von den genannten Möglichkeiten? Nutzen Sie derartige Tools um mobile Webseiten zu bearbeiten?
Update
* Adobe Shadow wurde umbenannt und ist nun unter den Namen Adobe Edge Inspect zu finden. Am eigentlichen Workflow ändert sich jedoch nichts.
