Aktualisieren .css Dateien über die Registerkarte Formatvorlagen (CSS-Spiegel Bearbeiten)
DIE CSS-Spiegel-Bearbeitung bietet bidirektionale Interaktion, sodass Sie die CSS-Datei in beiden Richtungen ändern können:
Bearbeiten Sie im Code-Editor die
.cssDatei. Ihre Änderungen werden im Tool Elemente auf der Registerkarte Edge DevTools gespiegelt.Im Tool Elemente auf der Registerkarte Edge DevTools werden Ihre Änderungen in der
.cssDatei im Code-Editor gespiegelt.
CSS-Spiegel Bearbeitung ist in der Erweiterung standardmäßig aktiviert. Daher wird in der DevTools-Erweiterung auf der Registerkarte Formatvorlagen im Tool Elemente beim Ändern von CSS-Selektoren, Regeln oder Werten die lokale .css Datei automatisch bearbeitet, wenn Sie Werte ändern.
Wenn Sie beispielsweise einen Punktgrößenwert für das Body-Element auswählen und dann die NACH-OBEN - oder NACH-UNTEN-TASTE drücken, können Sie .css sehen, dass sich der Wert in der .css Datei automatisch in Echtzeit ändert, während Sie den Wert auf der Registerkarte Formatvorlagen ändern:
Ohne CSS-Spiegel Bearbeitung eignet sich die Registerkarte Formatvorlagen in Microsoft Edge DevTools hervorragend zum Debuggen und Optimieren Ihrer CSS-Selektoren und CSS-Regeln. Obwohl diese Änderungen sofort im Webbrowser gerendert werden, werden sie nicht in Ihrer .css Datei wider. Dies bedeutet, dass Sie nach dem Ändern von CSS auf der Registerkarte Formatvorlagen Ihre Änderungen kopieren und wieder in Ihre .css Datei einfügen müssen.
CSS Spiegel Bearbeitung ist ein Feature der Microsoft Edge DevTools-Erweiterung, das dieses Problem umgeht. Jede Änderung, die Sie auf der Registerkarte Formatvorlagen vornehmen, ändert auch automatisch die .css Datei in Ihrem geöffneten Ordner in Visual Studio Code. Sie können eine beliebige CSS-Auswahl bearbeiten oder neue CSS-Selektoren auf der Registerkarte Formatvorlagen erstellen, und alle Änderungen werden automatisch in der richtigen .css Datei gespiegelt.
CSS-Spiegel Bearbeitung funktioniert auch für eine .html Datei, die ein <style> -Element enthält, z. B. die Seite Erfolg. Dies wird unter Erste Schritte durch Klicken auf die Schaltfläche Instanz starten veranschaulicht.
Das Kontrollkästchen CSS-Spiegelbearbeitung
Wenn Sie eine URL (anstelle eines Dateipfads) verwenden, erfordert css Spiegel Bearbeitung das Öffnen eines Ordners mit Webseitenquelldateien in Visual Studio Code, den die Erweiterung den Webseitenressourcen der URL zuordnen kann, die in die Adressleiste oder eine launch.json Datei eingegeben wird. Wenn Sie nicht über die lokalen Quelldateien verfügen, aber CSS in DevTools ändern möchten, deaktivieren Sie das Kontrollkästchen CSS Spiegel Bearbeiten, um Fehlermeldungen zur Zuordnung und Spiegel Bearbeitung zu verhindern. Weitere Informationen finden Sie weiter unten unter Aktivieren von CSS Spiegel Bearbeitung.
Speichern der Änderungen an der .css-Datei
Die Erweiterung speichert die Änderungen, die sie im Editor vornimmt, nicht automatisch. Auf der Registerkarte der .css Datei im Editor wird ein weißer Kreis angezeigt. Sie müssen die Änderungen manuell speichern, wenn Sie sie beibehalten möchten.
Wenn Sie Visual Studio oder den aktuellen Ordner oder die .css Datei schließen, werden Sie von Visual Studio aufgefordert, die Änderungen zu speichern.
Beispiel für das Spiegeln von Änderungen von der Registerkarte "Formatvorlagen" in eine .css-Datei
Im folgenden Beispiel index.html ist in Visual Studio Code geöffnet, und die Microsoft Edge DevTools-Erweiterung ist geöffnet. Wir wählen das Flexbox-Symbol in der .searchbar CSS-Auswahl aus und ändern dann in flex-directioncolumn.
Die Änderung wird auf der Registerkarte Edge DevTools und auf der Registerkarte Edge DevTools: Browser angezeigt:
Als Ergebnis der CSS-Spiegel Bearbeitung navigiert Visual Studio Code auch automatisch zur richtigen .css Datei und zur entsprechenden Zeilennummer und fügt den flex-direction: column CSS-Code ein:
Aktivieren der CSS-Spiegel Bearbeitung
Wenn Sie über beschreibbare, vertrauenswürdige Quelldateien verfügen und Ihre CSS-Änderungen in DevTools automatisch in den Quelldateien bearbeitet werden sollen, aktivieren Sie das Kontrollkästchen CSS-Spiegel Bearbeiten. Sie ist standardmäßig ausgewählt.
Deaktivieren Sie das Kontrollkästchen CSS-Spiegel Bearbeiten, wenn Sie nur experimentieren und in der Adressleiste der Registerkarte Edge DevTools: Browser eine URL anstelle eines Dateipfads vorhanden ist und keine Quelldateien lokal über die Aktivitätsleiste>vorhanden sind Explorer> die Schaltfläche Ordner öffnen, und es werden keine Fehlermeldungen zur Zuordnung und Spiegel Bearbeitung angezeigt.
So aktivieren oder deaktivieren Sie die CSS-Spiegel Bearbeitung:
Wechseln Sie auf der Registerkarte Edge DevTools auf der Registerkarte Elemente zur Registerkarte Formatvorlagen .
Aktivieren oder deaktivieren Sie das Kontrollkästchen CSS Spiegel Bearbeiten:
Oder öffnen Sie das Befehlsmenü, beginnen Sie mit der Eingabe des Worts Spiegel, und wählen Sie dann Microsoft Edge-Tools: Spiegel Bearbeiten für CSS-Dateien im Arbeitsbereich ein-/ausschalten aus:
Sourcemap-Unterstützung
Die CSS-Spiegelung unterstützt auch Abstraktionen wie Sass oder CSS-in-JS, wenn Sie Ihr Projekt zum Erstellen von Sourcemaps eingerichtet haben. Wir haben ein Nachverfolgungsproblem auf GitHub und freuen uns über feedback, wie dies verbessert werden könnte: CSS-Spiegelbearbeitung mit Sourcemaps: Bekannte Probleme und Feedback.