Dateien in einem Arbeitsbereich bearbeiten und speichern

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

In dieser Anleitung können Sie üben, wie Sie einen Arbeitsbereich einrichten, damit Sie ihn in Ihren eigenen Projekten verwenden können. Mit Workspace können Sie Änderungen, die Sie in den Entwicklertools vornehmen, im Quellcode auf Ihrem Computer speichern.

Überblick

Mit Workspace können Sie eine Änderung, die Sie in den Entwicklertools vornehmen, in einer lokalen Kopie derselben Datei auf Ihrem Computer speichern. Beispiel:

  • Sie haben den Quellcode Ihrer Website auf Ihrem Desktop.
  • Sie führen einen lokalen Webserver aus dem Quellcodeverzeichnis aus, sodass der Zugriff auf die Website über localhost:8080 möglich ist.
  • Du hast localhost:8080 in Google Chrome geöffnet und verwendest die Entwicklertools, um das CSS der Website zu ändern.

Wenn der Arbeitsbereich aktiviert ist, werden die CSS-Änderungen, die Sie in den Entwicklertools vornehmen, im Quellcode auf Ihrem Desktop gespeichert.

Beschränkungen

Wenn Sie ein modernes Framework verwenden, wird Ihr Quellcode wahrscheinlich von einem einfach zu verwaltenden Format in ein Format umgewandelt, das für eine möglichst schnelle Ausführung optimiert ist. Arbeitsbereich ist in der Regel in der Lage, den optimierten Code mithilfe von Quellzuordnungen wieder Ihrem ursprünglichen Quellcode zuzuordnen.

Die DevTools-Community arbeitet daran, die von Source Maps bereitgestellten Funktionen in einer Vielzahl von Frameworks und Tools zu unterstützen. Wenn bei der Verwendung eines Arbeitsbereichs mit einem Framework Ihrer Wahl Probleme auftreten oder er nach einer benutzerdefinierten Konfiguration funktioniert, starten Sie einen Thread in der Mailingliste oder stellen Sie eine Frage auf Stack Overflow, um Ihr Wissen mit dem Rest der DevTools-Community zu teilen.

Zugehörige Funktion: lokale Überschreibungen

Lokale Überschreibungen sind eine weitere Entwicklertools-Funktion, die „Workspace“ ähnelt. Sie können lokale Überschreibungen verwenden, um Webinhalte oder Anfrageheader zu simulieren, ohne auf Back-End-Änderungen zu warten oder mit Änderungen an einer Seite zu experimentieren. Sie müssen diese Änderungen beim Seitenaufbau sehen, es ist Ihnen aber nicht wichtig, dem Quellcode der Seite zuzuordnen.

Schritt 1: Einrichtung

Arbeiten Sie diese Anleitung durch, um praktische Erfahrungen mit einem Arbeitsbereich zu sammeln.

Demo einrichten

  1. Klonen Sie dieses Demo-Repository in ein Verzeichnis auf Ihrem Computer. Beispiel: ~/Desktop.

  2. Starten Sie einen lokalen Webserver in ~/Desktop/devtools-workspace-demo. Der folgende Beispielcode zeigt den Start von SimpleHTTPServer. Sie können aber auch einen beliebigen Server verwenden.

    cd ~/Desktop/devtools-workspace-demo
# If your Python version is 3.X
# On Windows, try "python -m http.server" or "py -3 -m http.server"
python3 -m http.server
# If your Python version is 2.X
python -m SimpleHTTPServer

    Für den Rest dieser Anleitung wird dieses Verzeichnis als /devtools-workspace-demo bezeichnet.

  3. Öffnen Sie in Google Chrome einen Tab und rufen Sie die lokal gehostete Version der Website auf. Sie sollten über eine URL wie localhost:8000 darauf zugreifen können. Die genaue Portnummer kann abweichen.

    Die lokal gehostete Demoseite wurde in Chrome geöffnet.

Entwicklertools einrichten

  1. Öffnen Sie die Entwicklertools auf der lokal gehosteten Demoseite.

  2. Gehen Sie zu Quellen > Arbeitsbereich und richten Sie einen Arbeitsbereich in dem von Ihnen geklonten Ordner devtools-workspace-demo ein. Dazu haben Sie mehrere Möglichkeiten:

    • Ziehen Sie den Ordner per Drag-and-drop in den Editor unter Quellen.
    • Klicken Sie auf den Link Ordner auswählen und wählen Sie den Ordner aus.
    • Klicken Sie auf Hinzufügen Ordner hinzufügen und wählen Sie den Ordner aus. Tab „Quellen“ und dann „Arbeitsbereich“

  3. Klicke oben in der Eingabeaufforderung auf Zulassen, um den Entwicklertools Lese- und Schreibzugriff auf das Verzeichnis zu erteilen.

    Die Schaltfläche „Zulassen“ in der Aufforderung.

Auf dem Tab Arbeitsbereich wird jetzt ein grüner Punkt neben index.html, script.js und styles.css angezeigt. Diese grünen Punkte bedeuten, dass die Entwicklertools eine Zuordnung zwischen den Netzwerkressourcen der Seite und den Dateien in devtools-workspace-demo erstellt haben.

Der Tab „Arbeitsbereich“ zeigt jetzt eine Zuordnung zwischen den lokalen und den Netzwerkdateien an.

Schritt 2: CSS-Änderung auf dem Laufwerk speichern

  1. Öffnen Sie /devtools-workspace-demo/styles.css in einem Texteditor. Die Eigenschaft color von h1-Elementen ist auf fuchsia festgelegt.

    „styles.css“ in einem Texteditor aufrufen

  2. Schließen Sie den Texteditor.

  3. Klicken Sie in den Entwicklertools auf den Tab Elemente.

  4. Ändern Sie den Wert der Eigenschaft color des <h1>-Elements in Ihre Lieblingsfarbe. Anleitung:

    1. Klicken Sie in der DOM-Struktur auf das <h1>-Element.
    2. Suchen Sie im Bereich Styles nach der CSS-Regel h1 { color: fuchsia } und ändern Sie die Farbe in die von Ihnen bevorzugte Farbe. In diesem Beispiel ist die Farbe auf Grün eingestellt.

    Festlegen der Farbeigenschaft des h1-Elements auf Grün

    Der grüne Punkt Der grüne Punkt. neben styles.css:1 im Bereich Styles zeigt an, dass jede Änderung, die Sie vornehmen, /devtools-workspace-demo/styles.css zugeordnet wird.

  5. Öffnen Sie /devtools-workspace-demo/styles.css noch einmal in einem Texteditor. Für die Eigenschaft color ist jetzt Ihre Lieblingsfarbe festgelegt.

  6. Aktualisieren. Aktualisieren Sie die Seite. Als Farbe des <h1>-Elements wird weiterhin Ihre Lieblingsfarbe festgelegt. Dies funktioniert, da die Änderung beim Vornehmen der Änderung und der Speicherung der Änderung in den Entwicklertools auf dem Laufwerk gespeichert wurde. Beim Aktualisieren der Seite hat Ihr lokaler Server die geänderte Kopie der Datei von der Festplatte bereitgestellt.

Schritt 3: HTML-Änderung auf dem Laufwerk speichern

Versuchen Sie, den HTML-Code im Steuerfeld „Elemente“ zu ändern

  1. Öffnen Sie den Tab Elemente.

  2. Doppelklicken Sie auf den Textinhalt des h1-Elements (Workspaces Demo) und ersetzen Sie ihn durch I ❤️ Cake.

    Es wird versucht, HTML aus der DOM-Baumstruktur des Steuerfelds „Elemente“ zu ändern.

  3. Öffnen Sie /devtools-workspace-demo/index.html in einem Texteditor. Die von Ihnen gerade vorgenommene Änderung ist nicht vorhanden.

  4. Aktualisieren. Aktualisieren Sie die Seite. Der ursprüngliche Titel der Seite wird wiederhergestellt.

Optional: Warum es nicht funktioniert

  • Die Knotenstruktur im Steuerfeld Elemente stellt das DOM der Seite dar.
  • Zum Anzeigen einer Seite ruft ein Browser HTML über das Netzwerk ab, parst den HTML-Code und konvertiert ihn in eine Baumstruktur von DOM-Knoten.
  • Enthält die Seite JavaScript, kann dieses JavaScript DOM-Knoten hinzufügen, löschen oder ändern. CSS kann das DOM auch über die Property content ändern.
  • Schließlich verwendet der Browser das DOM, um zu bestimmen, welche Inhalte Browsernutzern angezeigt werden sollen.
  • Daher kann sich der endgültige Zustand der Seite, den die Nutzer sehen, stark von dem HTML-Code unterscheiden, den der Browser abgerufen hat.
  • Dadurch ist es für die Entwicklertools schwer zu erkennen, wo eine im Bereich Elemente vorgenommene Änderung gespeichert werden sollte, da das DOM von HTML, JavaScript und CSS beeinflusst wird.

Kurz gesagt, der DOM-Baum !== HTML.

HTML über das Steuerfeld „Quellen“ ändern

Änderungen am HTML-Code der Seite können Sie im Steuerfeld Quellen speichern.

  1. Gehen Sie zu Quellen > Seite.
  2. Klicken Sie auf (Index). Der HTML-Code der Seite wird geöffnet.
  3. Ersetzen Sie <h1>Workspaces Demo</h1> durch <h1>I ❤️ Cake</h1>.
  4. Drücken Sie Befehlstaste + S (Mac) oder Strg + S (Windows, Linux, ChromeOS), um die Änderung zu speichern.

  5. Aktualisieren. Aktualisieren Sie die Seite. Das <h1>-Element zeigt weiterhin den neuen Text an.

    HTML-Code im Bereich „Quellen“ ändern

  6. Öffnen Sie /devtools-workspace-demo/index.html. Das <h1>-Element enthält den neuen Text.

Schritt 4: JavaScript-Änderung auf dem Laufwerk speichern

Im Steuerfeld Quellen können Sie auch Änderungen an JavaScript vornehmen. Manchmal müssen Sie jedoch auf andere Bereiche wie Elemente oder Konsole zugreifen, während Sie Änderungen an Ihrer Website vornehmen. Es ist möglich, den Bereich Quellen zusammen mit anderen Bereichen zu öffnen.

  1. Öffnen Sie den Tab Elemente.
  2. Drücken Sie Befehlstaste + Umschalttaste + P (Mac) oder Strg + Umschalttaste + P (Windows, Linux, ChromeOS). Das Befehlsmenü wird geöffnet.

  3. Geben Sie QS ein und wählen Sie Quick Source anzeigen aus. Am unteren Rand des Entwicklertools-Fensters befindet sich jetzt der Tab Quick Source.

    Tab „Quick Source“ über das Befehlsmenü öffnen

    Der Tab zeigt den Inhalt von index.html an. Dies ist die Datei, die Sie zuletzt im Bereich Quellen bearbeitet haben. Auf dem Tab Quick Source steht der Editor aus dem Bereich Sources (Quellen) zur Verfügung, damit Sie Dateien bearbeiten können, während andere Felder geöffnet sind.

  4. Drücken Sie Befehlstaste + P (Mac) oder Strg + P (Windows, Linux, ChromeOS), um das Dialogfeld Datei öffnen zu öffnen.

  5. Geben Sie script ein und wählen Sie devtools-workspace-demo/script.js aus.

    Öffnet ein Skript über das Dialogfeld „Datei öffnen“.

  6. Beachten Sie den Edit and save files in a workspace-Link in der Demo. Es wird regelmäßig gestylt.

  7. Fügen Sie auf dem Tab Quick Source am Ende von script.js den folgenden Code ein.

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

  8. Drücken Sie Befehlstaste + S (Mac) oder Strg + S (Windows, Linux, ChromeOS), um die Änderung zu speichern.

  9. Aktualisieren. Aktualisieren Sie die Seite. Der Link auf der Seite ist jetzt kursiv.

Der Link auf der Seite ist jetzt kursiv.

Nächste Schritte

Sie können in einem Arbeitsbereich mehrere Ordner einrichten. Alle diese Ordner sind unter Einstellungen > Arbeitsbereich aufgeführt.

Als Nächstes erfahren Sie, wie Sie mit den Entwicklertools CSS ändern und JavaScript-Fehler beheben.