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

194

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Ü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

html  css  google-chrome  google-chrome-extension  google-chrome-devtools 
— Jitendra Vyas
quelle
Es gibt jetzt eine API für DevTools-Erweiterungen, mit der Benachrichtigungen über die zu ändernden Ressourcen empfangen werden können. Sie können also eine Erweiterung erstellen, die in die IDE Ihrer Wahl integriert wird, oder den Ressourceninhalt einfach auf einem WebDAV-Server veröffentlichen: developer.chrome.com/extensions/ …
— caseq
9
Ich glaube, diese Frage und ihre Antworten sind veraltet, da Chrome seitdem seine modifizierte CSS-Speicherfunktion in das Fenster "Quellen" verschoben hat . Die Funktionalität ist ziemlich verwirrend und etwas irreführend: Ich habe diese modifizierte CSS-speichernde Funktionalität von Chrome in diesem verwandten Beitrag zum Stapelüberlauf
— ChaseMoskal
— Mems
Lokale Überschreibungen sind ab Chrome 65 eine neue Methode. Überschreibungen sind eine andere Funktion als Arbeitsbereiche.
— Kayce Basques

Antworten:

137

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.

Geben Sie hier die Bildbeschreibung ein

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

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

Geben Sie hier die Bildbeschreibung ein

  • 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).

— Philip Ramirez
quelle
4
Ich möchte nur am Ende des Stylesheets meines Themas den CSS-Unterschied hinzufügen, den ich mir beim Live-Bearbeiten meines CSS ausgedacht habe. Das ist es. Gibt es eine Möglichkeit, ein "Diff" zu erstellen, das CSS ist, das ich kopieren und einfügen kann? Siehe diese andere Frage: stackoverflow.com/questions/21871535/… Die Hintergrundgeschichte ist, dass ich CSS bearbeite, das zu einem Thema gehört. Ich kann nur CSS am unteren Rand des Stylesheets hinzufügen und nichts darüber bearbeiten. Gleiches gilt, wenn jemand einer Website nur mit seinen CSS-Überschreibungen eine custom.css hinzufügen kann.
— Caroline Schnapp
paul-irish, Interessiert daran, wie das Diff / Patch nur lokale Änderungen CSS (ohne Remote-Änderungen) machen. SaveAs lösen das Problem der Flexibilität und Beschleunigung nicht wirklich ...
— Denis Denisov
Jetzt speichert Chrome lokale Dateien automatisch (ohne STRG + S zu drücken). Wie kann dies verhindert werden?
— Uzair Ali
Funktioniert bei mir nicht Nach dem Speichern der CSS-Datei im lokalen Ordner, dem Zuordnen von Remote zu Local und dem erneuten Laden sind alle Änderungen weg. :( Das Bearbeiten der lokalen Datei im Elementbedienfeld und das Speichern der Datei in Quellen bleiben auch bei meinen Änderungen nicht erhalten.
— Knusprig
2
Es scheint einen Fehler im Chrome 46-Inspektor zu geben, dass beim erneuten Laden der Seite die zugeordnete lokale Datei nur dann erneut angewendet wird, wenn Sie sie im Quellenbedienfeld ändern. Sie können es sogar in einem externen Editor ändern, müssen es jedoch im Quellenbedienfeld öffnen und fokussieren.
— knusprig
28

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.

überschreibt Demo

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.

— Kayce Basques
quelle
5
das funktioniert, ist aber immer noch viel zu kompliziert. Ich würde es vorziehen, wenn Sie dies nur für die aktuelle Sitzung aktivieren könnten. Meiner Meinung nach würde ein Kontrollkästchen wie "Ressourcenänderungen für die aktuelle Sitzung beibehalten" besser in einen Workflow für Webentwickler passen. Permanente Änderungen sind nichts, was ein Webentwickler in seinem täglichen Geschäft benötigt, und können sogar zusätzliche Kopfschmerzen verursachen, wenn Sie vergessen, diese Überschreibungen zu löschen und einige Wochen später wiederkommen. Überschreibungen sind für Endbenutzer in Ordnung - nicht zum Debuggen. Immer noch positiv bewertet.
Ich stimme dem anderen Kommentar zu. Es ist überhaupt nicht intuitiv und speichert nicht alle Änderungen, also nicht wirklich hilfreich. Es wäre besser für uns, nur eine kleine Chrome-Erweiterung zu schreiben, die auf Änderungen wartet und diese speichert. Das ist, wenn es eine API oder einen Prozess gibt, an den wir uns anschließen können ... habe sie noch nicht nachgeschlagen.
— Carles Alcolea
Entschuldigung, Sir. Ist liveSCSS nicht veraltet und nicht mehr entwickelt? siehe stackoverflow.com/a/57622797/10189759
— Luk Aron
@ Kayce Basques Was ist mit der Entwicklung von Chrom-Erweiterungen? Wenn Sie Stylesheets (und js) einfügen, funktionieren all diese Funktionen nicht, oder? Jede Lösung für diese Art der Entwicklung (um CSS / JS-Updates von Chrome Dev Tools auf lokale Quelldateien mit Erweiterung zu beschleunigen). Danke
— Andrew
19

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/

— rjmunro
quelle
Ich denke, OP möchte die Änderungen sehen, die er auf der Registerkarte "Stile" des Bedienfelds "Elemente" vorgenommen hat. Diese Änderungen sind nicht unbedingt an eine bestimmte Quelldatei gebunden.
— Ron Inbar
13

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).Geben Sie hier die Bildbeschreibung ein
  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.

— Guilherme de Jesus Santos
quelle
Ich konnte "Show Navigator"
— NickyLarson
@NickyLarson, ich habe meine Antwort so bearbeitet, dass sie enthält, wo sich diese Schaltfläche befindet.
— Guilherme de Jesus Santos
Lesen Sie die ursprüngliche Frage noch einmal. Er bearbeitet keine CSS-Datei. Er nimmt Änderungen auf der Registerkarte "Stile" des Bedienfelds "Elemente" vor.
— Ron Inbar
11

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.

— dreißig Punkte
quelle
Für mich auch nichts in Frames. Ich habe einen weiteren Screenshot in Frage hinzugefügt
— Jitendra Vyas
Ich bin nicht sicher, wie Ihre "Frames" leer sein können. Das klingt kaputt. Probieren Sie dies im Canary Build aus (Sie können es zusammen mit Ihrer aktuellen Version installieren): tools.google.com/dlpage/chromesxs
— dreißig Punkte
Canary kann sich nicht öffnen. Ich habe diese Lösung auch justin.my/2011/04/why-my-google-chrome-canary-cannot-run gefunden, aber sie funktioniert immer noch nicht. Ich habe diese Nachricht erhalten, als die Installation abgeschlossen war. K.min.us/iefbE2.jpg
— Jitendra Vyas
2
Ab diesem Wochenende (21.05.2012) funktioniert diese Lösung meines Erachtens nicht mehr. Ich habe das Gleiche getan, was Sie zeigen, um große Teile neuer CSS-Dateien zu schreiben (nicht alte oder Änderungen). Aber jetzt, zumindest für mich, zeigt das Klicken auf diese HTML-Datei nur den Roh-HTML-Code an, ohne die neuen CSS-Regeln anzuzeigen. Funktioniert es immer noch für Sie und wenn nicht, haben Sie eine neue Lösung, um dies zu erreichen?
— Nucleon
Dies funktioniert auch in Chrome 48 nicht für mich. Wie auch immer, um dies noch zu tun?
— DMTintner
8

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.

— Tomi Mickelsson
quelle
4

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.

Diff Werkzeugbild

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

— RoccoB
quelle
1

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.

— FajitaNachos
quelle
1

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:

Geben Sie hier die Bildbeschreibung ein

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

  2. 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.

— Ethan
quelle
1
Und wenn Sie dieses Inspector-Stylesheet nicht finden können, weil Sie die Suche im Dom verloren haben, drücken Sie einfach Strg + P (oder CMD + P), während DevTools fokussiert ist, und schreiben Sie "inspec". Es wird sofort angezeigt. und dann einfach eintreten. i.imgur.com/WSWcbh8.png
— Carles Alcolea
1

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.

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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.
Geben Sie hier die Bildbeschreibung ein

— JerryGoyal
quelle
1
OP fragte jedoch speziell nach Änderungen, die auf der Registerkarte "Stile" vorgenommen wurden ...
— Ron Inbar,
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.