Lernprogramm für den Arbeitsbereich (Tool "Quellen" Registerkarte "Arbeitsbereich")

Führen Sie die folgenden Schritte aus, um DevTools als IDE zu verwenden, z. B. Webseitenbearbeitungen auf der Registerkarte Arbeitsbereich des Tools "Quellen", um Änderungen an den Quelldateien auf dem Datenträger zu speichern.

Sie können diese Schritte lesen oder ausführen, die zeigen, wie Sie einen Arbeitsbereich in DevTools einrichten und verwenden. Nachdem Sie einen Arbeitsbereich eingerichtet haben, werden die Änderungen, die Sie mithilfe von DevTools an den Dateien im Arbeitsbereich vorgenommen haben, auf Ihrem lokalen Computer gespeichert.

Schritt 1: Klonen Sie das Edge Demos-Repository auf Ihr lokales Laufwerk

Zunächst richten Sie ein lokales Verzeichnis ein, das die Quelldateien für die Webseite enthält, z. B. die Demo-Webseite Arbeitsbereiche.

Klonen Sie das MicrosoftEdge / Demos-Repository wie folgt auf Ihr lokales Laufwerk, einschließlich des /workspaces/ Demoordners:

  1. Falls noch nicht geschehen, laden Sie Git herunter und installieren Sie es.

  2. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zum MicrosoftEdge / Demos-Repository.

  3. Klicken Sie auf die Dropdownschaltfläche "Code " und dann auf die Schaltfläche "URL in Zwischenablage kopieren ".

    Die URL wird in die Zwischenablage kopiert: https://github.com/MicrosoftEdge/Demos.git

    Wenn Sie GitHub Desktop installiert haben, klicken Sie auf Mit GitHub Desktop öffnen , um das Repository zu klonen, und überspringen Sie den folgenden Schritt zur Eingabeaufforderung.

    Alternativ können Sie den Quellcodeverwaltungsbereich von Visual Studio Code verwenden, um das Repository zu klonen und den folgenden Schritt zur Eingabeaufforderung überspringen.

  4. Öffnen Sie eine Eingabeaufforderung, z. B. git bash.

  5. Klonen Sie das Repository auf Ihr lokales Laufwerk und geben Sie die URL-Zeichenfolge ein, die Sie aus dem GitHub-Repository kopiert haben. Wenn Sie die git bash-Eingabeaufforderung verwenden:

    # Example location where the repo directory will be added:
cd ~/GitHub
git clone https://github.com/MicrosoftEdge/Demos.git

Ausführliche Informationen zum Klonen eines Repositorys finden Sie unter:

Fahren Sie mit dem nächsten Abschnitt fort.

Schritt 2: Starten Sie den localhost-Server im Verzeichnis der Webseitenquelldateien

  1. Falls noch nicht geschehen, installieren Sie eine aktuelle Version von Node.js und npm aus Node.js.

    Siehe auch:

  2. Wechseln Sie zu einer Eingabeaufforderung, z. B. die git bash-Shell oder den Terminalbereich in Microsoft Visual Studio Code.

  3. Wechsle in das Verzeichnis des Demos Repositoryverzeichnisses workspaces :

    cd ~/GitHub/Demos/workspaces
pwd

    Ein Verzeichnis, das mit der Registerkarte Arbeitsbereich des Tools "Quellen" verwendet wird, kann einen beliebigen Namen haben. Dieses Demoverzeichnis heißt /workspaces/.

  4. Erstelle einen funktionierenden Zweig mit dem Namen "test" und wechsle zu ihm (um zu vermeiden, dass die Dateien der Demo im "Hauptzweig" geändert werden):

    git checkout -b test

    Das entspricht Folgendem:

    git branch test
git switch test

  5. Führen Sie einen der folgenden Befehle aus, um den Webserver zu starten:

    # Node.js option
npx http-server

    Weitere Informationen und Optionen finden Sie unter Starten des Servers (npx http-server) in Installieren der DevTools-Erweiterung für Visual Studio Code.

    # Python 2 option
cd ~/GitHub/demos/workspaces
python -m SimpleHTTPServer

    # Python 3 option
cd ~/GitHub/demos/workspaces
python -m http.server

  6. Öffnen Sie eine Registerkarte in Microsoft Edge, und wechseln Sie zur lokal gehosteten Version der Website. In der Regel greifen Sie darauf zu, indem Sie zur folgenden Seite wechselnlocalhost:8080:

    Die Demo zu DevTools-Arbeitsbereichen

    Eine weitere gängige äquivalente URL ist http://0.0.0.0:8080. Die Standardportnummer für die Python-Serveroption lautet 8000. Die genaue Portnummer kann abweichen.

    Die Demo-Webseite der DevTools-Arbeitsbereiche wird geöffnet.

    (Der Link in der neuesten Demo könnte entweder "Datei mit Arbeitsbereichen bearbeiten" oder "Dateien in einem Arbeitsbereich bearbeiten und speichern (Quellentool, Registerkarte "Arbeitsbereich)"."

Siehe auch:

Fahren Sie mit dem nächsten Abschnitt fort.

Schritt 3: Hinzufügen eines Arbeitsbereichsordners im Tool "Quellen"

Definieren Sie als Nächstes einen Arbeitsbereich in DevTools:

  1. Klicken Sie mit der rechten Maustaste auf die Demo-Webseite der lokal gehosteten DevTools-Arbeitsbereiche, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS).

    DevTools wird geöffnet.

  2. Klicken Sie auf die Registerkarte Quellen (Werkzeugsymbole Quellen).

  3. Klicken Sie im Navigatorbereich (links) auf die Registerkarte Arbeitsbereich (gruppiert mit der Registerkarte Seite ):

    Die Registerkarte

  4. Klicken Sie auf die Schaltfläche "Ordner hinzufügen ".

    Das Dialogfeld "Ordner auswählen " wird geöffnet.

  5. Wechseln Sie zu dem geklonten /Demos/workspace/ Verzeichnis, das Sie erstellt haben. Geben Sie beispielsweise im Textfeld Ordner: den Pfad ein, z. B C:\Users\localAccount\GitHub\Demos\workspaces\. . .

  6. Klicken Sie auf die Schaltfläche "Ordner auswählen ".

    DevTools fragt Sie, ob Sie DevTools Vollzugriff auf Ihr /workspaces/ Verzeichnis gewähren möchten.

  7. Klicken Sie auf die Schaltfläche "Zulassen ", um DevTools die Berechtigung zum Lesen und Schreiben in das Verzeichnis zu erteilen.

    Auf der Registerkarte "Arbeitsbereich " befinden sich Seitensymbole mit einem grünen "zugeordneten" Punkt, für index.html, script.jsund styles.css. Der grüne "zugeordnete" Punkt 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 Registerkarte

Fahren Sie mit dem nächsten Abschnitt fort.

Schritt 4: Speichern einer CSS-Änderung auf der Festplatte (über die Registerkarte "Formatvorlagen" des Elemente-Tools)

Als Nächstes bearbeiten Sie CSS und speichern die Änderungen an der Quelldatei. Wir verwenden hier die RegisterkarteStile des Elemente-Tools, unterstützt von den Steuerelementen der Benutzeroberfläche, obwohl wir die CSS-Datei direkt im Dateieditor der Registerkarte Arbeitsbereich des Quellen-Tools bearbeiten können.

So nehmen Sie eine Änderung an der CSS-Datei vor und speichern sie auf der Registerkarte "Formatvorlagen" des Tools "Elemente":

  1. Wählen Sie im Tool Quellen auf der Registerkarte Arbeitsbereich (gruppiert mit der Registerkarte Seite ) aus styles.css , um es im Editor-Bereich zu öffnen. Die color Eigenschaft des h1 Elements ist festgelegt auf fuchsia:

    Anzeigen von styles.css in einem Text-Editor

  2. Wählen Sie das Tool "Elemente)"; Erweitern Sie dann in der DOM-Struktur das <body> Element, und wählen Sie dann das <h1> Element aus.

    Im Bereich "Formatvorlagen" werden die CSS-Regeln angezeigt, die auf das <h1> Element angewendet werden. Das Symbol für zugeordnete Datei (Symbol für zugeordnete Datei) daneben styles.css:1 ist eine Seite mit einem grünen "zugeordneten" Punkt. Der grüne "zugeordnete" Punkt bedeutet, dass alle Änderungen, die Sie an dieser CSS-Regel vornehmen, in Ihrem /Demos/workspace/ Verzeichnis zugeordnet styles.css sind:

    Das Symbol

  3. Ändern Sie den Wert der color Eigenschaft des <h1> Elements in orange. Wählen Sie dazu das <h1> Element in der DOM-Struktur aus. Klicken Sie in der CSS-Regel für h1, klicken Sie fuchsiaauf , beginnen Sie mit der Eingabe von Orange, und wählen Sie dann Orange aus der Farbliste aus:

    Ändern der Farbeigenschaft in styles.css

  4. Wählen Sie das Tool "Quellen" aus, klicken Sie mit der rechten Maustaste darauf styles.css, und wählen Sie dann "In enthaltendem Ordner öffnen" aus.

    Explorer oder Finder wird geöffnet.

  5. Öffne die Kopie davon styles.css , die sich in deinem /Demos/workspace/ Verzeichnis befindet, in einem Text-Editor, z. B. Visual Studio Code. Die color Eigenschaft wird nun auf die neue Farbe festgelegt, die in diesem Beispiel Orange ist. Die Änderung wurde nicht nur in der Kopie der vom Webserver zurückgegebenen Datei vorgenommen; Die Änderung wurde auch in der zugeordneten Datei in Ihrem /Demos/workspace/ Arbeitsbereichsverzeichnis vorgenommen.

  6. Aktualisieren Sie die Seite.

Die Farbe des <h1> Elements ist weiterhin auf die neue Farbe festgelegt. Die Änderung bleibt über eine Aktualisierung hinweg erhalten, da DevTools die Änderung beim Ausführen der Änderung auf dem Datenträger gespeichert hat. Beim Aktualisieren der Seite hat Ihr lokaler Server die geänderte Kopie der Datei vom Datenträger bereitgestellt.

Tipp: Sie können die Farbe auch ändern, indem Sie auf das Fucshia-Farbfeld klicken, um die Farbauswahl zu öffnen und eine neue Farbe auszuwählen. Der HEX-Wert für die Farbe, die Sie auswählen, ist der Name der Farbe.

Fahren Sie mit dem nächsten Abschnitt fort.

Schritt 5: Speichern einer HTML-Änderung auf der Festplatte (über die Registerkarte "Arbeitsbereich" des Tools "Quellen")

Bearbeiten Sie als Nächstes den HTML-Code, und speichern Sie die Änderungen an der Quelldatei. Um Änderungen an der HTML-Datei der Webseite zu speichern, fügen Sie den Quellcodeordner auf der Registerkarte Arbeitsbereich des Tools "Quellen" hinzu, und bearbeiten Sie dann den HTML-Code im Tool "Quellen". (Änderungen an der Quelldatei werden nicht vorgenommen, indem einfach der HTML-Code in der DOM-Struktur im Elemente-Tool geändert wird.)

Die Registerkarte "DevTools-Arbeitsbereich " ähnelt der Verwendung eines Editors zum Bearbeiten der HTML-Quelldatei, ermöglicht jedoch die direkte Bearbeitung der HTML-Quelldatei in DevTools.

  1. Klicken Sie in DevTools auf die Registerkarte Quellen (Quellentoolsymbol).

  2. Wählen Sie im Navigationsbereich auf der linken Seite auf der Registerkarte Arbeitsbereich (gruppiert mit der Registerkarte Seite ) die Option index.htmlaus.

    Die Registerkarte index.html wird im Tool "Quellen" geöffnet.

  3. Ersetzen Sie im <h1> Tag "DevTools Workspaces Demo" durch "I Love Cake".

    Neben wird ein Sternchen angezeigt index.html.

  4. Drücken Sie Strg+S (Windows, Linux) oder Befehl+S (macOS).

    Ihre Änderung wird gespeichert, und das Sternchen verschwindet.

    Sie haben die Änderung in der Dateiauflistung und nicht in der DOM-Struktur im Tool "Elemente" vorgenommen.

  5. Aktualisieren Sie die Seite. Die Überschrift auf der gerenderten Seite ändert sich in "I Love Cake", da diese Zeichenfolge in Ihrem zugeordneten /Demos/workspace/ Verzeichnis gespeichert index.html wurde:

    Ändern von HTML im Tool

  6. Klicken Sie im Tool "Quellen" mit der rechten Maustaste auf index.htmlund wählen Sie dann "In enthaltendem Ordner öffnen" aus.

    Explorer oder Finder wird geöffnet.

  7. Öffne die Kopie davon index.html , die sich in deinem /Demos/workspace/ Verzeichnis befindet, in einem Text-Editor, z. B. Visual Studio Code.

    Das <h1> Element enthält den neuen Text "I Love Cake", da Sie die Änderung mit dem Quellen-Editor index.html vorgenommen und dann gespeichert haben und diese Datei in einem Arbeitsbereich (der Registerkarte Arbeitsbereich ) zugeordnet wurde, was durch einen grünen "zugeordneten" Punkt auf dem Symbol der Datei gekennzeichnet ist.

    Viele Entwickler schreiben HTML nicht direkt, sondern verwenden Ansätze wie:

    • Eine serverseitige Sprache wie Java, Python oder PHP
    • Ein Websitegenerator, z. B. Eleventy.
    • Ein clientseitiges Framework, das JavaScript-Code verwendet.
    • Eine andere Markupsprache als HTML, z. B. Markdown

    Dies bedeutet, dass in der Praxis nur wenige Entwickler HTML-Dateien auf der Registerkarte Arbeitsbereich ändern. Die meisten Entwickler erstellen HTML-Dateien, indem sie eine andere Art von Quelldatei verwenden, z. B. eine JS-Quelldatei der React-Komponente, und erstellen dann neu und laden sie neu (was automatisch passieren kann).

  8. Klicken Sie lange oder mit der rechten Maustaste auf die Schaltfläche "Aktualisieren " in Microsoft Edge, und wählen Sie dann "Harte Aktualisierung " (STRG+UMSCHALT+R) aus.

    Auf der Registerkarte Arbeitsbereich werden grüne "zugeordnete" Punkte auf allen HTML-, CSS- und JS-Dateien angezeigt.

Fahren Sie mit dem nächsten Abschnitt fort.

Schritt 6: Speichern einer JavaScript-Änderung auf der Festplatte

Als Nächstes bearbeiten Sie die JavaScript-Datei der Workspace-Demo und speichern die Änderungen an der Quelldatei. Um Änderungen an einer JavaScript-Quelldatei zu speichern, können Sie DevTools wie eine IDE verwenden, nachdem Sie den Quellcodeordner auf der Registerkarte Arbeitsbereich des Tools "Quellen" hinzugefügt haben. Anschließend können Sie die JavaScript-Datei im Editor des Tools "Quellen " bearbeiten und speichern.

Um auf der gerenderten Demowebseite den Hyperlink "Dateien in einem Arbeitsbereich bearbeiten und speichern" (Quellentool, Registerkarte "Arbeitsbereich") kursiv zu gestalten:

  1. Wählen Sie in DevTools das Tool "Quellen " und dann die Registerkarte "Arbeitsbereich " aus, die mit der Registerkarte "Seite" gruppiert ist.

  2. Wählen Sie auf der Registerkarte Arbeitsbereich die Option script.jsaus.

    script.js Wird in einer Registerkarte im Editorbereich des Tools "Quellen " geöffnet.

  3. Fügen Sie im Editor-Fensterbereich den folgenden Code am Ende script.jshinzu: 

    document.querySelector('a').style = 'font-style:italic';

    Auf der script.js Registerkarte wird ein Sternchen angezeigt.

  4. Drücken Sie Strg+S (Windows, Linux) oder Befehl+S (macOS).

    script.js wird gespeichert, und das Sternchen wird von der script.js Registerkarte entfernt.

  5. Aktualisieren Sie die Seite.

  6. Wenn in der HTML-, JS- oder CSS-Datei kein grüner "zugeordneter" Punkt mehr vorhanden ist, klicken Sie lange oder mit der rechten Maustaste auf die Schaltfläche "Aktualisieren " in Microsoft Edge, und wählen Sie dann "Harte Aktualisierung " (STRG+UMSCHALT+R) aus.

    Der Hyperlink "Dateien mit Arbeitsbereichen bearbeiten" (oder "Bearbeiten und Speichern von Dateien in einem Arbeitsbereich (Quellentool, Registerkarte "Arbeitsbereich)") auf der Seite ist jetzt kursiv:

    Der Link auf der Seite ist jetzt kursiv geschrieben

Fahren Sie mit dem nächsten Abschnitt fort.

Schritt 7: Hinzufügen einer .js Datei mithilfe von DevTools

  1. Klicken Sie im Tool Quellen auf der Registerkarte Arbeitsbereich mit der rechten Maustaste auf den /workspaces/ Ordner, und wählen Sie dann das Menüelement Neue Datei aus.

    Eine Datei mit dem Namen NewFile wird hinzugefügt:

    Eine neue Datei, die über die Registerkarte Arbeitsbereich hinzugefügt wurde

  2. Klicken Sie NewFile mit der rechten Maustaste auf die Registerkarte Arbeitsbereich , und wählen Sie dann Umbenennen aus.

  3. Benennen Sie die Datei in test.js".

  4. Fügen test.jsSie in die Zeile hinzu: console.log('hello from test.js');

  5. Wählen Sie im Tool Quellen auf der Registerkarte Arbeitsbereich die Option index.htmlaus.

  6. Fügen Sie in index.htmlunter der Zeile <script src="./script.js" defer></script>die Zeile hinzu: <script src="./test.js" defer></script>

  7. Drücken Sie Strg+S (Windows, Linux) oder Befehl+S (macOS).

    index.html gespeichert wird.

  8. Klicken Sie lange oder mit der rechten Maustaste auf die Schaltfläche "Aktualisieren " in Microsoft Edge, und wählen Sie dann "Harte Aktualisierung " (STRG+UMSCHALT+R) aus.

    Auf der Registerkarte Arbeitsbereich werden grüne "zugeordnete" Punkte auf allen HTML-, CSS- und JS-Dateien angezeigt:

    Hinzufügen eines Verweises auf die JS-Datei in der HTML-Datei und grüner

Damit ist das Tutorial abgeschlossen.

Wenn Sie die Änderungen in Ihrem /workspace/ Ordner rückgängig machen möchten, können Sie Git-Befehle an einer Eingabeaufforderung verwenden oder GitHub Desktop verwenden, um die Änderungen im aktuellen Zweig (z. B. "main" oder "test") rückgängig zu machen.

Siehe auch

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 Begriffen verwendet werden. Die Originalseite findet sich hier und wurde von Kayce Basques verfasst.

Creative Commons License Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.

  • Zuletzt aktualisiert um