Wenn Sie einen Arbeitsbereich einrichten, können Sie Änderungen, die Sie in den Entwicklertools vornehmen, in den Quelldateien auf Ihrem Computer speichern. Sie können einen Arbeitsbereichsordner automatisch mit den DevTools verbinden, indem Sie eine Konfigurationsdatei bereitstellen, oder Sie können einen Arbeitsbereichsspeicherort manuell im Bereich Quellen hinzufügen.
Übersicht
Durch eine automatische (oder manuelle) Verbindung zu einem Arbeitsbereichsordner können Sie eine Änderung, die Sie in den DevTools vornehmen, in einer lokalen Kopie derselben Datei auf Ihrem Computer speichern. Beispiel:
- Sie haben den Quellcode für Ihre Website auf Ihrem Desktop.
- Sie führen einen lokalen Webserver aus dem Quellcodeverzeichnis aus, sodass die Website unter
localhost:PORTzugänglich ist und auch eine einfache JSON-Datei mit Metadaten bereitstellt (wird später beschrieben). - Sie haben
localhost:PORTin Google Chrome geöffnet und verwenden die Entwicklertools, um das CSS der Website zu ändern.
Wenn ein Arbeitsbereichsordner verbunden ist, werden die Änderungen, die Sie im Bereich Quellen an CSS-, HTML- und JavaScript-Dateien vornehmen, im Quellcode auf Ihrem Computer gespeichert. In den Entwicklertools werden jedoch keine Änderungen am DOM gespeichert, die Sie im Bereich Elemente vornehmen.
Außerdem können die Entwicklertools den optimierten Code mithilfe von Quellzuordnungen in der Regel wieder dem ursprünglichen Quellcode zuordnen.
Metadaten für eine Verbindung generieren
Damit die Entwicklertools Ihren Arbeitsbereichsordner automatisch finden, generieren Sie eine zufällige UUID der Version 4 und fügen Sie sie in die folgende JSON-Datei ein:
{
"workspace": {
"uuid": "UUID",
"root": "path/to/project/root/folder"
}
}
Platzieren Sie die JSON-Datei dann in path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.
Führen Sie schließlich Ihren lokalen HTTP-Server aus und achten Sie darauf, dass auch die JSON-Datei bereitgestellt wird.
Alternativ können Sie diesen Schritt überspringen und eine Ordnerverbindung manuell einrichten.
Arbeitsbereich-Ordner verbinden
So verbinden Sie einen Ordner:
- Rufen Sie in Chrome Ihre lokal gehostete Seite auf (in diesem Beispiel
localhost:8000) und öffnen Sie die Entwicklertools. Klicken Sie unter Quellen > Arbeitsbereich neben Ihrem Ordner auf Verbinden.
Klicken Sie bei Aufforderung auf Dateien bearbeiten, um den Entwicklertools Zugriff auf Ihren Ordner zu gewähren.
Nachdem die Verbindung hergestellt wurde, können Sie den Ordner auf dem Tab Arbeitsbereiche öffnen.
Auf dem Tab Arbeitsbereich wird neben HTML-, CSS- und JavaScript-Dateien ein grüner Punkt angezeigt. Diese grünen Punkte bedeuten, dass die DevTools eine Zuordnung zwischen den Netzwerkressourcen der Seite und den Dateien im Ordner hergestellt haben.
Änderung im Quellordner speichern
Sie können Änderungen an CSS-, HTML- und JavaScript-Dateien im verbundenen Arbeitsbereichsordner speichern.
Änderungen am CSS speichern
So speichern Sie Änderungen am CSS:
- Öffnen Sie eine CSS-Datei aus dem verbundenen Arbeitsbereichsordner unter Quellen > Arbeitsbereiche.
Nehmen Sie eine Änderung an Ihrem CSS vor.
Speichern Sie die Änderung, z. B. durch Drücken von Strg / Cmd + S. Die Änderung wird dann in Ihrer Quelldatei angezeigt. Im Bereich Quellen wird neben dem Dateinamen ein grüner Punkt angezeigt.
Sehen Sie sich das Video an, um den Workflow kennenzulernen:
Änderungen am HTML-Code speichern
So speichern Sie Änderungen am HTML-Code:
- Öffnen Sie eine HTML-Datei aus Ihrem verbundenen Arbeitsbereichsordner unter Quellen > Arbeitsbereiche.
Nehmen Sie eine Änderung am HTML-Code vor.
Speichern Sie die Änderung, z. B. durch Drücken von Strg / Cmd + S. Die Änderung wird dann in Ihrer Quelldatei angezeigt. Im Bereich Quellen wird neben dem Dateinamen ein grüner Punkt angezeigt.
Aktualisieren Sie die Seite, damit die Änderung wirksam wird.
Sehen Sie sich das Video an, um den Workflow kennenzulernen:
Warum können Sie HTML nicht im Bereich Elemente ändern?
- Die Baumstruktur der Knoten, die Sie im Bereich Elemente sehen, stellt das DOM der Seite dar.
- Um eine Seite anzuzeigen, ruft ein Browser HTML über das Netzwerk ab, parst den HTML-Code und konvertiert ihn dann in einen Baum von DOM-Knoten.
- Wenn die Seite JavaScript enthält, können durch dieses JavaScript DOM-Knoten hinzugefügt, gelöscht oder geändert werden. Auch CSS kann das DOM ändern, und zwar mit dem Attribut
content. - Der Browser verwendet das DOM schließlich, um zu bestimmen, welche Inhalte den Browsernutzern präsentiert werden sollen.
- Daher kann sich der endgültige Zustand der Seite, den Nutzer sehen, stark von dem HTML-Code unterscheiden, den der Browser abgerufen hat.
- Daher ist es für die Entwicklertools schwierig, zu bestimmen, wo eine im Bereich Elemente vorgenommene Änderung gespeichert werden soll, da das DOM von HTML, JavaScript und CSS beeinflusst wird.
Kurz gesagt: Der DOM-Baum !== HTML.
Änderungen am JavaScript speichern
So speichern Sie Änderungen an JavaScript:
- Öffnen Sie unter Quellen > Arbeitsbereiche eine JavaScript-Datei aus dem verbundenen Arbeitsbereichsordner.
Nehmen Sie eine Änderung an Ihrem JavaScript vor.
Speichern Sie die Änderung, z. B. durch Drücken von Strg / Cmd + S. Die Änderung wird dann in Ihrer Quelldatei angezeigt. Im Bereich Quellen wird neben dem Dateinamen ein grüner Punkt angezeigt.
Wenn Ihr lokaler HTTP-Server auf Änderungen an Quelldateien wartet und die Seite automatisch neu lädt, werden die Änderungen übernommen, sobald Sie sie in den DevTools speichern. Andernfalls müssen Sie Ihren lokalen Server noch einmal bereitstellen.
Sehen Sie sich das Video an, um den Workflow kennenzulernen:
Verbindung zu einem Arbeitsbereich-Ordner entfernen
Wenn Sie eine Verbindung zu einem Arbeitsbereichsordner entfernen möchten, klicken Sie unter Quellen > Arbeitsbereich mit der rechten Maustaste auf den Ordner, wählen Sie im Drop-down-Menü Aus dem Arbeitsbereich entfernen aus und klicken Sie auf Entfernen.
Arbeitsbereichsordner manuell verbinden
Öffnen Sie die Entwicklertools auf Ihrer lokal gehosteten Seite.
Klicken Sie unter Quellen > Workspace auf Ordner manuell hinzufügen. Wählen Sie dann einen Ordner mit Ihren Quelldateien aus.
Führen Sie dann die Schritte 3 und 4 unter Arbeitsbereichsordner verbinden aus.
Beschränkungen
Wenn Sie ein modernes Framework verwenden, wird Ihr Quellcode wahrscheinlich von einem Format, das für Sie leicht zu pflegen ist, in ein Format umgewandelt, das für eine möglichst schnelle Ausführung optimiert ist. Bei einer Verbindung mit einem Arbeitsbereichsordner kann der optimierte Code in der Regel mithilfe von Quellzuordnungen dem ursprünglichen Quellcode zugeordnet werden.
Die DevTools-Community arbeitet daran, die von Quellzuordnungen bereitgestellten Funktionen in einer Vielzahl von Frameworks und Tools zu unterstützen. Wenn Sie bei der Verwendung eines Arbeitsbereichs mit dem von Ihnen gewählten Framework auf Probleme stoßen oder es nach einer benutzerdefinierten Konfiguration zum Laufen bringen, 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.
Nächste Schritte
Alle bereits eingerichteten Ordner können Sie unter 
Einstellungen > Arbeitsbereich verwalten.
Als Nächstes erfahren Sie, wie Sie mit den Entwicklertools CSS ändern und JavaScript debuggen.
Weitere Informationen
Lokale Überschreibungen sind eine weitere DevTools-Funktion, die ähnlich funktioniert und mit der Sie Webinhalte oder Anfrageheader simulieren können. So können Sie Änderungen an einer Seite testen, ohne darauf warten zu müssen, dass das Backend aktualisiert wird. Bei lokalen Überschreibungen bleiben die Änderungen auch nach dem Laden der Seite erhalten, werden aber nicht dem Quellcode der Seite zugeordnet.