Ein komplettes Redesign nur mit den Browser-Tools? Ein Erfahrungsbericht.

von Henry Zeitler

Dass die DevTools des Chrome Browsers mächtige Werkzeuge für den alltäglichen Workflow des Developers bieten, ist nichts neues. Aber können sie eine komplette IDE ersetzen? Davon habe ich zwar schon mal gehört, ich konnte es mir aber nie so richtig vorstellen. Also musste ich es mal ausprobieren und habe mit den Tools eine Komplette Site in knapp 8 Stunden neu angemalt. Und das ging so.

Der Hintergrund: Der Aufwand und somit die Kosten eines Redesigns sollen in einem überschaubaren Rahmen bleiben. Die bestehende Site basiert jedoch auf Symfony, einem PHP-Framework, mit dem ich noch keinerlei Erfahrung habe. Also entschied ich mich gegen eine lokale Installation der Entwicklungsumgebung und Site und für einen Versuch das Frontend nur mit Hilfe der Chrome DevTools umzugestalten. Ich wusste nicht wirklich auf was ich mich einlasse und wie weit ich damit kommen würde, aber im besten Fall musste ich ja auch nur die Stylesheets und ein paar Images anpacken.
Für die Erklärungen und Beispiele in diesem Artikel benutze ich die Dateien meines Blogs, nicht die Originaldateien des Kunden.

Zuerst der Workflow

Ich benutze die DevTools jeden Tag zum Inspizieren, Debuggen und Ausprobieren. Sie sind ein fester Bestandteil meiner täglichen Arbeit und ich kenne sie sehr gut. Trotzdem war ich wenig später überrascht, welche hilfreichen Features ich bislang noch gar nicht genutzt habe. Zuerst musste jedoch ein brauchbarer Workflow her.

Die Grundlage der Arbeit mit den DevTools ist, dass die Dateien, die vom Server in das Frontend geladen werden, über die Konsole des Browsers lokal gespeichert werden können.

save-source

Dazu muss unter dem Reiter Sources einfach die zu bearbeitende Datei ausgewählt, ein Rechtsklick auf das Code-Fenster erfolgen und über Save as… der Speicherort ausgewählt werden. Was ich aber zu diesem Zeitpunkt noch nicht wusste war, dass die DevTools die Dateien nicht einfach nur lokal ablegen, sondern sich deren Speicherort behalten. Ich sollte aber erst später merken, wie hilfreich das wirklich ist.

Das Aufspüren der Elemente und das Ändern der Styles habe ich dann auf die konventionelle und allen bekannte Art und Weise mit dem DOM-Inspektor bewerkstelligt. Das funktioniert hervorragend wenn vorhandene Styles geändert werden müssen. Es können aber auch neue Formatierungen hinzugefügt werden. Das geschieht dann über das Plus-Zeichen rechts oben im Styles-Fenster.

new-style

Durch das Anklicken des Plus-Buttons werden für das zuvor ausgewählte Element automatisch die (mehr oder weniger) relevanten Selektoren erzeugt und es müssen nur noch die Eigenschaften eingetragen werden. Der neu erzeugte Style wird dann im sogenannten Inspector-Stylesheet zwischengelagert.

inspector

Das Inspector-Stylesheet kann jetzt wie alle anderen Stylesheets über den Link im Styles-Fenster aufgerufen werden. Es wird dann direkt im Reiter Sources geöffnet. Hier kann noch bei Bedarf nachgebessert werden, die neue Eigenschaft ins eigentliche Stylesheet der Seite übertragen und dieses dann über save wieder abgespeichert werden.

inspecto-stylesheetr

Allerdings sollte immer darauf geachtet werden, dass nach einem Browserrefresh die Dateien wieder den Urzustand annehmen. Das kann im schlimmsten Fall dazu führen, dass unvorsichtiges Speichern den Stand der Arbeit einfach wieder zurücksetzt.

War’s das etwa?

Nein. Nachdem ich die oben beschriebenen Schritte ein paar mal wiederholt habe und das lokal gespeicherte Stylesheet in Sublime Text zum Prüfen öffnete, fielen mir zwei Sachen auf:

  1. Die im DOM-Inspektor geänderten Styles wurden im Stylesheet unter dem Reiter Sources automatisch aktualisiert.
  2. Nach dem Speichern der aktualisierten Dateien unter Sources aktualisierten sich die Styles in der Datei, die ich in Sublime Text geöffnet hatte, automatisch.

aktualiserung

Somit konnte ich die Styles im Inspector auswählen und ändern, bzw. hinzufügen, über den Reiter Sources speichern und dann nach einem Wechsel der Seite im Browserfenster den aktuellen Stand aus Sublime Text in die Ursprungsdatei unter Sources kopieren.
Voilà. Nachdem ich alle Pages durchgegangen bin wurde der Stand auf einen Testserver deployed und nochmal ausgiebig getestet. Nach ein paar weiteren kleineren Anpassungen war das Projekt durch.

Perfekt zur Nachbearbeitung

Die DevTools eignen sich hervorragend zur direkten Nachbearbeitung aller statischen Files wie z. B. Stylesheets oder JavaScript (HTML natürlich nur, wenn es nicht aus einem CMS fällt). Und durch die entfallende Installation der Entwicklungsumgebung spare ich initial viel Zeit. Sollte jeder mal ausprobieren.
Es gibt bestimmt noch Verbesserungen im Handling und Workflow und ich wäre dankbar für Tipps und Vorschläge!

comments powered by Disqus