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, den Sie in Ihren eigenen Projekten verwenden können. Mit Workspace können Sie Änderungen, die Sie in den DevTools vornehmen, im Quellcode speichern, der auf Ihrem Computer gespeichert ist.

Ü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 Ihrer Website auf Ihrem Computer.
  • Sie führen einen lokalen Webserver aus dem Quellcodeverzeichnis aus, sodass die Website unter localhost:8080 erreichbar ist.
  • Sie haben localhost:8080 in Google Chrome geöffnet und ändern mit den Entwicklertools das CSS der Website.

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 von einem Format, das sich leicht verwalten lässt, in ein Format umgewandelt, das für eine möglichst schnelle Ausführung optimiert ist. In der Regel kann der optimierte Code mithilfe von Quellzuordnungen dem ursprünglichen Quellcode zugeordnet werden.

Die DevTools-Community arbeitet daran, die Funktionen von Quellzuordnungen in verschiedenen Frameworks und Tools zu unterstützen. Wenn Sie Probleme bei der Verwendung eines Arbeitsbereichs mit Ihrem Framework haben oder es nach einer benutzerdefinierten Konfiguration zum Laufen bringen, erstellen Sie einen Thread in der Mailingliste oder stellen Sie eine Frage auf Stack Overflow, um Ihr Wissen mit der restlichen DevTools-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 mocken, ohne auf Backendänderungen zu warten, oder wenn Sie Änderungen an einer Seite ausprobieren möchten und diese Änderungen bei jedem Seitenladevorgang sehen möchten, aber nicht darauf achten müssen, Ihre Änderungen dem Quellcode der Seite zuzuordnen.

Schritt 1: Einrichten

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 einen Arbeitsbereich im geklonten Ordner devtools-workspace-demo 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. Klicken Sie auf „Quellen“ und dann auf den Tab „Workspace“.

  3. Klicken Sie oben in der Aufforderung auf Zulassen, um den DevTools die Berechtigung zum Lesen und Schreiben im Verzeichnis zu erteilen.

    Die Schaltfläche „Zulassen“ in der Aufforderung.

Auf dem Tab Arbeitsbereich ist jetzt neben index.html, script.js und styles.css ein grüner Punkt zu sehen. 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 „Arbeitsbereich“ 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 DevTools auf den Tab Elemente.

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

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

    Die Farbeigenschaft des H1-Elements auf „grün“ setzen.

    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 Ihre Lieblingsfarbe festgelegt. Das funktioniert, weil Sie die Änderung vorgenommen und DevTools die Änderung auf dem Laufwerk gespeichert haben. Wenn Sie die Seite dann aktualisiert haben, hat Ihr lokaler Server die geänderte Kopie der Datei von der Festplatte bereitgestellt.

Schritt 3: HTML-Änderungen auf dem Laufwerk speichern

HTML über das Steuerfeld „Elemente“ ä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.

    Versuch, HTML über den DOM-Baum im Bereich „Elemente“ zu ändern.

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

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

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. Über das Attribut content kann das DOM auch mit CSS geändert werden.
  • 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, stark 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. Klicken Sie auf 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 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 am 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 dann Quick Source anzeigen aus. Unten im DevTools-Fenster befindet sich jetzt der Tab Schnellquelle.

    Öffnen des Tabs „Schnellquelle“ ü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 Schnellquelle finden Sie den Editor aus dem Bereich Quellen. So können Sie Dateien bearbeiten, während andere Bereiche 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 dann devtools-workspace-demo/script.js aus.

    Skript über das Dialogfeld „Datei öffnen“ öffnen

  6. Beachten Sie den Link Edit and save files in a workspace 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.

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 DevTools CSS ändern und JavaScript-Fehler beheben.