Ich hatte dieses Problem auch für immer und entschied schließlich, dass wir die Dinge nicht im Webinspektor bearbeiten sollten, und baute etwas dafür ( https://github.com/viatropos/design.io) ).
Eine bessere Lösung:
Der Browser zeigt automatisch CSS-Änderungen an, ohne sie neu zu laden, wenn Sie in Ihrem Texteditor auf Speichern klicken .
Der Hauptgrund, warum wir CSS im Webinspektor bearbeiten (ich verwende Webkit, aber FireBug ist in die gleiche Richtung), ist, dass wir kleine Anpassungen vornehmen müssen und das Neuladen der Seite zu lange dauert.
Bei diesem Ansatz gibt es zwei Hauptprobleme. Zunächst können Sie ein einzelnes Element bearbeiten, das möglicherweise keinen idSelektor hat. Selbst wenn Sie das generierte CSS aus dem Webinspektor kopieren / einfügen könnten, müsste es ein CSS generieren, um das CSS idzu erweitern. Etwas wie:
#element-127 {
background: red;
}
Das würde Ihr CSS zu einem Chaos machen.
Sie können dies .spaceumgehen , indem Sie nur die Stile für einen vorhandenen Selektor ändern (den Klassen-Selektor im Webkit-Inspektor-Bild unten).
Trotzdem das zweite Problem. Die Oberfläche zu diesem Ding ist ziemlich rau, es ist schwierig, große Änderungen vorzunehmen - zum Beispiel, wenn Sie versuchen möchten, diesen CSS-Block ganz schnell an diesen Ort zu kopieren, oder was auch immer.
Ich bleibe lieber bei TextMate.
Ideal wäre es, das CSS einfach in Ihren Texteditor zu schreiben und den Browser die Änderungen widerspiegeln zu lassen, ohne die Seite neu zu laden . Auf diese Weise würden Sie Ihr endgültiges CSS schreiben, während Sie die kleinen Änderungen vornehmen.
Die nächste Stufe wäre, in einer dynamischen CSS-Sprache wie Stylus, Less, SCSS usw. zu schreiben und den Browser mit dem generierten CSS aktualisieren zu lassen. Auf diese Weise können Sie Mixins wie erstellenbox-shadow() , die die Komplexität abstrahieren, was der Webinspektor definitiv nicht konnte.
Es gibt ein paar Dinge, die das tun, aber meiner Meinung nach nichts, was es wirklich rationalisiert.
Der Hauptgrund, warum ich sie nicht verwendet habe, ist, dass ich die Art und Weise, wie diese funktionieren, nicht einfach anpassen kann.
Ich habe https://github.com/viatropos/design.io speziell zusammengestellt, um dieses Problem zu lösen, und mache es so:
- Der Browser zeigt die CSS / js / html / etc bei jedem Speichern an, ohne die Seite neu zu laden
- Es kann mit jeder Vorlage / Sprache / jedem Framework umgehen (Stylus, Less, CoffeeScript, Jade, Haml usw.)
- Es ist in JavaScript geschrieben und Sie können Erweiterungen in JavaScript sehr schnell zusammenstellen.
Auf diese Weise können Sie, wenn Sie diese kleinen Änderungen an CSS vornehmen müssen, die Hintergrundfarbe festlegen, auf Speichern klicken, Nein sehen, nicht ganz, den Farbton um 10 anpassen, Speichern, Nein, Anpassen um 5, Speichern, sieht gut aus.
Die Funktionsweise besteht darin, zu beobachten, wann immer Sie eine Datei speichern (auf Betriebssystemebene), die Datei zu verarbeiten (hier funktionieren die Erweiterungen) und die Daten über Websockets, die dann verarbeitet werden (auf der Clientseite von), an den Browser zu senden die Erweiterung).
Nicht zu stecken oder so, aber ich hatte lange Zeit mit diesem Problem zu kämpfen.
Hoffentlich hilft das.
