Wie speichere ich CSS-Änderungen im Stilbedienfeld der Chrome Developer Tools?

Wie speichere ich CSS-Änderungen im Stilfenster der Google Chrome Developer Tools ?

Auf der Tool-Website wird erwähnt, dass wir alle Änderungen im Ressourcenbereich sehen können

Ich arbeite jedoch lokal an einer CSS-Datei, aber Änderungen werden für mich im Ressourcenfenster nicht angezeigt

Übrigens Kennen Sie Add-Ons und Tools zum Speichern von CSS-Änderungen von Chrome Developer-Tools? Ich weiß, dass es für Firebug viele https://stackoverflow.com/search?q=firebug+CSS+changes+save gibt

Sie können Ihre CSS-Änderungen in Chrome Dev Tools selbst speichern. In Chrome können Sie jetzt lokale Ordner zu Ihrem Arbeitsbereich hinzufügen. Nachdem Sie Chrome den Zugriff auf den Ordner gewährt und den Ordner zum lokalen Arbeitsbereich hinzugefügt haben, können Sie eine Webressource einer lokalen Ressource zuordnen.

• Navigieren Sie zum Bereich "Quellen" der Entwicklertools, klicken Sie mit der rechten Maustaste in den linken Bereich (in dem die Dateien aufgelistet sind) und wählen Sie "Ordner zum Arbeitsbereich hinzufügen" . Sie können schnell zu einem Stylesheet im Quellenbedienfeld gelangen, indem Sie auf das Stylesheet oben rechts in jeder CSS-Regel für ein ausgewähltes Element im Elementbedienfeld klicken.

• Nach dem Hinzufügen des Ordners müssen Sie Chrome Zugriff auf den Ordner gewähren.

• Als Nächstes müssen Sie die Netzwerkressource der lokalen Ressource zuordnen.

• Nach dem erneuten Laden der Seite lädt Chrome nun die lokalen Ressourcen für die zugeordneten Dateien. Zur Vereinfachung zeigt Chrome Ihnen nur die lokalen Ressourcen an (damit Sie nicht verwirrt sind, ob Sie die lokale oder die Netzwerkressource bearbeiten). Um Ihre Änderungen zu speichern, drücken Sie CTRL + Sbeim Bearbeiten der Datei.

ps

Möglicherweise müssen Sie die zugeordneten Dateien öffnen und mit der Bearbeitung beginnen, damit Chrome die lokale Version anwendet (Datum 201604.12).

DevTools Tech Writer und Entwickler befürworten hier.

Ab Chrome 65 ist Local Overrides eine neue, einfache Möglichkeit, dies zu tun. Dies ist eine andere Funktion als Arbeitsbereiche.

Overrides einrichten

1. Gehen Sie zum Quellenbedienfeld .
2. Gehen Sie zur Registerkarte Überschreibungen .
3. Klicken Sie auf Ordner zum Überschreiben auswählen .
4. Wählen Sie das Verzeichnis aus, in dem Sie Ihre Änderungen speichern möchten.
5. Klicken Sie oben in Ihrem Ansichtsfenster auf Zulassen, um DevTools Lese- und Schreibzugriff auf das Verzeichnis zu gewähren.
6. Nehmen Sie Ihre Änderungen vor. Im folgenden GIF können Sie sehen, dass die background:rosybrownÄnderung über das Laden von Seiten hinweg bestehen bleibt.

Wie Überschreibungen funktionieren

Wenn Sie eine Änderung in DevTools vornehmen, speichert DevTools die Änderung in einer geänderten Kopie der Datei auf Ihrem Computer. Wenn Sie die Seite neu laden, stellt DevTools die geänderte Datei und nicht die Netzwerkressource bereit.

Der Unterschied zwischen Überschreibungen und Arbeitsbereichen

Mit Workspaces können Sie DevTools als IDE verwenden. Es ordnet Ihren Repository-Code mithilfe von Quellkarten dem Netzwerkcode zu. Der eigentliche Vorteil besteht darin, dass die Änderungen, die Sie in DevTools vornehmen, (normalerweise) wieder in Ihren ursprünglichen Quellcode abgebildet werden, wenn Sie Ihren Code minimieren oder Code verwenden, der transpiliert werden muss, wie z. B. SCSS. Mit Überschreibungen können Sie hingegen alle Dateien im Web ändern und speichern. Dies ist eine gute Lösung, wenn Sie nur schnell mit Änderungen experimentieren und diese Änderungen über das Laden von Seiten hinweg speichern möchten.

Neue Versionen von Chrome verfügen über eine Funktion namens Arbeitsbereiche, mit der dieses Problem behoben wird. Sie können definieren, welche Pfade auf Ihrem Webserver welchen Pfaden auf Ihrem System entsprechen, und diese dann mit nur Strg-S bearbeiten und speichern.

Siehe: http://www.html5rocks.com/de/tutorials/developertools/revolutions2013/

Ich weiß, dass es ein alter Beitrag ist, aber ich speichere ihn folgendermaßen:

1. Gehen Sie zum Bereich Quellen.
2. Klicken Sie auf Navigator anzeigen (um den Navigatorbereich links anzuzeigen).
3. Klicken Sie auf die gewünschte CSS-Datei. (Es wird im Editor mit allen von Ihnen vorgenommenen Änderungen geöffnet.)
4. Klicken Sie mit der rechten Maustaste auf Editor und speichern Sie Ihre Änderungen.

Sie können auch lokale Änderungen anzeigen , um Ihre Revisionen anzuzeigen, eine sehr interessante Funktion. Arbeiten Sie auch mit Skripten.

Sie suchen im falschen Bereich von "Ressourcen".

Es ist nicht unter "Lokaler Speicher", sondern unter "Frames":

Der obige Screenshot zeigt einen Unterschied zwischen den ursprünglichen Stilen und den neuen Änderungen, die in den devtools vorgenommen wurden. Sie können mit der rechten Maustaste auf das Element im linken Bereich klicken und es wieder auf der Festplatte speichern.

Die Tincr Chrome-Erweiterung ist einfacher zu installieren (kein Knotenserver muss ausgeführt werden) UND wird auch mit LiveReload-ähnlichen Funktionen geliefert! Sprechen Sie über bidirektionale Bearbeitung! :) :)

Tin.cr Website

Chrome Web Store Link

Andys Blog-Artikel

Nachdem Chrome 18 letzte Woche mit den erforderlichen APIs veröffentlicht wurde, habe ich meine Chrome-Erweiterung im Chrome-Webshop veröffentlicht. Die Erweiterung speichert Änderungen in CSS oder JS in Entwicklertools automatisch auf der lokalen Festplatte. Schau es dir an.

Zu Ihrer Information: Wenn Sie Inline-Stile verwenden oder das DOM direkt ändern (z. B. ein Element hinzufügen), lösen Arbeitsbereiche dieses Problem nicht. Dies liegt daran, dass das DOM im Speicher lebt und dem aktiven Status des DOM keine tatsächliche Datei zugeordnet ist.

Dafür mache ich gerne einen "Vorher" - und "Nachher" -Schnappschuss des Doms von der Konsole: copy(document.getElementsByTagName('html')[0].outerHTML)

Dann platziere ich es in einem Diff-Tool, um meine Änderungen zu sehen.

Vollständiger Artikel: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

Um den letzten Teil Ihrer Frage zu Erweiterungen zu beantworten, mit denen Änderungen gespeichert werden können, gibt es eine gespeichert werden Hotfix

Sie können Änderungen von Chrome Dev Tools direkt in GitHub speichern. Von dort aus können Sie einen Post-Receive-Hook auf GitHub einrichten, um Ihre Website automatisch zu aktualisieren.

Solange Sie das CSS nicht eingefügt haben element.style:

1. Gehen Sie zu einem Stil, den Sie hinzugefügt haben. Es sollte einen Link mit der Aufschrift Inspector-Stylesheet geben:

2. Klicken Sie darauf, um das gesamte CSS zu öffnen, das Sie im Quellenfenster hinzugefügt haben

3. Kopieren Sie es und fügen Sie es ein - yay!

Wenn Sie haben mit gewesen element.style:

Sie können einfach mit der rechten Maustaste auf Ihr HTML-Element klicken, auf Als HTML bearbeiten klicken und dann den HTML-Code mit den Inline-Stilen kopieren und einfügen.

UPDATE 2019: Da andere Antworten etwas veraltet sind, werde ich hier eine aktualisierte hinzufügen. In der neuesten Version muss der Chrome-Ordner nicht dem Dateisystem zugeordnet werden.

Angenommen, ich habe einen Webordner mit HTML-, CSS- und JS-Dateien auf dem Desktop, den ich aktualisieren möchte, wenn ich Änderungen in Chrome vornehme: =

1) Sie benötigen einen laufenden lokalen Server wie Node usw., alternativ erstellt diese vscode-Erweiterung den Server für Sie: Live-Server-VSCode-Erweiterung , installieren Sie ihn, führen Sie den Server aus.

2) Laden Sie die HTML-Seite in Chrome vom lokalen Server.

3) Öffnen Sie devTools-> Quellen-> Dateisystem-> Ordner zum Arbeitsbereich hinzufügen

4) Fügen Sie den Ordner hinzu, der zum Ausführen des lokalen Servers verwendet wird. In neuestem Chrom ist keine zusätzliche Zuordnung erforderlich! Ta-da!

Mehr dazu Informationen Bearbeiten Sie Dateien mit Arbeitsbereichen

Beachten Sie, dass die auf der Registerkarte "Stile" vorgenommenen Änderungen NICHT die Dateisystemdateien betreffen. Stattdessen müssen Sie zu devtools-> source-> your_folder gehen und dort Ihre Änderungen vornehmen und die Seite neu laden, um den Effekt zu sehen.