Browsererweiterungen, um die Seite mit einer aktualisierten Version meiner CSS-Datei neu zu rendern, ohne die Seite selbst neu laden zu müssen.

Question

Ich möchte Web-UI-Design lernen. (Ich weiß, ich weiß. Ein Programmierer zu sein bringt mich in einen Nachteil. Aber ich möchte es trotzdem versuchen.) Daher würde ich gerne meine CSS-Dateien "debuggen".

Eines der größten Ärgernisse, die ich gefunden habe ist, dass ich eine Änderung in meinen CSS-Dateien nicht testen kann, ohne die ganze Seite neu zu laden. Manchmal ist die Seite zu groß. Manchmal wurden viele Elemente nach vielen Klicks auf die Seite gebracht, da sich meine Seiten zu sehr auf AJAX verlassen. Manchmal hasse ich es, Command + R die ganze Zeit zu treffen.

Gibt es eine Erweiterung für einen der wichtigsten Browser (vorzugsweise Safari und/oder Chrome), die die Seite mit einer aktualisierten Version der CSS-Datei neu gerendert, ohne die gesamte Seite neu zu laden?

Answer 1

Probieren Sie die Entwickler-Tools in Chrom, mit denen Sie live Ihre CSS-Definitionen bearbeiten können. Obwohl ich keine Erweiterung kenne, mit der Sie nur ein Stylesheet neu laden können, könnte dies für Sie funktionieren, wenn Sie nur ein paar Änderungen testen möchten. Firebug für Firefox ermöglicht das gleiche.

Answer 2

Das Firefox "Web Developer" -Plugin ermöglicht es Ihnen, "User Style Sheet ..." aus dem Menü hinzuzufügen. Es hat auch eine "CSS bearbeiten" -Funktion, mit der Sie den Inhalt der CSS-Dateien live bearbeiten können (zum Beispiel file1.css und file2.css würden zwei Editor-Registerkarten haben - eins für jede Datei) und Sie können die bearbeitete Datei speichern.

Ich neige dazu, Firebug öfter selbst zu verwenden, wie Paul es vorschlägt, und Sie können den geänderten css-Dateiinhalt kopieren und in die eigentliche css-Datei einfügen.

Answer 3

Stylebot Erweiterung für Chrome ist auch super.

Sie können Ihre Änderungen schnell bearbeiten und anzeigen. Und kann dies tatsächlich speichern, um Websites, die Sie in einer Liste mit bearbeiteter Anzeige speichern können, von dem zu betrachten, was Sie für das Standard-Stylesheet der Website ändern.

Mit Styebot können Sie das Erscheinungsbild jeder Website (mit benutzerdefiniertem CSS) schnell ändern. Mit StyleBot können Sie das Aussehen Ihrer Lieblingswebsites personalisieren. Es ist auch ein großartiges Werkzeug, um CSS zu lernen und das Design Ihrer eigenen Website zu debuggen.