Heim >Web-Frontend >CSS-Tutorial >Wie speichere ich in Chrome DevTools vorgenommene CSS-Änderungen lokal?

Wie speichere ich in Chrome DevTools vorgenommene CSS-Änderungen lokal?

Barbara Streisand
Barbara StreisandOriginal
2024-12-28 19:46:14876Durchsuche

How Do I Save CSS Changes Made in Chrome DevTools Locally?

Speichern von CSS-Änderungen, die über das Styles-Bedienfeld von Chrome DevTools vorgenommen wurden

Bei der Arbeit mit lokalen CSS-Dateien über das Styles-Bedienfeld in den Google Chrome Developer Tools können Benutzer Es kann zu Problemen mit Änderungen kommen, die nicht im Ressourcenfenster angezeigt werden. Dieser Artikel bietet eine Lösung für dieses Problem.

Um CSS-Änderungen lokal zu speichern, ermöglicht Ihnen Chrome die Integration lokaler Ordner in Ihren Arbeitsbereich. Hier ist eine Schritt-für-Schritt-Anleitung:

  1. Ordner zum Arbeitsbereich hinzufügen: Klicken Sie im Quellenbereich von DevTools mit der rechten Maustaste in den linken Bereich und wählen Sie „Ordner zum Arbeitsbereich hinzufügen“. ."
  2. Chrome-Berechtigungen zulassen: Chrome-Zugriff auf die hinzugefügten Inhalte gewähren Ordner.
  3. Ressourcen zuordnen: Navigieren Sie zur Registerkarte „Netzwerk“, klicken Sie mit der rechten Maustaste auf den CSS-Dateipfad und wählen Sie „Zu lokal zuordnen“ aus.

Sobald Sie Wenn Sie die Ressource zugeordnet haben, priorisiert Chrome das Laden lokaler Versionen der zugeordneten Dateien beim Neuladen der Seite. Sie können Änderungen jetzt speichern, indem Sie die Standard-Strg-S-Tastenkombination drücken.

Zusätzliche Speicheroptionen:

Für zusätzliche Flexibilität sollten Sie die Verwendung von Erweiterungen oder Tools in Betracht ziehen, um über vorgenommene CSS-Änderungen zu speichern Chrome DevTools:

  • LiveReload: Erkennt CSS-Änderungen und lädt den Browser automatisch neu Fenster.
  • CSS Reloader: Bietet eine benutzerfreundliche Oberfläche zum Speichern von Änderungen, einschließlich der Option, aktive Änderungen ein- und auszuschalten.
  • CSS neu laden: Eine minimalistische Erweiterung, mit der Sie CSS-Dateien mit einem einzigen Klick neu laden können.

Das obige ist der detaillierte Inhalt vonWie speichere ich in Chrome DevTools vorgenommene CSS-Änderungen lokal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn