Bearbeiten von Dateien mit Arbeitsbereichen (Registerkarte "Dateisystem")

Verwenden Sie die Registerkarte Dateisystem im Tool Quellen , um einen Arbeitsbereich zu definieren, um DevTools-Änderungen in Ihren Quellcodedateien zu speichern, anstatt nur in einer vorübergehenden Kopie der Dateien, die vom Webserver zurückgegeben werden.

Dieses Tutorial bietet praktische Übungen zum Einrichten und Verwenden eines Arbeitsbereichs in DevTools. Nachdem Sie einem Arbeitsbereich Dateien hinzugefügt haben, werden Änderungen, die Sie mithilfe von DevTools im Quellcode vornehmen, auf Ihrem lokalen Computer gespeichert. Diese Änderungen werden über Seitenaktualisierungen hinweg beibehalten.

Weitere Informationen zu den verwendeten Technologien finden Sie in den folgenden Artikeln:

• Verwenden Sie HTML, CSS und JavaScript, um eine Webseite zu erstellen. Weitere Informationen finden Sie unter Erste Schritte mit dem Web.

• Verwenden Sie DevTools, um grundlegende Änderungen an CSS vorzunehmen. Weitere Informationen finden Sie unter Erste Schritte beim Anzeigen und Ändern von CSS.

• Führen Sie einen lokalen HTTP-Webserver aus. Siehe:

  • Verwenden von Node.js (für dieses Tutorial): Einrichten eines localhost-Servers unter Installieren der DevTools-Erweiterung für Visual Studio Code.

  • Verwenden von Python: Ausführen eines einfachen lokalen HTTP-Servers in Wie richten Sie einen lokalen Testserver ein?

Einführung

In einem DevTools-Arbeitsbereich können Sie Änderungen, die Sie an einer lokalen Kopie des Quellcodes vornehmen, in derselben Datei auf Ihrem Computer speichern, sodass Änderungen über Aktualisierungen der Seite hinweg beibehalten werden. Hier ist ein typisches Szenario für die Verwendung eines Arbeitsbereichs:

• Sie verfügen über den Quellcode für die Demowebsite auf Ihrem Desktop.

• Sie führen einen lokalen Webserver aus dem Quellcodeverzeichnis aus, sodass unter localhost:8080auf die Website zugegriffen werden kann. Hinweis: Wenn Sie die Python-Serveroption verwenden, ist 8000die Standardportnummer .

• Sie haben in Microsoft Edge geöffnet localhost:8080 und verwenden DevTools, um den Quellcode der Website zu ändern, der die CSS-, HTML- und JavaScript-Dateien enthält.

Die folgenden Tutorialschritte führen Sie durch diese Umgebungseinrichtung.

Einschränkungen

Wenn Sie ein modernes Framework verwenden, transformiert es Ihren Quellcode wahrscheinlich aus einem Format, das einfach zu verwalten ist, in ein Format, das für die schnellstmögliche Ausführung optimiert ist. Ein Arbeitsbereich ist in der Regel in der Lage, den optimierten Code mithilfe von Quellzuordnungen für JavaScript und CSS dem ursprünglichen Quellcode zuzuordnen. Es gibt jedoch viele Unterschiede in der Art und Weise, wie jedes Framework Quellzuordnungen verwendet.

DevTools unterstützt nicht jede Frameworkvariation. Beispielsweise funktioniert das Feature Arbeitsbereiche (Registerkarte Dateisystem) nicht mit dem Framework "React App erstellen".

Wenn bei der Verwendung von Arbeitsbereichen mit dem Framework Ihrer Wahl Probleme auftreten oder Sie frameworkspezifische Schritte identifizieren, die erforderlich sind, starten Sie einen Thread in der Chrome DevTools-Mailingliste , oder stellen Sie eine Frage auf Stack Overflow , um Informationen mit dem Rest der DevTools-Community auszutauschen.

Verwandte Funktion: Außerkraftsetzungen

Overrides ist ein DevTools-Feature, das einem Arbeitsbereich ähnelt. Sie können eine Außerkraftsetzung verwenden, wenn Sie mit Änderungen an einer Webseite experimentieren möchten und die Änderungen über webseitenübergreifende Ladevorgänge hinweg anzeigen müssen, aber Sie sind nicht daran interessiert, Ihre Änderungen dem Quellcode der Webseite zuzuordnen. Ihre Änderungen werden jedoch nicht gespeichert, wenn Sie die Webseite aktualisieren.

Mit dem Feature Außerkraftsetzungen können Sie eine lokale Kopie der Webseitendateien auf dem Server speichern. Wenn Sie die Seite aktualisieren, lädt Microsoft Edge die lokale Kopie der Dateien anstelle der Dateien auf dem Server. Weitere Informationen zu Außerkraftsetzungen finden Sie unter Außerkraftsetzen von Webseitenressourcen mit lokalen Kopien (Registerkarte Außerkraftsetzungen).

Erstellen des Verzeichnisses der Quelldateien

Wir richten die Demodateien ein und richten dann DevTools ein.

1. Wechseln Sie in einem anderen Fenster oder einer anderen Registerkarte zum Demo-Quellcode für Arbeitsbereiche.

2. Erstellen Sie ein app Verzeichnis, z ~/Desktop/app . B. oder C:\Users\myusername\app\. Kopieren Sie index.html, ../shared/img/logo.png, README.md, script.jsund styles.css aus dem Demoquellcode in Ihr app Verzeichnis. Für den Rest des Tutorials wird dieses Verzeichnis als ~/Desktop/app oder C:\Users\myusername\app\bezeichnet, obwohl Sie einen anderen Pfad verwenden können.

3. Falls noch nicht geschehen, installieren Sie Node.js und npm. Weitere Informationen finden Sie unter Installieren von Node.js und Node Package Manager (npm) unter Installieren der DevTools-Erweiterung für Visual Studio Code.

4. Wechseln Sie zu einer Eingabeaufforderung, z. B. zur Git Bash-Shell oder zum Terminalbereich in Microsoft Visual Studio Code.

5. Wechseln Sie zu dem app Verzeichnis, das Sie erstellt haben, z ~/Desktop/app . B. oder C:/Users/myusername/app. Wenn Sie die Git Bash-Shell verwenden, handelt es sich um eine UNIX-Shell. Selbst unter Windows müssen Sie also einen Verzeichnispfad umschließen, der umgekehrte Schrägstriche in Anführungszeichen enthält, oder sie verwenden schräge Schrägstriche anstelle umgekehrter Schrägstriche.

6. Führen Sie einen der folgenden Befehle aus, um den Webserver zu starten:
   Node.js Option:

   # Node.js option
   cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
   npx http-server  # Node.js
   

   Weitere Informationen und Optionen finden Sie unter Starten des Servers (npx http-server) unter Installieren der DevTools-Erweiterung für Visual Studio Code.

   # Python 2 option
   cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
   python -m SimpleHTTPServer  # Python 2
   

   # Python 3 option
   cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
   python -m http.server  # Python 3
   

7. Öffnen Sie eine Registerkarte in Microsoft Edge, und wechseln Sie zur lokal gehosteten Version der Website. Sie sollten mithilfe localhost:8080von darauf zugreifen können:

   

   Eine weitere gängige äquivalente URL ist http://0.0.0.0:8080. Die Standardportnummer für die Python-Serveroption lautet 8000. Die genaue Portnummer kann unterschiedlich sein.

Definieren eines Arbeitsbereichs in DevTools

1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS), um die DevTools-Konsole zu öffnen:

   

2. Klicken Sie auf die Registerkarte Quellen ().

3. Klicken Sie im Bereich Navigator (auf der linken Seite) auf die Registerkarte Dateisystem (die mit der Registerkarte Seite gruppiert ist):

   

4. Klicken Sie auf Ordner zum Arbeitsbereich hinzufügen. Explorer oder Finder wird geöffnet.

5. Wechseln Sie zu dem /app/ Verzeichnis, das Sie erstellt haben. Geben Sie beispielsweise im Textfeld Ordner: den Pfad ein, z ~/Desktop/app . B. oder C:\Users\myusername\app\. Klicken Sie dann auf die Schaltfläche Ordner auswählen .

   DevTools fordert Sie auf, ob DevTools Vollzugriff auf Ihr app Verzeichnis gewährt werden soll.

6. Klicken Sie auf die Schaltfläche Zulassen , um DevTools die Berechtigung zum Lesen und Schreiben in das Verzeichnis zu erteilen.

   Auf der Registerkarte Dateisystem befinden sich Seitensymbole mit einem grünen Punkt für index.html, script.jsund styles.css. Der grüne Punkt gibt an, dass DevTools eine Zuordnung zwischen einer Netzwerkressource der Seite, die vom Webserver empfangen wird, und der lokalen Quelldatei in Ihrem app Verzeichnis eingerichtet hat:

   

Bearbeiten von CSS und Speichern von Änderungen an der Quelldatei

So ändern Sie die CSS-Datei und speichern sie auf einem Datenträger:

1. Wählen Sie im Tool Quellen auf der Registerkarte Dateisystem (gruppiert mit der Registerkarte Seite ) aus styles.css , um es im Editorbereich zu öffnen. Die color -Eigenschaft des h1 -Elements ist auf fuchsiafestgelegt:

   

2. Wählen Sie das Tool Elemente () aus, erweitern Sie dann in der DOM-Struktur das <body> Element, und wählen Sie dann das <h1> Element aus.

   Im Bereich Formatvorlagen werden die CSS-Regeln angezeigt, die auf das <h1> Element angewendet werden. Das Symbol für die zugeordnete Datei () neben styles.css:1 ist eine Seite mit einem grünen Punkt. Der grüne Punkt bedeutet, dass alle Änderungen, die Sie an dieser CSS-Regel vornehmen, styles.css in Ihrem app Verzeichnis zugeordnet werden:

   

3. Ändern Sie den Wert der color -Eigenschaft des <h1> Elements in orange. Wählen Sie dazu das <h1> -Element in der DOM-Struktur aus. Klicken Sie in der CSS-Regel für auf h1fuchsia, beginnen Sie mit der Eingabe von Orange, und wählen Sie dann orange aus der Farbliste aus:

   

4. Öffnen Sie die Kopie von styles.css in Ihrem app Verzeichnis in einem Text-Editor, z. B. Visual Studio Code. Die color -Eigenschaft ist jetzt auf die neue Farbe festgelegt, die in diesem Beispiel orange ist. Die Änderung wurde nicht nur in der Kopie der Datei vorgenommen, die vom Webserver zurückgegeben wurde. die Änderung wurde auch in Ihrer zugeordneten Datei in Ihrem app Arbeitsbereichsverzeichnis vorgenommen.

5. Aktualisieren Sie die Seite.

Die Farbe des <h1> Elements ist weiterhin auf die neue Farbe festgelegt. Die Änderung bleibt während einer Aktualisierung erhalten, da DevTools die Änderung als Sie die Änderung vorgenommen haben, auf dem Datenträger gespeichert hat. Wenn Sie die Seite aktualisiert haben, hat Ihr lokaler Server die geänderte Kopie der Datei vom Datenträger bereitgestellt.

Tipp: Sie können die Farbe auch ändern, indem Sie auf das Farbmuster fucshia klicken, um die Farbauswahl zu öffnen, um eine neue Farbe zu wählen. Der HEX-Wert für die farbe, die Sie auswählen, ist der Farbname.

Bearbeiten von HTML und Speichern von Änderungen an der Quelldatei

Im Elementtool ist es möglich, das HTML-Tagging in einer Kopie der Datei zu ändern, die vom Server zurückgegeben wird. Um Ihre Änderungen jedoch in einer lokalen Quelldatei zu speichern, müssen Sie anstelle des Elements-Tools das Tool Quellen verwenden.

Wenn Sie die DOM-Struktur im Tool Elemente ändern, werden keine Änderungen gespeichert.

Sie können Änderungen am HTML-Inhalt mithilfe der DOM-Struktur im Tool Elemente vornehmen. Ihre Änderungen an der DOM-Struktur werden jedoch nicht auf dem Datenträger gespeichert und wirken sich nur auf die aktuelle Browsersitzung aus.

Die folgenden Schritte veranschaulichen, dass Änderungen in der DOM-Struktur nicht über Seitenaktualisierungen hinweg beibehalten werden:

1. Wählen Sie oben das Tool Elemente aus.

2. Wählen Sie in der DOM-Struktur im <h1> -Element die Textzeichenfolge DevTools Workspaces Demoaus, löschen Sie sie, geben Sie die Textzeichenfolge I Love Cakeein, und drücken Sie dann die EINGABETASTE. Die gerenderte Webseite zeigt den neuen Überschriftentext an:

   

3. Öffnen Sie die index.html Datei, die sich in Ihrem app Verzeichnis befindet, in einem Text-Editor, z. B. Visual Studio Code. Die soeben vorgenommene Änderung wird nicht angezeigt. Die Überschrift lautet weiterhin "DevTools Workspaces Demo".

4. Aktualisieren Sie im Browser die Demoseite. Die Seite wird auf die ursprüngliche Überschrift "DevTools Workspaces Demo" zurückgesetzt, da die DOM-Struktur mit Ihrer Bearbeitung verworfen wurde und das DOM aus der unveränderten index.html Datei in Ihrem app Arbeitsbereichsverzeichnis neu erstellt wurde.

Beim Ändern von HTML über das Tool Quellen werden Änderungen gespeichert.

Wenn Sie eine Änderung am HTML-Code der Webseite speichern möchten, bearbeiten Sie den HTML-Code im Tool Quellen mit einem definierten Arbeitsbereich (auf der Registerkarte Dateisystem ), anstatt den HTML-Code in der DOM-Struktur im Tool Elemente zu ändern.

1. Klicken Sie weiter oben auf die Registerkarte Quellen ().

2. Wählen Sie im Bereich Navigator auf der linken Seite aus index.html. Der HTML-Code für die Seite wird geöffnet.

3. Ersetzen Sie <h1>DevTools Workspaces Demo</h1> in der Dateiliste durch <h1>I Love Cake</h1>(im Gegensatz zur DOM-Struktur im Tool Elemente ).

4. Drücken Sie STRG+S (Windows, Linux) oder BEFEHL+S (macOS), um die Änderung zu speichern.

5. Aktualisieren Sie die Seite. Die Überschrift auf der gerenderten Seite ändert sich in "I Love Cake", da diese Zeichenfolge in index.html Ihrem zugeordneten app Verzeichnis gespeichert wurde:

   

6. Öffnen Sie die Kopie von index.html in Ihrem app Verzeichnis in einem Text-Editor, z. B. Visual Studio Code.

   Das <h1> -Element enthält den neuen Text, da Sie die Änderung mit dem Editor des Quellentools vorgenommen haben, um die Änderung zu bearbeiten index.html und dann gespeichert zu haben, und diese Datei wurde in einem Arbeitsbereich (registerkarte Dateisystem ) zugeordnet, der durch einen grünen Punkt auf dem Symbol der Datei angezeigt wird.

Bearbeiten von JavaScript und Speichern von Änderungen an der Quelldatei

Der Standard Ort für die Verwendung des Code-Editors von DevTools ist das Quellen-Tool. Manchmal müssen Sie jedoch beim Bearbeiten von Dateien auf andere Tools wie das Tool Elemente oder die Konsole zugreifen. Mit dem Quick source-Tool erhalten Sie nur den Editor aus dem Quellentool , während ein beliebiges Tool geöffnet ist.

So öffnen Sie den DevTools-Code-Editor zusammen mit anderen Tools:

1. Wählen Sie weiter oben das Tool Elemente (.) aus.

2. Drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS), um das Befehlsmenü zu öffnen.

3. Beginnen Sie an der Eingabeaufforderung Ausführen mit der Eingabe von Quick, und wählen Sie dann Schnellquelle anzeigen aus:

   

   Am unteren Rand des DevTools-Fensters wird das Quick source-Tool geöffnet, in dem der Inhalt von index.htmlangezeigt wird, da dies die letzte Datei ist, die Sie im Tool Quellen bearbeitet haben. Klicken Sie bei Bedarf auf Schnellansicht erweitern, und stellen Sie sicher, dass das Tool Elemente ausgewählt ist.

4. Drücken Sie STRG+P (Windows, Linux) oder BEFEHL+P (macOS), um die Eingabeaufforderung Datei öffnen des Befehlsmenüs anzuzeigen:

   

5. Beginnen Sie mit der Skripteingabe, und wählen Sie dann script.js aus, das sich im Verzeichnis app/befindet .

   Die Dateiauflistung wird im Tool Quick source (Schnellquelle ) angezeigt. Auf der gerenderten Demowebseite ist der Link Dateien mit Arbeitsbereichen bearbeiten nicht kursiv formatiert.

6. Verwenden Sie das Tool "Schnellquelle ", um den folgenden Code am Ende der script.jshinzuzufügen:

   document.querySelector('a').style = 'font-style:italic';
   

7. Drücken Sie STRG+S (Windows, Linux) oder BEFEHL+S (macOS), um die Änderung zu speichern.

8. Aktualisieren Sie die Seite. Klicken Sie bei Bedarf auf die Schaltfläche Aktualisieren , halten Sie sie gedrückt, und wählen Sie dann Harte Aktualisierung aus. Der Link Dateien mit Arbeitsbereichen bearbeiten auf der Seite ist jetzt kursiv:

   

Weitere Informationen

• Öffnen Sie einen Demoordner im Quellentool, und bearbeiten Sie eine Datei in Beispielcode für DevTools.

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.