Clevere Extension erweitert Chrome-Dev-Tools um Speichermöglichkeit

Für viele Webentwickler sind die Developer-Tools des Google Chrome/Chromium zu einem wichtigen Werkzeug geworden. Nur gibt es bis jetzt noch nicht die Möglichkeit, Änderungen direkt in den veränderten Dateien zu speichern. Für Dateien, die sich auf demselben Gerät befinden wie der Browser, ist dies jetzt dank des russischen Entwicklers Nikita Vasilyev und seiner Anwendung „Chrome Dev Tools Autosave“ möglich. Diese Erweiterung ist für mich mittlerweile geradezu unverzichtbar geworden, weil sie meine Arbeit erheblich erleichtert.

Die Hintergrundfunktionalität der Anwendung basiert auf Node.js und ist, einmal installiert, völlig simpel. Alles was man tun muss, wenn die Anwendung läuft, ist einfach nur im Google Chrome seine CSS- bzw. JavaScript-Dateien zu bearbeiten. Der Server, der im Hintergrund läuft, speichert die veränderten Dateien ab. Das ist vergleichbar mit „CSS-X-Fire“ für den Firefox. Wie man das Ganze auch auf seinen eigenen Geräten installiert, möchte ich im Folgenden anhand meiner OSX-Konfiguration verdeutlichen.

Die Installation: Node.js, npm und Autosave

Zunächst gilt es Node.js zu installieren. Hierzu lädt man entweder die aktuelle Version aus dem git-Repository und installiert Node.js manuell auf seinem Gerät, wobei man nicht vergessen darf, auch den Paketmanager „npm“ zu installieren. Die einfachere und unkompliziertere Variante ist aber, den Installer von der Node.js-Projektseite zu laden. Dieser installiert neben dem Framework auch den nötigen Paketmanager.

Im folgenden Schritt öffnet man zuerst in Chrome „chrome://flags/“ und aktiviert „Experimentelle Erweiterungs-APIs“. Danach muss Chrome neu gestartet werden.

Nachfolgend installiert man die Anwendung Chrome-DevTools-autosave, die nicht über den Chrome Web Store, sondern via Userscripts.ru bezogen werden muss.

Jetzt ist es erforderlich, den Dienst für den Autosave-Server zu installieren. Dazu nutzen wir einfach den „npm“-Paketmanager. In der Shell gibt man dazu folgendes ein:

npm install -g autosave

Falls man einen Fehler erhält, der folgende Zeile ausgibt

It fails with "Error: EACCES, permission denied".

benötigt man Superuser-Rechte, um über den Paketmanager „autosave“ zu installieren. Die Lösung dafür ist folgende Zeile:

sudo npm install -g autosave

Nun sollte die Installation fehlerfrei zu beenden sein. Danach kann der Autosave-Server gestartet werden.

„Autosave“ verwenden

Um „Autosave“ verwenden zu können, startet man in der Shell den Server einfach mit dem Befehl:

autosave

Die Rückmeldung sollte wie folgt lauten:

DevTools Autosave is running on http://127.0.0.1:9104".

Beenden lässt sich der Dienst mit der Tastenkombination „ctrl+c“. Im Moment werden allerdings nur Files gespeichert, die man über „file://PFAD/ZUR/DATEI.html“ aufruft. Damit zum Beispiel auch Dateien bearbeitet werden können, die über localhost aufgerufen werden, erstellt man eine config-Datei. Der Entwickler selbst schlägt vor diese z.B. routes.js zu nennen und sie mit folgendem Inhalt zu versehen:

exports.routes = [{

from: /^http:\/\/PFAD_AUF_HOST\//,

to: '/PFAD/IM/DATEISYSTEM'

}];

Anschließend wechselt man in der Shell in das entsprechende Verzeichnis der soeben erstellten Datei und und startet die Konfiguration mit:

autosave --config routes.js

Nach einem Neustart des Servers sollte die Weiterleitung funktionieren. Jetzt können Dateien in den Developer-Tools von Chrome bearbeitet werden. Der Server speichert im Hintergrund die Änderungen ab. Schon nach kurzer Zeit wird diese Funktion unerlässlich, wenn man sich einmal daran gewöhnt hat. Und wenn man nicht jede kleine Änderung auch immer gleich speichern will, weil man etwa nur testen will, beendet man einfach den Server-Dienst.

Autosave ist nur eins von vielen innovativen Tools, die ich sehr gerne nutze. Dabei kenne ich natürlich längst nicht alle nützlichen Werkzeuge, die das Web bereit hält. Ich würde mich freuen, von ein paar weiteren Vorschlägen in den Kommentaren zu lesen.

(dpe)