it-swarm.com.de

So speichern Sie CSS-Änderungen im Bedienfeld „Styles“ der Chrome Developer Tools

So speichern Sie CSS-Änderungen von Styles panel von Google Chrome Developer Tools ?

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

enter image description here

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

enter image description here

enter image description here

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

177
Jitendra Vyas

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 Zugriff auf den Ordner gewährt und den Ordner dem lokalen Arbeitsbereich hinzugefügt haben, können Sie einer lokalen Ressource eine Webressource zuordnen.

  • Navigieren Sie zum Bereich Quellen der Entwicklertools, Klicken Sie mit der rechten Maustaste auf im linken Bereich (wo die Dateien aufgeführt sind) und wählen Sie Ordner zum Arbeitsbereich hinzufügen aus. Sie können schnell zu einem Stylesheet im Quellenbedienfeld gelangen, indem Sie für jedes ausgewählte Element im Bedienfeld „Elemente“ oben rechts neben jeder CSS-Regel auf das Stylesheet klicken.

enter image description here

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

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

enter image description here

  • Nach dem erneuten Laden der Seite lädt Chrome jetzt die lokalen Ressourcen für die zugeordneten Dateien. Der Einfachheit halber werden in Chrome nur die lokalen Ressourcen angezeigt (damit Sie nicht verwirrt werden, ob Sie die lokale Ressource oder die Netzwerkressource bearbeiten). Um Ihre Änderungen zu speichern, drücken Sie beim Bearbeiten der Datei CTRL + S.

p.s.

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

133
Philip Ramirez

Neue Versionen von Chrome verfügen über eine Funktion namens Arbeitsbereiche, die dieses Problem behebt. Sie können festlegen, welche Pfade auf Ihrem Webserver mit welchen Pfaden auf Ihrem System übereinstimmen. Anschließend können Sie mit ctrl-s bearbeiten und speichern.

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

20
rjmunro

DevTools-Verfasser und Entwickler befürworten hier.

In Chrome 65 beginnend, ist Local Overrides ein neuer, leichter Weg, dies zu tun. Dies ist eine andere Funktion als Arbeitsbereiche. 

Überschreibungen einrichten

  1. Gehen Sie zum Bereich Sources.
  2. Wechseln Sie zur Registerkarte Overrides.
  3. Klicken Sie auf Ordner für Überschreibungen 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 Allow, um DevTools Lese- und Schreibzugriff auf das Verzeichnis zu gewähren.
  6. Nehmen Sie Ihre Änderungen vor. In der folgenden GIF können Sie sehen, dass die background:rosybrown-Änderung auch beim Laden von Seiten bestehen bleibt.

 overrides demo

Wie funktionieren Überschreibungen?

Wenn Sie in DevTools eine Änderung 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 ist, wenn Sie Ihren Code minimieren oder Code verwenden, der übertragen werden muss, wie SCSS, dann werden die Änderungen, die Sie in DevTools (normalerweise) vornehmen, wieder in Ihren ursprünglichen Quellcode übernommen. Überschreibungen hingegen ermöglichen das Ändern und Speichern von Dateien im Web. Dies ist eine gute Lösung, wenn Sie nur schnell mit Änderungen experimentieren und diese Änderungen beim Laden von Seiten speichern möchten.

16
Kayce Basques

Ich weiß, dass es ein alter Beitrag ist, aber ich speichere es so:

  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 mit allen von Ihnen vorgenommenen Änderungen im Editor geöffnet.)
  4. Klicken Sie mit der rechten Maustaste auf den Editor und speichern Sie die Änderungen.

Sie können auch Local Modifications sehen, um Ihre Revisionen zu sehen, sehr interessante Funktion . Arbeiten Sie auch mit Skripts.

Sie suchen im falschen Bereich von "Ressourcen".

Es ist nicht unter "Local Storage", sondern unter "Frames":

Der obige Screenshot zeigt einen Unterschied der Originalstile gegen die neuen Änderungen in den Devtools. Sie können mit der rechten Maustaste auf das Element im linken Bereich klicken und es auf der Festplatte speichern.

11
thirtydot

Die Tincr Chrome-Erweiterung ist einfacher zu installieren (keine Notwendigkeit, den Knotenserver auszuführen) UND verfügt außerdem über eine LiveReload-ähnliche Funktionalität. Sprechen Sie über bidirektionale Bearbeitung! :)

Tin.cr Website

Chrome Web Store Link

Andys Blogartikel

10
Jose Browne

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 Developer-Tools automatisch auf der lokalen Festplatte. Geh und schau es dir an.

8
Tomi Mickelsson

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. Das liegt daran, dass sich das DOM im Speicher befindet und dem aktiven Status des DOM keine tatsächliche Datei zugeordnet ist.

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

Dann platziere ich es in einem Vergleichstool, um meine Änderungen zu sehen.

 Diff tool image

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

2
RoccoB

Um den letzten Teil Ihrer Frage zu Erweiterungen zu beantworten, die Änderungen speichern können, gibt es hotfix

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

2
FajitaNachos

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

  1. Gehen Sie zu einem von Ihnen hinzugefügten Stil. Es sollte einen Link geben, in dem das Inspektor-Stylesheet angezeigt wird:

 enter image description here

  1. Klicken Sie darauf und es öffnet sich alle CSS, die Sie im Quellenbedienfeld hinzugefügt haben

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

Wenn Sie habenelement.style verwendet:

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

0
Ethan