Share
Kürzlich haben wir uns auf Webdesigntuts + mit dem Thema Schnellerer HTML / CSS-Workflow mit den Chrome Developer Tools befasst. Im heutigen Quick Tip erhalten Sie ein kostenloses Plugin, das in diesem Tutorial erwähnt wird. Ich verspreche diesen Willen ernst Beschleunigen Sie Ihren Workflow - los geht's?
Heute werden wir das komplette Setup von DevTools Autosave durchgehen, aber bevor wir anfangen können, wollen wir uns ansehen, was genau diese nette Google Chrome-Erweiterung macht.
Es ist alles gut und gut, einen Header in den Chrome Developer Tools um ein paar Pixel zu verschieben, zu Ihrem Texteditor zurückzukehren, das CSS zu aktualisieren, die Datei zu speichern und für eine schnelle Aktualisierung zum Browser zurückzukehren, um sicherzustellen, dass alles gut aussieht. Wenn Sie jedoch wie ich sind, werden Sie oft mehrere Deklarationen für mehrere Selektoren in den Entwicklertools bearbeiten, nur um zu Ihrem Stylesheet zurückzukehren, wobei Sie nicht mehr genau wissen, welche Regeln geändert werden müssen.
Wie der Name vermuten lässt, aktualisiert DevTools Autosave das Stylesheet automatisch mit allen Änderungen, die Sie in den Chrome Developer Tools im laufenden Betrieb vornehmen. Wenn Sie jedoch die Developer Tools stark verwenden, kann dies die Site-Entwicklung erheblich beschleunigen. Natürlich können Sie auch zu Ihrem Texteditor zurückkehren und Ihr Stylesheet wie gewohnt aktualisieren. Dies macht es zu einer leistungsstarken und flexiblen Ergänzung Ihres Workflows.
Übrigens, diese Erweiterung ist nicht nur für CSS und HTML gedacht ... DevTools Autosave hat auch JavaScript!
Bevor wir loslegen, werfen wir einen kurzen Blick darauf, wie sich DevTools Autosave von anderen Chrome-Erweiterungen unterscheidet, die Sie zuvor verwendet haben.
Normalerweise ist das Installieren einer Chrome-Erweiterung so einfach, dass Sie zum Chrome Web Store gehen und auf die Schaltfläche "Zu Chrome hinzufügen" klicken. DevTools Autosave unterscheidet sich ein wenig darin, dass die Erweiterung auf einem lokal installierten Server (in diesem Fall Node.js) beruht, um die in Chrome vorgenommenen Änderungen an Ihre lokalen CSS-, HTML- und JS-Dateien zu übermitteln.
Um all dies zu erreichen, müssen wir die Eingabeaufforderung (oder das Terminalfenster) verwenden. Wenn Sie die Eingabeaufforderung noch nie verwendet haben, ist dies nichts, wovor Sie Angst haben müssen. Sie ist einfach zu bedienen und ich werde Sie durch jeden Schritt führen.
Beginnen Sie mit dem Chrome Web Store und installieren Sie die Erweiterung.
Nachdem Sie die Erweiterung für Chrome ausgewählt haben, werden Sie aufgefordert, die Aktion zu bestätigen. Nach der Installation wird oben rechts in Ihrem Browserfenster eine Benachrichtigung angezeigt, die Sie darüber informiert, dass die Erweiterung gesperrt ist und geladen wird und nach Bedarf im Hintergrund ausgeführt wird.
Der nächste Schritt ist, zu Node.js überzugehen, um die neueste Version herunterzuladen und zu installieren (zum Zeitpunkt des Schreibens v0.8.16)..
Auspacken und an Ihrem bevorzugten Ort installieren.
Hinweis: Node.js selbst ist eine unglaublich leistungsfähige Entwicklungsumgebung, deren Verwendung den Rahmen dieses Schnelltipps sprengt. Wenn Sie mehr über Node.js erfahren möchten, schauen Sie sich Netto.js für Anfänger bei Nettuts an+.
Da wir nun über die gesamte Infrastruktur verfügen, die zum Ausführen von DevTools Autosave erforderlich ist, müssen Sie als Nächstes Node.js über die Eingabeaufforderung ausführen.
Wenn Sie Windows wie ich verwenden, klicken Sie auf die Schaltfläche Start, geben Sie "Eingabeaufforderung" in das Suchfeld ein und wählen Sie "Node.js-Eingabeaufforderung"..
Alternativ, wenn Sie einen Mac verwenden, navigieren Sie zu Ihrem Anwendungsordner → Dienstprogramme → Terminal.app
Führen Sie an der Eingabeaufforderung den folgenden Befehl aus: npm install -g autosave
Sie sehen jetzt, wie das Terminal für einige Momente plappert:
Hinweis: Wenn Ihr Benutzerkonto keine Administratorberechtigungen hat, müssen Sie möglicherweise das hinzufügen Sudo Befehl, um Dinge zu installieren: sudo npm install -g autosave
Nach Abschluss können Sie DevTools Autosave ausführen.
Der letzte Schritt besteht darin, die Erweiterung selbst auszuführen. Führen Sie den folgenden Befehl an der Eingabeaufforderung aus: autosave
Sie erhalten nun eine Bestätigung, dass DevTools Autosave lokal ausgeführt wird, wie folgt:
Mit diesen wenigen Schritten sind Sie fertig und bereit zu gehen.
Das Schöne an DevTools Autosave (und warum ich es lieber für ähnliche Apps finde) ist, dass es, sobald es über den node.js-Server läuft, alles andere einfach ist funktioniert. Es ist nicht erforderlich, die Erweiterung auf lokale Verzeichnisse zu verweisen (es sei denn, Sie laufen über einen lokalen Server wie WAMP oder MAMP), und es gibt nichts, was Sie für "einschalten" können. Starten Sie einfach Ihren gewünschten Texteditor, laden Sie eine .css- oder .js-Datei hoch und passen Sie die in Chrome Developer Tools vorhandenen Inhalte mit allen gespeicherten Änderungen an.
DevTools Autosave ist zu einer unverzichtbaren Erweiterung meines Lieblingsbrowsers geworden, und ich bin mir sicher, dass Sie damit einverstanden sein werden!
Verwenden Sie DevTools Autosave? Bevorzugen Sie etwas anderes? Wenn ja, hinterlassen Sie einen Kommentar.
Accentsconagua