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 DevTools verbinden, indem Sie eine Konfigurationsdatei bereitstellen. Sie können auch manuell einen Arbeitsbereichsspeicherort im Bereich Quellen hinzufügen.
Übersicht
Über eine automatische (oder manuelle) Verbindung zu einem Arbeitsbereichsordner 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 Verzeichnis mit dem Quellcode aus, sodass die Website unter
localhost:PORTerreichbar ist und eine einfache JSON-Datei mit Metadaten bereitgestellt wird (siehe unten). - Sie haben
localhost:PORTin Google Chrome geöffnet und ändern mit den Entwicklertools das CSS der Website.
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 dem ursprünglichen Quellcode zuordnen.
Metadaten für eine Verbindung generieren
Damit DevTools Ihren Arbeitsbereichsordner automatisch erkennt, 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"
}
}
Lege die JSON-Datei dann in path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json ab.
Führen Sie abschließend 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.
Arbeitsbereichsordner verknüpfen
So verbinden Sie einen Ordner:
- Rufen Sie in Chrome die lokal gehostete Seite auf (in diesem Beispiel
localhost:8000) und öffnen Sie die DevTools. Klicken Sie unter Quellen > Arbeitsbereich neben dem Ordner auf Verbinden.
Klicken Sie auf Dateien bearbeiten, um den DevTools Zugriff auf Ihren Ordner zu gewähren.
Nach der Verbindung können Sie den Ordner auf dem Tab Arbeitsbereiche öffnen.
Auf dem Tab Workspace wird neben HTML-, CSS- und JavaScript-Dateien ein grüner Punkt angezeigt. Diese grünen Punkte bedeuten, dass in den DevTools eine Zuordnung zwischen den Netzwerkressourcen der Seite und den Dateien im Ordner hergestellt wurde.
Änderungen im Quellordner speichern
Sie können Änderungen an allen CSS-, HTML- und JavaScript-Dateien im verknüpften Arbeitsbereichsordner speichern.
Änderungen am CSS speichern
So speichern Sie Änderungen am CSS-Code:
- Öffnen Sie eine CSS-Datei aus dem verbundenen Arbeitsbereichsordner unter Quellen > Arbeitsbereiche.
Nehmen Sie eine Änderung an Ihrem Preisvergleichsportal vor.
Speichern Sie die Änderung, indem Sie beispielsweise Strg / Cmd + S drücken. Die angewendete Änderung wird dann in der Quelldatei angezeigt. Im Bereich Quellen wird neben dem Dateinamen ein grüner Punkt angezeigt.
Im Video erfährst du mehr über den Workflow:
Änderungen an HTML-Code speichern
So speichern Sie Änderungen am HTML-Code:
- Öffnen Sie eine HTML-Datei aus dem verbundenen Arbeitsbereichsordner unter Quellen > Arbeitsbereiche.
Nehmen Sie eine Änderung an Ihrem HTML-Code vor.
Speichern Sie die Änderung, indem Sie beispielsweise Strg / Cmd + S drücken. Die angewendete Änderung wird dann in der Quelldatei angezeigt. Im Bereich Quellen wird neben dem Dateinamen ein grüner Punkt angezeigt.
Aktualisieren Sie die Seite, damit die Änderung wirksam wird.
Im Video erfährst du mehr über den Workflow:
Warum kann ich den HTML-Code nicht über den Bereich Elemente ändern?
- 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. Mit der CSS-Property
contentkann das DOM ebenfalls 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.
Änderungen an JavaScript speichern
So speichern Sie Änderungen am JavaScript-Code:
- Öffnen Sie eine JavaScript-Datei aus dem verbundenen Arbeitsbereichsordner unter Quellen > Arbeitsbereiche.
Nehmen Sie eine Änderung an Ihrem JavaScript vor.
Speichern Sie die Änderung, indem Sie beispielsweise Strg / Cmd + S drücken. Die angewendete Änderung wird dann in der Quelldatei angezeigt. Im Bereich Quellen wird neben dem Dateinamen ein grüner Punkt angezeigt.
Wenn Ihr lokaler HTTP-Server auf Änderungen an den Live-Quelldateien wartet und die Seite automatisch neu lädt, werden die Änderungen angewendet, sobald Sie sie in den DevTools speichern. Andernfalls müssen Sie Ihren lokalen Server neu bereitstellen.
Im Video erfährst du mehr über den Workflow:
Verbindung zu einem Arbeitsbereichsordner entfernen
Wenn Sie eine Arbeitsbereichsordnerverbindung 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 verknüpfen
Öffnen Sie die Entwicklertools auf Ihrer lokal gehosteten Seite.
Klicken Sie unter Quellen > Arbeitsbereich 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 aus einem Format, das sich leicht verwalten lässt, in ein Format umgewandelt, das für eine möglichst schnelle Ausführung optimiert ist. Bei einer Verbindung zu einem Arbeitsordner kann der optimierte Code mithilfe von Quellzuordnungen in der Regel 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.
Nächste Schritte
Alle bereits eingerichteten Ordner können Sie unter 
Einstellungen > Arbeitsbereich verwalten.
Als Nächstes erfahren Sie, wie Sie mit den DevTools CSS ändern und JavaScript-Fehler beheben.
Weitere Informationen
Lokale Überschreibungen ist eine weitere ähnliche Funktion in den DevTools, mit der Sie Webinhalte oder Anfrageheader simulieren können. So können Sie frei mit Änderungen an einer Seite experimentieren, ohne auf das Backend warten zu müssen. Bei lokalen Überschreibungen bleiben die Änderungen bei jedem Seitenaufbau erhalten, werden aber nicht dem Quellcode Ihrer Seite zugeordnet.