Browser-Tipp: Automatische Browseraktualisierung für Web-Entwickler

Wenn man Web-Entwicklung betreibt, muss man ständig die Website im Browser aktualisieren. Nur so kann man prüfen, ob der geschriebene Code auch das erfüllt, was beabsichtigt war. Die einfachste Methode dazu ist, die F5-Taste zu drücken. Das bewirkt das Aktualisieren der Seite im Browser.

Soweit so gut. Aber wen man den lieben langen Tag z.B. Templates und Stylesheets eines WordPress-Themes bearbeitet, müsste man wohl hunderte Male die F5-Taste drücken. Das wollen wir nicht!

Im folgenden Beitrag zeige ich einen kleinen Rundumschlag an tollen Möglichkeiten, wie man sich diesen lästigen Tasten-Klick entledigen kann. Wer sich nur für die „Ober-Hippster-Möglichkeit“ interessiert, springt gleich nach ganz unten… ;-)

Übrigens: Die hier beschriebenen Möglichkeiten für Browser-Aktualisierungen richten sich an Web-Entwickler, die auf lokalen Entwicklungsumgebungen arbeiten. Da ich selbst ausschließlich so arbeite, kann ich zu Refresh-Möglichkeiten in remote Umgebungen leider nichts beitragen.

1. Zeitgesteuertes Reload

Als verbreitetste Hilfe für ein automatisches Reload haben sich Browsererweiterungen etabliert, welche nach einer bestimmten Zeit, die Seite im Browser aktualisieren. Als Beispiel sei hier ReloadEvery für Firefox genannt.

ReloadEvery

ReloadEvery (Screenshot von der Mozilla Add-ons Seite)

Diese Erweiterungen gibt es für alle wichtigen Browser. Googelt einfach mal nach „browser auto refresh„.

2. Ereignis-gesteuertes Reload mit Javascript

Zeitgesteuertes Reload ist schon mal besser als nichts. Doch es geht auch eleganter. Nämlich indem sich das Browser-Fenster ereignisgesteuert aktualisiert: Die Seite wird erst dann geladen, wenn die Quelldatei gespeichert wurde.

cssrefresh

Vor einiger Zeit bin ich durch den Artikel CSS Refresh ohne Reload, dafür mit JavaScript von Guido Mühlwitz auf diese Möglichkeit gestoßen. Dort beschreibt er, wie man mit dem JavaScript CSSrefresh das Aktualisieren einer Webseite im Browser ereignisgesteuert lösen kann. Allerdings ist diese Lösung auf die CSS-Datei beschränkt. Das reicht uns für die Web-Entwicklung nicht. Es gibt noch mehr als CSS…

3. Ereignis-gesteuertes Reload mit LiveReload – Mac and Win only…;-(

Mit LiveReload kann man den Browser ereignisgesteuert aktualisieren – und zwar für alle Dateien.

Jedes Mal wenn man die Code-Datei abspeichert, wird das von LiveReload erkannt und der/die Browser aktualisiert. Die Aktualisierung geschieht – je nach Menge der Dateien, die überwacht werden müssen – quasi ad-hoc. Das ist großartig!
(Vielen Dank an Caspar Hübinger für diesen Tipp!)

4. Ereignis-gesteuertes Reload für Ubuntu (und den ganzen Rest…)

Eigenlicht ist die dritte Möglichkeit schon die Beste. Aber leider gibt es LiveReload nur für Mac und – als Pre-Alpha – für Windows. Als Linux-Anwender bleibt man außen vor. Für Ubuntu (und den ganzen Rest) gibt es aber immerhin eine Alternative: Guard::LiveReload. Mit Guard steuert man LiveReload und erledigt so die Aktualisierung im Browser.

Screenshot – Guard mit LiveReload auf meiner lokalen Entwicklungsumgebung unter Ubuntu

Im nächsten Artikel umreiße ich, was man anstellen muss, um auf Ubuntu (12.04) die Ereignissteuerung mit Guard zu installieren. Als Bonus zeige ich auch noch die Integration von Compass und SASS in Guard. So dass man gleich zwei Fliegen mit einer Klappe schlägt: 1) die CSS-isierung der Scss-Dateien und 2) den anschließenden Browser-Refresh.

Also bleibt gespannt und schaut bald wieder vorbei. Ich schätze, nächste Woche stelle ich den anschließenden Ubuntu-Guard-LiveReload-Artikel ins Netz.

This entry was posted on by .

Heiko Mamerow

Buddhist, Vater, Freund, Internetseitenbauer, Sportler, Musikliebhaber & Verkehrsteilnehmer ;-)

3 Gedanken zu „Browser-Tipp: Automatische Browseraktualisierung für Web-Entwickler

  1. Stephan Schröder

    Ein Aktualisieren nützt, mit welcher Methode auch immer, nichts wenn der Browser auf den Cache zurückgreift. Wirkungsvoll und tatsächlich „frisch“ lädt man eine Datei nur wenn man sie mit einem Query anfordert der immer wieder verschieden ist. Probates Mittel dabei ist der Timestamp der die Millisekunden seit 1970 zurückgibt und immer verschieden ist. <a href="datei.php?t=“ wird die Datei stets frisch laden und niemals aus dem Cache holen.

    Antworten
  2. Torsten

    Oder man drückt Ctrl (bzw. Cmd beim Mac), wenn man F5 oder R (für Reload) drückt oder den Reload-Button klickt.

    Vielen Dank für den LiveReload-Tipp! Gleich mal ausprobieren …

    Antworten
  3. Spiv

    In meiner Antwort ging es eher darum, wie man sicher stellt das der Server stehts die aktuellen Daten ausgibt und nicht auf den Cache zurückgreift was zum Beispiel bei einem Bestellvorgang im Onlineshop durchaus wichtig sein kann.

    Antworten

Schreibe einen Kommentar

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