Freigeben über

Bearbeiten und Speichern von Dateien in einem Arbeitsbereich (Registerkarte "Quellen"-Tool "Arbeitsbereich")

Sie können DevTools als integrierte Entwicklungsumgebung (IDE) im Browser verwenden. Um Änderungen an Webseitenquelldateien zu speichern, fügen Sie den Quellcodeordner der Webseite auf der Registerkarte Arbeitsbereich des Tools Quellen hinzu. Anschließend können Sie HTML-, CSS- und JS-Dateien im Editor des Quellentools (oder im Tool Schnellquelle im Bereich Schnellansicht am unteren Rand von DevTools) bearbeiten und speichern.

Sie können Quelldateien auf der Registerkarte Arbeitsbereich erstellen, kopieren, umbenennen und löschen.

Verwenden Sie die Registerkarte Arbeitsbereich im Tool Quellen , um den Inhalt eines Ordners auf Ihrem Computer im Tool Quellen anzuzeigen und zu bearbeiten. Die Änderungen, die Sie an den Dateien in einem Arbeitsbereich vornehmen, werden auf Ihrem Computer gespeichert.

Die typische Methode zum Einrichten eines Arbeitsbereichs besteht darin, ihn so einzurichten, dass die Quelldateien des Front-End-Codes Ihrer Website angezeigt werden. Auf diese Weise verwenden Sie DevTools, um Ihre Website zu überprüfen und Änderungen an den Quelldateien vorzunehmen. Auf diese Weise werden die von Ihnen vorgenommenen Änderungen auf Ihrem Computer gespeichert, anstatt beim Aktualisieren der Seite verloren zu gehen.

Siehe auch:

Übersicht über das DevTools-Arbeitsbereichsfeature

In einem DevTools-Arbeitsbereich können Sie den Quellcode Ihrer Website anzeigen, der sich auf Ihrem Computer befindet, und änderungen daran über das Tool Quellen vornehmen, damit Änderungen über Aktualisierungen der Seite hinweg beibehalten werden.

Hier ist ein typisches Szenario für die Verwendung eines Arbeitsbereichs:

  1. Stellen Sie den Quellcode für Ihre Website auf Ihrem Computer bereit.

  2. Führen Sie einen lokalen Webserver (z npx http-server. B. ) aus dem Quellcodeverzeichnis aus, damit der Zugriff auf die Website über eine lokale Entwicklungs-URL wie möglich http://localhost:8080ist.

  3. Öffnen Sie http://localhost:8080 in Microsoft Edge.

  4. Verwenden Sie die Registerkarte Arbeitsbereich des Quellentools in DevTools, um den Quellcode Ihrer Website zu ändern, einschließlich der CSS-, HTML- und JavaScript-Dateien.

  5. Laden Sie Ihre Webseite neu, um die Änderungen anzuzeigen.

Ihre Website verwendet möglicherweise ein Buildsystem, das Sie ausführen müssen, bevor Sie die Änderungen sehen können. Webentwickler verwenden häufig ein Buildsystem, das auf gespeicherte Änderungen in den Quellcodedateien überwacht. Wenn Sie eine Änderung an einer Quellcodedatei speichern, erstellt das Buildsystem diese Änderungen und aktualisiert dann automatisch die Seite im Browser.

Wenn Sie ein solches automatisiertes Buildsystem verwenden und eine Änderung an einer Quelldatei im Tool Quellen vornehmen und speichern, werden diese Änderungen automatisch auf die gerenderte Webseite angewendet.

Einschränkungen des Arbeitsbereichsfeatures mit transformiertem Quellcode

Wenn Sie ein modernes Framework verwenden, kann es Ihren Quellcode aus einem Format transformieren, das einfach zu verwalten ist, in ein Format, das für die schnellstmögliche Ausführung optimiert ist. Die Registerkarte Arbeitsbereich im Tool Quellen ist in der Regel in der Lage, den optimierten Code wieder dem ursprünglichen Quellcode zuzuordnen, indem Quellzuordnungen für JavaScript und CSS verwendet werden. Es gibt jedoch viele Unterschiede in der Art und Weise, wie jedes Framework Quellzuordnungen verwendet.

DevTools unterstützt nicht jede Frameworkvariation. Wenn bei der Verwendung von Arbeitsbereichen mit dem Framework Ihrer Wahl Probleme auftreten oder Sie frameworkspezifische Schritte identifizieren, die erforderlich sind, wenden Sie sich an die Verwendung, indem Sie ein Problem im MicrosoftEdge/DevTools-Repository öffnen.

Bearbeiten von CSS mithilfe der Registerkarte "Formatvorlagen" im Tool "Elemente" bei Verwendung der Registerkarte "Arbeitsbereich" des Tools "Quellen"

Wenn Sie einen Arbeitsbereich verwenden, können Sie css in einigen Fällen auf der Registerkarte Formatvorlagen im Tool Elemente bearbeiten und die Änderungen in der zugeordneten Datei auf dem Datenträger speichern lassen:

  • Änderungen, die Sie auf der Registerkarte Formatvorlagen im Tool Elemente vornehmen, werden in der CSS-Datei auf dem Datenträger gespeichert, wenn DevTools ein Stylesheet auf der Webseite und der Datei im Arbeitsbereich zugeordnet hat, z. B. durch eine Quellzuordnung oder durch übereinstimmende Inhalte.

    Wenn Sie ein automatisches Buildsystemframework verwenden, werden Änderungen an Ihrer Quelldatei gespeichert, wenn DevTools das Stylesheet mithilfe einer Quellzuordnung der Arbeitsbereichsdatei zuordnen konnte.

    Abhängig vom von Ihnen verwendeten automatisierten Buildsystem oder Framework können DevTools möglicherweise Änderungen auf dem Datenträger speichern, wenn kein Buildschritt oder ein Buildschritt und eine Quellzuordnung vorhanden sind. Die Registerkarte Formatvorlagen ist der CSS-Datei auf dem Datenträger zugeordnet, sodass Änderungen auf der Registerkarte Formatvorlagen auf dem Datenträger gespeichert werden.

  • Änderungen, die Sie auf der Registerkarte Formatvorlagen im Tool Elemente vornehmen, werden nicht in der CSS-Datei auf dem Datenträger gespeichert, wenn das Stylesheet nicht einer Arbeitsbereichsdatei zugeordnet ist. Beim Bearbeiten von CSS auf der Registerkarte Formatvorlagen des Tools Elemente gehen Änderungen verloren. Die Änderungen werden nicht auf dem Datenträger gespeichert.

Wenn Sie einen Arbeitsbereich verwenden, bearbeiten Sie den CSS-Code im Tool Quellen (nicht im Tool Elemente ), da die von Ihnen bearbeiteten Quelldateien möglicherweise von einem Buildskript erstellt oder kompiliert werden, bevor sie von Ihrem lokalen Server bereitgestellt werden. Wenn Sie im Tool Elemente bearbeiten, bearbeiten Sie möglicherweise die kompilierte und erstellte Version der Datei, nicht die Quelldatei.

Wenn Sie einen Arbeitsbereich verwenden:

  1. Bearbeiten Sie die Datei im Tool Quellen .
  2. Speichern Sie die Änderung.
  3. Erstellen Sie erneut. Einige Buildsysteme tun dies automatisch, wenn sie eine Änderung erkennen.
  4. Laden Sie die Seite neu. Einige Server tun dies automatisch, wenn sie eine Änderung erkennen.

Einschränkungen der Registerkarte "Formatvorlagen" des Tools "Elemente"

Die Verwendung der Registerkarte Formatvorlagen des Tools "Elemente" funktioniert möglicherweise nicht immer für jedes Szenario. Angenommen, Ihr Projekt verwendet ein Framework oder einen Vorprozessor zum Schreiben von CSS, in dem Sie CSS nicht direkt schreiben, aber Sie schreiben das Äquivalent von CSS mithilfe einer anderen Sprache und einer anderen Dateistruktur. Ein solches Projekt kann ein Buildsystem verwenden, das dann den CSS-ähnlichen Code übersetzt, kompiliert und zu etwas kombiniert, das der Browser verstehen kann.

Ein solches Projekt kann Quellzuordnungen generieren, sodass DevTools Ihnen ermöglicht, Ihre Quelldateien auf der Registerkarte Formatvorlagen des Elements-Tools anzuzeigen und zu bearbeiten. In einigen Fällen funktioniert dies jedoch möglicherweise nicht, oder das Projekt verwendet keine Quellzuordnungen.

In diesem Fall werden alle Änderungen, die Sie auf der Registerkarte Formatvorlagen des Elements-Tools vornehmen, nicht in den Arbeitsbereichsdateien gespeichert. Bearbeiten Sie in diesem Fall ihre Quelldateien stattdessen im Tool Quellen . Im obigen Szenario werden die Dateien, die eine andere Sprache verwenden, auf der Registerkarte Arbeitsbereich des Tools Quellen angezeigt, und Sie können die Quelldateien dort bearbeiten.

Im Hintergrund müssen dann alle gespeicherten Änderungen neu erstellt und kompiliert werden (was automatisch erfolgen kann), und dann sind die Änderungen nach einer Seitenaktualisierung auf der gerenderten Webseite sichtbar (was automatisch erfolgen kann).

Lokale Außerkraftsetzungen sind ein DevTools-Feature, das einem Arbeitsbereich ähnelt. Sie können eine Außerkraftsetzung verwenden, wenn Sie mit Änderungen an einer Webseite experimentieren möchten und die Änderungen über webseitenübergreifende Ladevorgänge hinweg anzeigen müssen, aber Sie sind nicht daran interessiert, Ihre Änderungen dem Quellcode der Webseite zuzuordnen.

Lokale Außerkraftsetzungen speichert die Änderungen, die Sie an einer Webseite vornehmen, in einem Ordner Ihrer Wahl und organisiert sie in einer Ordnerstruktur, die der URL der überschriebenen Ressourcen entspricht.

Das Feature Außerkraftsetzungen speichert eine Kopie der Webseitenressourcen, die Sie in DevTools bearbeiten. Wenn Sie die Seite aktualisieren, lädt Microsoft Edge die lokale geänderte Kopie der Dateien anstelle der Dateien auf dem Server.

Siehe auch:

Dom-Strukturbearbeitungen des Elementtools gehen nach der Aktualisierung verloren.

Um Änderungen an einer HTML-Quelldatei vorzunehmen, müssen Sie die Registerkarte Arbeitsbereich des Quellentools anstelle des Tools Elemente verwenden.

Einschränkungen der DOM-Strukturbearbeitungen des Elements-Tools>:

Im Tool Elemente ist es möglich, die DOM-Darstellung des HTML-Dokuments zu ändern, die die Browser-Engine beim Laden der Seite erstellt hat. Änderungen am DOM können jedoch nicht html-Quelldateien zugeordnet werden. Sie können Änderungen am HTML-Inhalt mithilfe der DOM-Struktur im Tool Elemente vornehmen. Ihre Änderungen an der DOM-Struktur werden jedoch nicht auf dem Datenträger gespeichert und wirken sich nur auf die aktuelle Browsersitzung aus.

Siehe auch:

Einschränkungen der Registerkarte Seite des Quellentools>:

Auf der Registerkarte Seite des Quellentools können Sie keine Änderungen im Dateisystem speichern.

  • Eine HTML-Datei, die über die Registerkarte Seite geöffnet wird, kann nicht bearbeitet werden.
  • Eine CSS- oder JS-Datei, die über die Registerkarte Seite geöffnet wird, kann bearbeitet werden, aber die Bearbeitungen werden nicht über Aktualisierungen der Webseite hinweg beibehalten.

Die folgenden Schritte veranschaulichen, dass Bearbeitungen in der DOM-Struktur des Elements-Tools nicht über Seitenaktualisierungen hinweg beibehalten werden:

  1. Richten Sie die Demo für Arbeitsbereiche wie im Arbeitsbereichstutorial (Registerkarte "Quellentool Arbeitsbereich") beschrieben ein.

  2. Wählen Sie in DevTools das Tool Elemente (</>) aus.

  3. Wählen Sie in der DOM-Struktur im <h1> -Element die Textzeichenfolge DevTools Workspaces Demoaus, löschen Sie sie, geben Sie die Textzeichenfolge I Love Cakeein, und drücken Sie dann die EINGABETASTE. Die gerenderte Webseite zeigt den neuen Überschriftentext I Love Cake an:

    Versuch, HTML aus der DOM-Struktur im Tool Elemente zu ändern

  4. Wählen Sie das Tool Quellen aus, klicken Sie mit der rechten Maustaste auf index.html, und wählen Sie dann In enthaltenem Ordner öffnen aus.

    Explorer oder Finder wird geöffnet.

  5. Öffnen Sie die index.html Datei, die sich in Ihrem /Demos/workspace/ Verzeichnis befindet, in einem Text-Editor, z. B. Visual Studio Code. Die soeben vorgenommene Änderung wird nicht angezeigt. Die Überschrift lautet weiterhin "DevTools Workspaces Demo" anstelle von "I Love Cake".

  6. Aktualisieren Sie im Browser die Demoseite.

    Die Seite wird auf die ursprüngliche Überschrift "DevTools Workspaces Demo" zurückgesetzt, da die DOM-Struktur mit Ihrer Bearbeitung verworfen wurde und das DOM aus der unveränderten index.html Datei in Ihrem /Demos/workspace/ Verzeichnis neu erstellt wurde.

Warum DOM-Strukturbearbeitungen nicht gespeichert werden

Das Ändern der DOM-Struktur im Abschnitt Elemente gemäß dem obigen Abschnitt funktioniert nicht.

  • Die Struktur der Knoten, die im Tool 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 eine Struktur von DOM-Knoten.

  • Wenn die Seite Über JavaScript verfügt, kann dieses JavaScript DOM-Knoten hinzufügen, löschen oder ändern. CSS kann auch das DOM über die content -Eigenschaft ändern.

  • Der Browser verwendet schließlich das DOM, um zu bestimmen, welche Inhalte browserbenutzern präsentiert werden sollen.

  • Daher kann sich der endgültige Zustand der Seite, die Benutzern angezeigt wird, stark von dem HTML-Code unterscheiden, den der Browser abgerufen hat.

  • Dies macht es für DevTools schwierig aufzulösen, wo eine im Elementtool vorgenommene Änderung gespeichert werden soll, da das DOM von HTML, JavaScript und CSS beeinflusst wird.

Kurz gesagt unterscheidet sich die DOM-Struktur, die die Browser-Engine erstellt hat, von dem HTML-Dokument, das vom Server heruntergeladen wurde.

Die grünen "zugeordneten" Punkte werden in Dateien angezeigt

Wenn grüne "zugeordnete" Punkte in Dateien in DevTools nicht mehr angezeigt werden, z. B. auf der Registerkarte Arbeitsbereich ; oder wenn das Tool "Änderungen " keine erwarteten Änderungen zeigt:

  • Wenn DevTools angezeigt wird, klicken Oder klicken Sie mit der rechten Maustaste auf die Schaltfläche Aktualisieren in Microsoft Edge, und wählen Sie dann Harte Aktualisierung (STRG+UMSCHALT+R) aus.

    Ein grüner "zugeordneter" Punkt neben einer Datei in DevTools gibt an, dass DevTools eine Zuordnung zwischen einer Netzwerkressource der Seite, die vom Webserver empfangen wird, und der lokalen Quelldatei in Ihrem /Demos/workspace/ Verzeichnis eingerichtet hat. Die neue Datei, die Sie in DevTools hinzufügen, muss vom Server zurückgegeben werden, damit sie als zugeordnet angegeben wird.

Wenn Sie eine neue .js Datei im Arbeitsbereich hinzufügen und in der hinzugefügten .js Datei ein grüner "Synchronisierungskreis" angezeigt werden soll, und die Datei im Tool "Änderungen " dargestellt wird:

  1. Verweisen Sie in der HTML-Datei auf die hinzugefügte .js Datei, z. B. die Zeile <script src="test.js"></script> innerhalb des <body> Tags.

  2. Stellen Sie sicher, dass die Datei Code .js enthält, z. B. die Zeile console.log('hello from test.js');.

  3. Drücken Sie STRG+S (Windows, Linux) oder BEFEHL+S (macOS). Ihre Änderung wird gespeichert, und das Sternchen verschwindet.

  4. Wenn DevTools angezeigt wird, klicken Oder klicken Sie mit der rechten Maustaste auf die Schaltfläche Aktualisieren in Microsoft Edge, und wählen Sie dann Harte Aktualisierung (STRG+UMSCHALT+R) aus.

Siehe auch:

Weitere Informationen

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.

  • Last updated on