Dateien in einem Arbeitsbereich bearbeiten und speichern

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

In dieser Anleitung können Sie üben, indem Sie einen Arbeitsbereich einrichten, damit Sie ihn in Ihren eigenen Projekten verwenden können. Mit Workspace kannst du in den Entwicklertools vorgenommene Änderungen im Quellcode auf deinem Computer speichern.

Übersicht

Mit Workspace können Sie eine Änderung, die Sie in DevTools vornehmen, in einer lokalen Kopie derselben Datei auf Ihrem Computer speichern. Angenommen, folgende Bedingungen sind erfüllt:

  • Sie haben den Quellcode für Ihre Website auf Ihrem Desktop-Computer.
  • Sie führen einen lokalen Webserver aus dem Quellcodeverzeichnis aus, sodass die Website unter localhost:8080 erreichbar ist.
  • Du hast localhost:8080 in Google Chrome geöffnet und verwendest die Entwicklertools, um den CSS-Code der Website zu ändern.

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

Beschränkungen

Wenn Sie ein modernes Framework verwenden, wird Ihr Quellcode wahrscheinlich aus einem Format, das sich leicht verwalten lässt, in ein Format umgewandelt, das für eine möglichst schnelle Ausführung optimiert ist. In Workspace kann der optimierte Code in der Regel mithilfe von Source Maps wieder dem ursprünglichen Quellcode zugeordnet werden.

Die Entwicklertools-Community unterstützt die Funktionen von Source Maps in verschiedenen Frameworks und Tools. Wenn bei der Verwendung eines Arbeitsbereichs mit einem Framework deiner Wahl Probleme auftreten oder es nach einer benutzerdefinierten Konfiguration funktioniert, kannst du einen Thread in der Mailingliste eröffnen oder eine Frage auf Stack Overflow stellen, um dein Wissen mit dem Rest der Entwicklertools-Community zu teilen.

Zugehörige Funktion: Lokale Überschreibungen

Lokale Überschreibungen sind eine weitere DevTools-Funktion, die dem Arbeitsbereich ähnelt. Verwenden Sie lokale Überschreibungen, um Webinhalte oder Anfrageheader zu simulieren, ohne auf Back-End-Änderungen warten zu müssen oder wenn Sie mit Änderungen an einer Seite experimentieren möchten und diese Änderungen bei verschiedenen Seitenladevorgängen sehen möchten, aber Ihre Änderungen nicht dem Quellcode der Seite zuordnen möchten.

Schritt 1: Einrichtung

In dieser Anleitung erhalten Sie praktische Erfahrungen mit einem Arbeitsbereich.

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. Unten finden Sie Beispielcode zum Starten von SimpleHTTPServer. Sie können jedoch jeden 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

    Im Folgenden wird dieses Verzeichnis als /devtools-workspace-demo bezeichnet.

  3. Öffnen Sie einen Tab in Google Chrome 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 wird 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 in dem von Ihnen geklonten Ordner devtools-workspace-demo einen Arbeitsbereich ein. Dazu gibt es 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. Den Tab „Quellen“ und dann den Tab „Arbeitsbereich“.

  3. Klicken Sie oben in der Eingabeaufforderung auf Zulassen, um den Entwicklertools Lese- und Schreibzugriff auf das Verzeichnis zu gewähren.

    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 in den DevTools eine Zuordnung zwischen den Netzwerkressourcen der Seite und den Dateien in devtools-workspace-demo eingerichtet wurde.

Auf dem Tab „Workspace“ wird jetzt eine Zuordnung zwischen den lokalen Dateien und den Netzwerkdateien angezeigt.

Schritt 2: CSS-Änderung auf dem Laufwerk speichern

  1. Öffnen Sie /devtools-workspace-demo/styles.css in einem Texteditor. Beachten Sie, dass die Property color der h1-Elemente auf fuchsia festgelegt ist.

    styles.css in einem Texteditor ansehen

  2. Schließen Sie den Texteditor.

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

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

    1. Klicken Sie in der DOM-Baumstruktur auf das Element <h1>.
    2. Suchen Sie im Bereich Stile nach der CSS-Regel h1 { color: fuchsia } und ändern Sie die Farbe wie gewünscht. In diesem Beispiel ist die Farbe auf Grün festgelegt.

    Die Eigenschaft color des h1-Elements wird auf Grün festgelegt.

    Der grüne Punkt Der grüne Punkt. neben styles.css:1 im Bereich Stile bedeutet, dass alle Änderungen, die Sie vornehmen, auf /devtools-workspace-demo/styles.css angewendet werden.

  5. Öffnen Sie /devtools-workspace-demo/styles.css wieder in einem Texteditor. Die Property color ist jetzt auf Ihre Lieblingsfarbe eingestellt.

  6. Aktualisieren Sie die Seite. Aktualisieren Sie die Seite. Die Farbe des <h1>-Elements ist weiterhin auf deine Lieblingsfarbe eingestellt. Das funktioniert, weil Sie die Änderung vorgenommen und DevTools die Änderung auf dem Laufwerk gespeichert haben. Beim erneuten Laden der Seite stellte der lokale Server dann die geänderte Kopie der Datei vom Laufwerk bereit.

Schritt 3: HTML-Änderungen auf dem Laufwerk speichern

Versuchen Sie, den HTML-Code über den Bereich „Elemente“ zu ändern

  1. Öffnen Sie den Tab Elemente.

  2. Klicken Sie doppelt auf den Textinhalt des h1-Elements, also auf Workspaces Demo, und ersetzen Sie ihn durch I ❤️ Cake.

    Es wird versucht, HTML über die DOM-Struktur des Steuerfelds „Elemente“ zu ändern.

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

  4. Aktualisieren. Aktualisieren Sie die Seite. Die Seite wird wieder auf den ursprünglichen Titel zurückgesetzt.

Optional: Warum funktioniert es nicht?

  • Der Knotenbaum, der im Bereich Elemente angezeigt wird, stellt das DOM der Seite dar.
  • Um eine Seite anzuzeigen, ruft ein Browser HTML über das Netzwerk ab, analysiert den HTML-Code und konvertiert ihn dann in einen DOM-Knotenbaum.
  • Wenn die Seite JavaScript enthält, kann dieses JavaScript DOM-Knoten hinzufügen, löschen oder ändern. CSS kann auch das DOM über das Attribut content ändern.
  • Der Browser verwendet das DOM schließlich, um zu bestimmen, welche Inhalte den Browsernutzern angezeigt werden sollen.
  • Daher kann der endgültige Zustand der Seite, den Nutzer sehen, sehr vom HTML abweichen, das der Browser abgerufen hat.
  • Das macht es für die DevTools schwierig zu ermitteln, wo eine Änderung, die im Bereich Elemente vorgenommen wurde, gespeichert werden soll, da das DOM von HTML, JavaScript und CSS beeinflusst wird.

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

HTML im Bereich „Quellen“ ändern

Wenn Sie eine Änderung am HTML-Code der Seite speichern möchten, tun Sie dies im Bereich Quellen.

  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 die Befehlstaste + S (Mac) oder Strg + S (Windows, Linux, ChromeOS), um die Änderung zu speichern.

  5. Aktualisieren Sie die Seite. Aktualisieren Sie die Seite. Im Element <h1> wird weiterhin der neue Text angezeigt.

    HTML über den Bereich „Quellen“ ändern

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

Schritt 4: JavaScript-Änderungen auf dem Laufwerk speichern

Im Bereich Quellen können Sie auch Änderungen an JavaScript vornehmen. Manchmal müssen Sie jedoch auf andere Bereiche zugreifen, z. B. auf den Bereich Elemente oder den Bereich Konsole, wenn Sie Änderungen an Ihrer Website vornehmen. Es gibt eine Möglichkeit, den Bereich Quellen neben 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. Unten im Entwicklertools-Fenster wird jetzt der Tab Quick Source angezeigt.

    Öffnet den Tab „Quick Source“ über das Befehlsmenü.

    Auf dem Tab wird der Inhalt von index.html angezeigt, der letzten Datei, die Sie im Bereich Quellen bearbeitet haben. Auf dem Tab Quick Source finden Sie den Editor aus dem Bereich Quellen, mit dem Sie Dateien bearbeiten können, während andere Bereiche geöffnet sind.

  4. Drücken Sie die 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 dann devtools-workspace-demo/script.js aus.

    Das Skript wird über das Dialogfeld „Datei öffnen“ geöffnet.

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

  7. Fügen Sie den folgenden Code unten in script.js auf dem Tab Schnellquelle 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 Sie die Seite. Aktualisieren Sie die Seite. Der Link auf der Seite ist jetzt kursiv dargestellt.

Der Link auf der Seite ist jetzt kursiv dargestellt.

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.