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
- Klonen Sie dieses Demo-Repository in ein Verzeichnis auf Ihrem Computer. Beispiel:
~/Desktop
. Starten Sie einen lokalen Webserver in
~/Desktop/devtools-workspace-demo
. Der folgende Beispielcode zeigt den Start vonSimpleHTTPServer
. 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.Ö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.
Entwicklertools einrichten
Öffnen Sie die Entwicklertools auf der lokal gehosteten Demoseite.
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 Ordner hinzufügen und wählen Sie den Ordner aus.
Klicke oben in der Eingabeaufforderung auf Zulassen, um den Entwicklertools Lese- und Schreibzugriff auf das Verzeichnis zu erteilen.
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.
Schritt 2: CSS-Änderung auf dem Laufwerk speichern
Öffnen Sie
/devtools-workspace-demo/styles.css
in einem Texteditor. Die Eigenschaftcolor
vonh1
-Elementen ist auffuchsia
festgelegt.Schließen Sie den Texteditor.
Klicken Sie in den Entwicklertools auf den Tab Elemente.
Ändern Sie den Wert der Eigenschaft
color
des<h1>
-Elements in Ihre Lieblingsfarbe. Anleitung:- Klicken Sie in der DOM-Struktur auf das
<h1>
-Element. - 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.
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.- Klicken Sie in der DOM-Struktur auf das
Öffnen Sie
/devtools-workspace-demo/styles.css
noch einmal in einem Texteditor. Für die Eigenschaftcolor
ist jetzt Ihre Lieblingsfarbe festgelegt.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
- Öffnen Sie den Tab Elemente.
Doppelklicken Sie auf den Textinhalt des
h1
-Elements (Workspaces Demo
) und ersetzen Sie ihn durchI ❤️ Cake
.Öffnen Sie
/devtools-workspace-demo/index.html
in einem Texteditor. Die von Ihnen gerade vorgenommene Änderung ist nicht vorhanden.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.
- Gehen Sie zu Quellen > Seite.
- Klicken Sie auf (Index). Der HTML-Code der Seite wird geöffnet.
- Ersetzen Sie
<h1>Workspaces Demo</h1>
durch<h1>I ❤️ Cake</h1>
. - Drücken Sie Befehlstaste + S (Mac) oder Strg + S (Windows, Linux, ChromeOS), um die Änderung zu speichern.
Aktualisieren Sie die Seite. Das
<h1>
-Element zeigt weiterhin den neuen Text an.Ö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.
- Öffnen Sie den Tab Elemente.
- Drücken Sie Befehlstaste + Umschalttaste + P (Mac) oder Strg + Umschalttaste + P (Windows, Linux, ChromeOS). Das Befehlsmenü wird geöffnet.
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.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.Drücken Sie Befehlstaste + P (Mac) oder Strg + P (Windows, Linux, ChromeOS), um das Dialogfeld Datei öffnen zu öffnen.
Geben Sie
script
ein und wählen Sie devtools-workspace-demo/script.js aus.Beachten Sie den
Edit and save files in a workspace
-Link in der Demo. Es wird regelmäßig gestylt.Fügen Sie auf dem Tab Quick Source am Ende von script.js den folgenden Code ein.
document.querySelector('a').style = 'font-style:italic';
Drücken Sie Befehlstaste + S (Mac) oder Strg + S (Windows, Linux, ChromeOS), um die Änderung zu speichern.
Aktualisieren Sie die Seite. 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.