Hier mal wieder nerdiger Programmcode. Es wird mal wieder Zeit 🙂 Alle nicht Programmierer bitte diesen Eintrag ignorieren. Web-Entwickler, die mit Linux und emacs arbeiten, dürfte dieser Beitrag aber sicher interessieren.

Nichts ist bei der Programmierung von Webkomponenten so nervig, wie der ständig notwendige Refresh des Browsers. Das ist nötig, um zu sehen, ob die eingefügten Änderungen und Korrekturen auch wirklich greifen.

Lange Zeit gab es mit “Live-Reload” ein Plugin für diverse Browser, welches man so einstellen konnte, dass es Änderungen überwachte und die Seite dann automatisch neu geladen hat. Ich habe aber keine funktionierende Variante dieses Plugins mehr finden können, d.h. man muss sich anders behelfen.

Vor einiger Zeit habe ich erklärt, wie man das unter Windows für die IDE “phpstorm” und für “Visual Studio Code” einrichten kann – jeweils mit Powershell. In diesem Beitrag erkläre ich, wie sich das unter Linux mit emacs bewerkstelligen lässt. Das funktioniert mit einem bash-Script, dass über eine LISP Funktion in der emacs-Config und der Zuordnung zu einem Tastaturkürzel ausgelöst wird.

Das bash-Script nennen wir “RefreshFirefox.sh” und es muss natürlich ausführbar gemacht werden. Das Script wird später in die config Datei von emacs integriert.

#!/bin/bash
SHOULD_SWITCH_BACK=$1 
CURRENT_WINDOW=$(xdotool getactivewindow)  
KEY="CTRL+F5"  
BROWSER="Firefox"  
  
xdotool search --desktop 0 ${BROWSER} windowactivate  
xdotool key ${KEY}  
if [[ $SHOULD_SWITCH_BACK == 'y' || $SHOULD_SWITCH_BACK == 'Y' ]]; then  
    xdotool windowfocus --sync ${CURRENT_WINDOW}  
    xdotool windowactivate --sync ${CURRENT_WINDOW}  
fi  

wmctrl -a emacs

Einige Erläuterungen zu dem bash-Script: Die Pakete “xdotool” und “wmctrl” , die benötigt werden, um unter Linux Fenster steuern zu können, müssen mit apg-get install zunächst installiert werden. Die sollten in jeder Ubuntu Distribution in den normalen Paketquellen verfügbar sein. Die If … fi Bedingung macht eigentlich dasselbe, was die letzte Zeile macht, nur klappt das nicht immer zuverlässig. Ich möchte aus emacs heraus Firefox automatisch aktualisieren, aber emacs soll den Fokus behalten, da ich ja in dem Editor bleiben möchte. Die if … fi Bedingung soll sich das Fenster merken, welches vor dem Browser aktiv war und dieses nach dem Senden von STRG + F5 (= Aktualisierung des Browsers) wieder fokussieren. Dasselbe macht wmctrl mit dem Unterschied, dass ich hier konkret die Anwendungen (“emacs”) angebe.

Dieses Script kann also nun von emacs aus aktiviert werden. Dazu definieren wir eine LISP Funktion, in der emacs Config, die sogar noch ein wenig mehr kann, als den Browser zu refreshen.

(defun org-html-auto-refresh ()
  "Saves current buffer, exports and refreshes Firefox Browser"
  (interactive)
  (save-buffer)
  (org-html-export-to-html)
  (shell-command "~/Nextcloud/Programmierung/Bash/RefreshFirefox.sh")
)

Die Funktion nenne ich “org-html-auto-refresh” und ich nutze sie im Zusammenhang mit dem Export eines Files aus dem ORG-Mode nach HTML. Man kann den Namen natürlich abändern und die Funktion auch nur “html-auto-refresh” nennen und die Zeile mit “org-html-export-to-html” weglassen, wenn man eine normale HTML, PHP oder Javascript Aktualisierung vornehmen möchte. Das zuvor erstellte Script habe ich in meinem Nextcloud Ordner gespeichert. Den Teil müssen sie entsprechend anpassen. Die Funktion speichert den Buffer in emacs mit (save-buffer) auch direkt.

Diese Funktion fügen sie in ihre config Datei von emacs ein. Und auch noch nach folgende Zeile. Diese bewirkt, dass diese Funktion an ein Tastaturkürzel gebunden wird und somit sofort ausgeführt werden kann:

(global-set-key (kbd "M-<kp-9>") 'org-html-auto-refresh)

Das bedeutet, das Script wird beim Druck von ALT + 9 (auf dem NumPad) ausgeführt. Das ist ein seltsames Kürzel, was daran liegt, dass ich schon etliche Funktionen auf andere Tastaturkürzel gelegt habe. Denkbar wäre auch so etwas wie

(global-set-key [f6] 'org-html-auto-refresh)

womit die Funktion dann an F6 gebunden wäre.

Wenn man nun einen breiten Bildschirm hat (oder zwei nebeneinander), dann kann man in dem den emacs nutzen und in dem anderen den Browser. Dort lädt man die Datei, die man gerade bearbeitet. Mit dem Tastaturkürzel in emacs wird der Browser dann refreshed und man sieht sofort alle Änderungen. Das ist eine echte Bereicherung im Alltag des Programmierers.