Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Webdesign » Clevere Extension erweitert Chrome-Dev-Tools um Speichermöglichkeit

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

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Sven Schannak
  • 20. April 2012

Inhaltsverzeichnis

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.

Chrome DevTools autosave

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.

DevTools autosave Server Installation

„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'

}];

Die Developer-Toolbar

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)

Sven Schannak

Sven Schannak

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

SEO-Sicht Agentur Berlin Logo.

SEO-Sicht

Berlin

Logo von der Warscher Digitalagentur aus Zürich, Horgen und Basel.

Warscher – Digital Experts

Horgen

Logo der Frankfurter Webdesign Agentur Nextblick.

NEXTBLICK Internetagentur Frankfurt

Frankfurt am Main

Arit Services Logo.

ARIT Services GmbH

Laatzen

Klickbeben Webdesign Agentur Innsbruck Logo.

Webagentur klickbeben

Innsbruck

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

0 Antworten zu „Clevere Extension erweitert Chrome-Dev-Tools um Speichermöglichkeit“
— was ist Deine Meinung?

  1. Kai sagt:
    21. April 2012 um 14:54 Uhr

    hallo sven,
    vielen dank für die gute erklärung. dieser konnte ich schon besser folgen als denen auf dem github. leider klappt es trotzdem nicht. alles läuft wie gewollt bis die zu bearbeitende datei über die .js datei spezifiziert werden soll. dann tritt immer u.g. fehler auf, welcher laut diskussion auf github wohl öfters vorkommt?!
    Hast du vielleicht noch einen Tip ins Blaue für diesen letzten Schritt?

    node.js:201
    throw e; // process.nextTick error, or ‚error‘ event on first tick
    ^
    SyntaxError: Unexpected identifier
    at Module._compile (module.js:429:25)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:31)
    at Function._load (module.js:308:12)
    at Module.require (module.js:354:17)
    at require (module.js:370:17)
    at Object. (/usr/local/lib/node_modules/autosave/bin/autosave:15:14)
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:31)

    Antworten
    1. Sven Schannak sagt:
      22. April 2012 um 10:58 Uhr

      @Kai:

      Ich würde dir gerne weiterhelfen, vielleicht magst du mir deine .js-Datei mal per Mail an sven@schannak.com senden oder hier posten ?

      Viele Grüße,
      Svem

      Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑