Arbeitsbereichstutorial (Registerkarte "Quellentool Arbeitsbereich")

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

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 vornehmen, auf Ihrem lokalen Computer gespeichert.

Schritt 1: Klonen des Edge-Demos-Repositorys auf Ihrem lokalen Laufwerk

Zunächst richten Sie ein lokales Verzeichnis ein, das die Quelldateien für die Webseite enthält, z. B. die Demowebseite für 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 einer neuen Registerkarte zu MicrosoftEdge/Demos .

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 Eingabeaufforderungsschritt.

   Alternativ können Sie den Quellcodeverwaltungsbereich von Visual Studio Code verwenden, um das Repository zu klonen und den folgenden Eingabeaufforderungsschritt zu ü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:

• Klonen eines Repositorys : GitHub-Dokumentation.

Fahren Sie mit dem nächsten Abschnitt fort.

Schritt 2: Starten des localhost-Servers im Quelldateiverzeichnis der Webseite

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

   Siehe auch:

   • Installieren Sie Node.js und den Knotenpaket-Manager (npm) unter Installieren der DevTools-Erweiterung für Visual Studio Code.

2. Wechseln Sie zu einer Eingabeaufforderung, z. B. zur Git Bash-Shell oder zum Terminalbereich in Microsoft Visual Studio Code.

3. Wechseln Sie zum Verzeichnis des Demos Repositoryverzeichnisses workspaces :

   cd ~/GitHub/Demos/workspaces
   pwd
   

   Ein Verzeichnis, das mit der Registerkarte Arbeitsbereich des Quellentools verwendet werden kann, kann einen beliebigen Namen haben. Dieses Demoverzeichnis heißt /workspaces/.

4. Erstellen Sie einen Arbeitsbranch mit dem Namen "test", und wechseln Sie dazu (um zu vermeiden, dass die Dateien der Demo im Branch "main" geändert werden):

   git checkout -b test
   

   Dies 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) unter 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. Sie greifen in der Regel wie folgt darauflocalhost:8080 zu:

   

   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 unterschiedlich sein.

   Die Webseite DevTools Workspaces Demo wird geöffnet.

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

Siehe auch:

• Ausführen eines einfachen lokalen HTTP-Servers unter Wie richten Sie einen lokalen Testserver ein? unter MDN – zeigt Python an.

Fahren Sie mit dem nächsten Abschnitt fort.

Schritt 3: Hinzufügen eines Arbeitsbereichsordners im Quellentool

Definieren Sie als Nächstes einen Arbeitsbereich in DevTools:

1. Klicken Sie mit der rechten Maustaste auf die lokal gehostete Demo-Webseite für 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 ().

3. Klicken Sie im Bereich Navigator (auf der linken Seite) auf die Registerkarte Arbeitsbereich (die mit der Registerkarte Seite gruppiert ist):

   

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 C:\Users\localAccount\GitHub\Demos\workspaces\. B. .

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

   DevTools fordert Sie auf, ob DevTools Vollzugriff auf Ihr /workspaces/ Verzeichnis gewährt werden soll.

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:

   

Fahren Sie mit dem nächsten Abschnitt fort.

Schritt 4: Speichern einer CSS-Änderung auf dem Datenträger (über die Registerkarte "Formatvorlagen" des Elements-Tools)

Als Nächstes bearbeiten Sie CSS und speichern Änderungen an der Quelldatei. Hier verwenden wir die Registerkarte Formatvorlagen des Tools, unterstützt von den Steuerelementen der Benutzeroberfläche, obwohl wir die CSS-Datei direkt im Datei-Editor der Registerkarte Arbeitsbereich des Quellentools bearbeiten könnten.

Gehen Sie wie folgt vor, um eine Änderung an der CSS-Datei vorzunehmen und sie mithilfe der Registerkarte Formatvorlagen des Tools Elemente auf dem Datenträger zu speichern:

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

   

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 die zugeordnete Datei () neben 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, styles.css in Ihrem /Demos/workspace/ Verzeichnis zugeordnet werden:

   

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 auf h1fuchsia, beginnen Sie mit der Eingabe von Orange, und wählen Sie dann orange aus der Farbliste aus:

   

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

   Explorer oder Finder wird geöffnet.

5. Öffnen Sie die Kopie von styles.css in Ihrem /Demos/workspace/ Verzeichnis in einem Text-Editor, z. B. Visual Studio Code. Die color -Eigenschaft ist jetzt auf die neue Farbe festgelegt, die in diesem Beispiel orange ist. Die Änderung wurde nicht nur in der Kopie der Datei vorgenommen, die vom Webserver zurückgegeben wurde. die Änderung wurde auch in Ihrer 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 während einer Aktualisierung erhalten, da DevTools die Änderung als Sie die Änderung vorgenommen haben, auf dem Datenträger gespeichert hat. Wenn Sie die Seite aktualisiert haben, 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 Farbmuster fucshia klicken, um die Farbauswahl zu öffnen, um eine neue Farbe zu wählen. Der HEX-Wert für die farbe, die Sie auswählen, ist der Farbname.

Fahren Sie mit dem nächsten Abschnitt fort.

Schritt 5: Speichern einer HTML-Änderung auf dem Datenträger (über die Registerkarte "Arbeitsbereich" des Quellentools)

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 Quellentools hinzu, und bearbeiten Sie dann den HTML-Code im Quellentool. (Änderungen an der Quelldatei werden nicht vorgenommen, indem nur der HTML-Code in der DOM-Struktur im Tool Elemente geändert wird.)

Die Registerkarte DevTools-Arbeitsbereich ähnelt der Verwendung eines Editors zum Bearbeiten der HTML-Quelldatei, ermöglicht jedoch das Bearbeiten der HTML-Quelldatei direkt in DevTools.

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

2. Wählen Sie im Bereich Navigator auf der linken Seite auf der Registerkarte Arbeitsbereich (gruppiert mit der Registerkarte Seite ) die Option aus index.html.

   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 index.htmlSternchen angezeigt.

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 index.html Ihrem zugeordneten /Demos/workspace/ Verzeichnis gespeichert wurde:

   

6. Klicken Sie im Tool Quellen mit der rechten Maustaste auf index.html, und wählen Sie dann In enthaltenem Ordner öffnen aus.

   Explorer oder Finder wird geöffnet.

7. Öffnen Sie die Kopie von index.html in Ihrem /Demos/workspace/ Verzeichnis 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 Editor des Quellentools vorgenommen haben, um die Änderung zu bearbeiten index.html und dann gespeichert zu haben, und diese Datei wurde in einem Arbeitsbereich (registerkarte Arbeitsbereich ) zugeordnet, der durch einen grünen "zugeordneten" Punkt auf dem Symbol der Datei angezeigt wird.

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

   • Eine serverseitige Sprache, z. B. Java, Python oder PHP.
   • Ein Standortgenerator, 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 mithilfe eines anderen Typs von Quelldatei, z. B. einer React JS-Quelldatei der Komponente, und erstellen dann neu und laden sie neu (was möglicherweise automatisch geschieht).

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

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

Fahren Sie mit dem nächsten Abschnitt fort.

Schritt 6: Speichern einer JavaScript-Änderung auf dem Datenträger

Weiter oben bearbeiten Sie als Nächstes die JavaScript-Datei der Arbeitsbereichsdemo 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 Quellentools bearbeiten und speichern.

Auf der gerenderten Demo-Webseite können Sie den Link Bearbeiten und Speichern von Dateien in einem Arbeitsbereich (Registerkarte "Quellentool Arbeitsbereich") kursiv formatieren:

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 aus script.js.

   script.js wird auf einer Registerkarte im Editorbereich des Quellentools geöffnet.

3. Fügen Sie im Editorbereich unten in script.jsden folgenden Code hinzu:

   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 in Microsoft Edge mit der rechten Maustaste auf die Schaltfläche Aktualisieren , und wählen Sie dann Harte Aktualisierung (STRG+UMSCHALT+R) aus.

   Der Link Dateien mit Arbeitsbereichen bearbeiten (oder Dateien in einem Arbeitsbereich bearbeiten (Registerkarte Quellentool Arbeitsbereich)) auf der Seite wird jetzt kursiv dargestellt:

   

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:

   

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

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

4. Fügen Sie in test.jsdie Folgende Zeile hinzu: console.log('hello from test.js');

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

6. index.htmlFügen Sie in unter 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 wird gespeichert.

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

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

   

Damit wird 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 Branch zu rückgängig machen, z. B. "main" oder "test".

Siehe auch

• Bearbeiten und Speichern von Dateien in einem Arbeitsbereich (Registerkarte "Quellen"-Tool "Arbeitsbereich")
• Erste Schritte beim Anzeigen und Ändern von CSS
• Erste Schritte beim Debuggen von JavaScript

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