Live save & edit – CSS in Chrome für ASP.NET Projekte


Wer träumt als Webentwickler nicht auch davon, das CSS was er gerade im Browser angepasst hat direkt speichern zu können, ohne es erst wieder in der Webseite einzufügen und dann im Browser erst wieder F5 zu drücken um das ganz zu aktualisieren.

Ich habe mir gestern ein JQuery Tutorial angeschaut und da hat der Sprecher so nebenbei erwähnt das er in Chrome ein Addon hat mit dem er das CSS direkt bearbeiten und speichern kann. Cool dachte ich mir und habe auch erst einmal geschaut ob es so etwas auch für den Firefox gibt. Hier habe ich nur die Extension FireFile gefunden, mit der man wohl CSS Dateien für PHP Projekte direkt bearbeiten kann. Was für mich als .NET Entwickler leider nicht so viel bringt.

Daher habe ich mir dann Google Chrome heruntergeladen und installiert. Nach ein paar Stunden habe ich es dann auch hinbekommen und es werden jetzt die CSS Anpassungen die ich in Chrome mit den Developer Tools mache auch direkt in der CSS Datei in meinem ASP.NET MVC Projekt gespeichert.

Das ganze besteht dann aus einem Plugin für den Chrome Browser und einem “Server” über Node.js, der die Änderungen in der passenden CSS Datei speichert.

Die folgenden Komponenten werden benötigt:

Um das Plugin installieren zu können müsst Ihr erst die experimentellen APIs im Browser aktivieren, in dem Ihr

chrome://flags/

aufruft und hier die “Experimentelle Erweiterungs-APIs” Aktiviert und dann den Browser neu startet. Danach könnt Ihr dann Chrome DevTools Autosave installieren.

Nachdem Ihr die DevTools Installiert habt, muss noch der “Server” installiert werden (Link). Dafür müsst Ihr Node.js installieren und danach dann ein cmd aufmachen (muss als Administrator ausgeführt werden) und

npm install –g autosave

eingeben um den Server zu installieren. (Wenn das nicht direkt funktioniert, den Rechner vor bzw. nach der Installation neu zu starten soll helfen)

Wenn Ihr jetzt in dem gleichen Command Prompt “autosave” eingebt, dann sollte dort z.B. folgendes angezeigt werden (wichtig ist das der Command Prompt als Administrator ausgeführt wird):

“DevTools Autosave 0.3.2 is running on http://127.0.0.1:9104

Mit diesen Einstellungen könnt Ihr jetzt zumindest einfache HTML – CSS Kombinationen direkt im Browser anpassen und das Speichern wird automatisch mit jeder Änderungen am CSS vorgenommen (Tutorial – Video). Das ganze geht nur wenn Ihr das HTML File direkt über den Browser öffnet und nicht über einen Webserver.

Damit kommen wir jetzt zu den Anpassungen, damit das ganze dann auch in einem ASP.NET Projekt benutzt werden kann.

Als erstes müssen wir im Browser in den Optionen für “DevTools autosave”

image

die folgenden Einstellungen vornehmen und den Standard Eintrag so anpassen, das aus dem “^file://” das “^http://localhost:port” wird unter “Resource”. Der “Post to” Eintrag kann so bleiben. Bitte unbedingt aufpassen, das Ihr den Eintrag nicht “Disabled”, das passiert wenn man seine Eingabe mit ENTER bestätigt, dann bitte einfach wieder auf “Enable” klicken.

image

Bei mir gab es hier außerdem Probleme als ich den Eintrag einmal gelöscht habe, war es mir nicht möglich wieder einen neuen anzulegen, hier einfach das Plugin noch einmal deinstallieren und wieder installieren.

Dann muss noch eine Custom “routes.js” erstellt werden, damit der Server weiß wo euer ASP.NET Projekt liegt.

exports.routes = [
    {
        from: /^http:\/\/localhost:52328\//,
        to: 'C:\/Users\/squadwuschel\/Documents\/Visual Studio 2010\/Projects\/MvcJQueryTest/'
    }
];

Ihr müsst nur das Hauptverzeichnis für eure Webseite angeben, die Pfade wo die CSS oder JavaScript Dateien liegen, findet der Server selbst heraus, anhand der Links in der Webseite und den dazu passenden relativen Pfaden.

Wenn Ihr euer Projekt auf Port 80 ausführt, dann könnt Ihr einfach die Portangaben weglassen, nur wenn ich mein ASP.NET Projekt direkt ausführe im VS dann ist das meist nicht über Port 80.

Jetzt muss der “Server” für “autosave” noch neu gestartet werden mit dem passenden Parameter. Bei mir habe ich die “routes.js” einfach unter “C:\Temp\routes.js” abgelegt. Im Command Prompt der als Administrator ausgeführt wird, bitte folgenden Befehl eingeben:

autosave –f c:\Temp\routes.js

Jetzt sollte wieder die folgende Zeile angezeigt werden.

“DevTools Autosave 0.3.2 is running on http://127.0.0.1:9104

Wenn Ihr jetzt im Browser etwas an eurem Projekt im CSS Code ändert, kann das z.B. so aussehen:

image

(Es handelt sich hier nicht um das Projekt welches ich oben in der “routes.js” angegeben habe!)

Ich hoffe ich habe an alle Einstellungen gedacht die wichtig sind, viel spaß beim ausprobieren!

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s