Neu laden des Browserfensters automatisieren

Viele Webentwickler benutzen bei der Erstellung des Codes ihren Lieblingseditor, überprüfen aber dennoch die Änderungen permanent in ihrem Webbrowser. Das führt dazu, dass ein ständiges hin- und herspringen zwischen Code-Editor und Browser erfolgt. Dabei sind stets mehrere Schritte notwendig: Zunächst speichert man den Code im Editor, wechselt dann zum Webbrowser und aktualisiert schließlich den Inhalt der Seite. Zwar lässt sich die Prozedur durch die Verwendung von Tastenkürzeln erheblich beschleunigen, dennoch kostet jede Wiederholung Zeit und Nerven.

Einen möglichen Lösungsansatz bietet ein Werkzeug namens XRefresh, welches automatisch das Browserfenster aktualisiert sobald eine Änderung am Code vorgenommen wurde. XRefresh selbst besteht aus zwei Komponenten, nämlich aus einem Plugin für den Browser (Firefox und Internet Explorer) und einer Anwendung (Windows und Mac), die die Projektordner auf Änderungen überwacht.

Installation

Wer XRefresh im Zusammenspiel mit Firefox nutzen möchte, muss zunächst Firebug installieren. Zusätzlich muss noch das eigentliche XRefresh Add-on installiert werden.
Nutzer des Internet Explorers müssen lediglich ein Installationspaket ausführen, welches sowohl die Anwendung wie auch das Add-on beinhaltet.

Bedienung

Nach dem Start nistet sich XRefresh unter Windows im Infobereich (Traybar) ein. Als ersten Schritt trägt man die gewünschten Dateien bzw. Verzeichnisse in eine “Überwachungsliste” ein. Nun öffnet man den gewünschten Browser. Im Firefox müssen lediglich die beiden Add-ons aktiv sein, im Internet Explorer muss zusätzlich das XRefresh Icon betätigt werden. Wird jetzt eine Änderung an einer der Dateien aus der Überwachungsliste vorgenommen und diese gespeichert, aktualisiert das Programm sofort und automatisch die Seite im Browser.

Einsatzmöglichkeiten

Besitzt man einen ausreichend großen Monitor, kann man bequem den Editor und den Browser gleichzeitig geöffnet lassen, und hat nach dem Abspeichern (am schnellsten mit dem Tastenkürzel Strg+C) alle Änderungen in Echtzeit im Blick. Bei kleineren Monitoren ist zwar noch ein Programmwechsel (Alt+TAB) erforderlich, zumindest entfällt aber das lästige Aktualisieren der Website. Gute Dienste leistet die Software auch, wenn man mit zwei Monitoren arbeitet, d. h., auf dem ersten Monitor läuft die Entwicklungsumgebung und auf dem anderen der Browser. In jedem Fall lässt sich durch den Einsatz von XRefresh Maus- und Tastaturarbeit – und damit Zeit – einsparen.

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

, ,

Ebenfalls Lesenswert:

5 Reaktionen zu Neu laden des Browserfensters automatisieren

  1. Joachim 28. Januar 2010 at 02:20 #

    Danke für den Tipp, bin auch einer von denen die immer zwischen Editor und Browser switchen, wird mir in Zukunft viel geklicke ersparen!

Trackbacks/Pingbacks

  1. Geniale Firebug-Erweiterungen für CSS / HTML-Entwickler | CSS einfach erklärt - 17. Januar 2011

    [...] XRefresh: Neu laden des Browserfensters automatisieren [...]

  2. Mehr Platz auf dem Desktop und Monitor | CSS einfach erklärt - 24. Januar 2011

    [...] Beispielsweise kann man so die Entwicklungsumgebung für den Quellcode auf Desktop eins legen, während auf Desktop zwei die Grafikprogramme laufen. Auf Desktop drei könnten dann noch ein oder mehrere Webbrowser geöffnet sein, mit denen man die Auswirkungen am Quellcode (von Desktop eins getätigt) nachvollziehen kann. [...]

  3. WinSCP als Alternative zu Filezilla? | CSS einfach erklärt - 19. Februar 2011

    [...] kann eine wirkliche Klick- und damit Zeitersparnis bedeuten. Benutzten Sie parallel noch XRefresh zum automatisierten Neuladen des Browserfensters, schlagen Sie gleich zwei Fliegen mit einer [...]

  4. FireCSS: CSS in allen Browsern gleichzeitig bearbeiten | Homepage erstellen, Webdesign lernen | CSS einfach erklärt - 25. März 2011

    [...] Code-Editor und Browser notwendig. Ein Hilfsmittel, das diese Prozedur erheblich vereinfacht, ist XRefresh, welches automatisch das Browserfenster aktualisiert, sobald eine Änderung am Code vorgenommen [...]

Hinterlasse eine Antwort