Anzeigen oder Bearbeiten von Quelldateien mit dem Quick Source-Tool

Verwenden Sie das Tool "Schnellquelle ", um Quelldateien anzuzeigen oder zu bearbeiten und gleichzeitig ein anderes Tool als das Tool "Quellen" anzuzeigen. Im Tool "Quick Source" werden immer dieselben Dateien angezeigt, die im Tool "Sources " geöffnet sind.

Das Quick Source-Tool

Der Hauptort zum Anzeigen von Quelldateien in DevTools befindet sich im Tool "Quellen ". Manchmal müssen Sie aber auf andere Tools wie Elements oder Konsole zugreifen, während Sie Ihre Quelldateien anzeigen oder bearbeiten. Verwenden Sie das Quick Source-Tool , das standardmäßig im Bereich "Schnellansicht " am unteren Rand von DevTools geöffnet wird.

Verwenden des Tools "Schnellquelle" in Verbindung mit dem Tool "Quellen"

Um das Quick Source-Tool in der Schnellansicht am unteren Rand von DevTools anzuzeigen, muss in der Aktivitätsleiste oben in DevTools ein anderes Tool als das Tool "Quellen" geöffnet sein.

Das Quick Source-Tool bietet eine alternative Anzeige der Dateien, die im Tool "Quellen" geöffnet sind. Das Quick Source-Tool verfügt über eine Untergruppe von Features. Verwenden Sie das Tool "Quellen ", um alle Features anzuzeigen.

Wenn Sie eine Datei in einem Tool öffnen oder schließen, wird die Datei in dem anderen Tool geöffnet oder geschlossen. In beiden Tools gibt es eine Registerkarte für jede geöffnete Datei.

Bearbeiten Sie lokale Quelldateien in DevTools, indem Sie einen Arbeitsbereichsordner auswählen

Dies ist ein End-to-End-Tutorial aller Schritte zur Demonstration des Quick Source-Tools mithilfe der ToDo-Web-App im MicrosoftEdge / Demos-Repository .

Wenn Sie im Tool "Quellen" einen lokalen Ordner als Arbeitsbereich auswählen, können Sie Dateien aus dem Tool "Quick Source" heraus bearbeiten, während gleichzeitig ein anderes Tool angezeigt wird, und diese Änderungen werden auf Ihrem lokalen Laufwerk gespeichert. Auf diese Weise können Sie Dateien im Quick Source-Tool bearbeiten, während Sie ein anderes Tool wie Elements oder Network verwenden, und Ihre Änderungen werden in der entsprechenden Quelldatei auf Ihrem lokalen Laufwerk gespeichert.

Gehen Sie zum Bearbeiten von Quelldateien im Quick Source-Tool wie folgt vor:

  1. Sie haben lokalen Zugriff auf die Quelldateien der Webseite, z. B. ein geklontes Repository.

  2. Fügen Sie auf der Registerkarte Arbeitsbereich im Tool Quellen (das Toolsymbol Quellen) einen lokalen Ordner mit Quelldateien hinzu.

  3. Öffnen Sie auf der Registerkarte Arbeitsbereich eine Datei, z. B. eine .js Datei.

  4. Wählen Sie in der Aktivitätsleiste ein anderes Tool als das Tool "Quellen " aus, z. B. das Tool "Elemente ".

  5. Öffnen Sie im Bereich "Schnellansicht " am unteren Rand der DevTools das Quick Source-Tool . Die geöffnete .js Datei wird in einem optimierten Editor angezeigt, und das Elementtool wird weiterhin angezeigt.

Diese Schritte werden im folgenden Tutorial beschrieben.

Verwenden lokaler Quelldateien, z. B. eines geklonten Repositorys

Um Änderungen mit dem Quick Source-Tool lokal speichern zu können, benötigen Sie lokale Quelldateien, die mit den Webserverdateien übereinstimmen. Stellen Sie sicher, dass auf dem lokalen Laufwerk Quelldateien vorhanden sind, die mit den vorübergehenden Dateien übereinstimmen, die vom Webserver zurückgegeben werden.

Wenn dies noch nicht geschehen ist, klonen Sie beispielsweise das MicrosoftEdge / Demos-Repository wie folgt auf Ihr lokales Laufwerk:

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

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

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

  4. Klicken Sie auf die Dropdownschaltfläche "Code ".

  5. Klicken Sie auf die Schaltfläche URL in Zwischenablage kopieren .

    Die Schaltfläche

    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.

  6. Angenommen, du hast git installiert, öffne eine Eingabeaufforderung.

  7. 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 eine 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:

Jetzt haben Sie einen lokalen Ordner mit Quelldateien (z. B /demo-to-do/. ), die mit den Dateien auf dem Webserver übereinstimmen.

Fahren Sie mit dem nächsten Abschnitt fort.

Starten eines localhost-Servers

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

  2. Wechseln Sie zum geklonten /demo-to-do/ Verzeichnis, z. B C:\Users\localAccount\GitHub\Demos\demo-to-do\. . .

    Wenn du die git bash-Shell verwendest, ist es eine UNIX-Shell, sodass du selbst unter Windows einen Verzeichnispfad mit Backslashes in Anführungszeichen umschließen oder Schrägstriche anstelle von Backslashes verwenden musst.

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

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

    # Node.js option
cd ~/GitHub/demos/demo-to-do
npx http-server  # Node.js

    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/demo-to-do
python -m SimpleHTTPServer  # Python 2

    # Python 3 option
cd ~/GitHub/demos/demo-to-do
python -m http.server  # Python 3

  5. Öffnen Sie eine Registerkarte in Microsoft Edge, und wechseln Sie zur lokal gehosteten Version der Website. Sie sollten darauf zugreifen können, indem Sie verwenden localhost:8080:

    Die DevTools TODO-App-Demo

    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.

Siehe auch:

Fahren Sie mit dem nächsten Abschnitt fort.

Wählen Sie einen lokalen Ordner mit Quelldateien als Arbeitsbereich aus.

  1. Klicken Sie von oben fort, klicken Sie mit der rechten Maustaste auf die Demo-Webseite, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet.

  2. Wählen Sie in der Aktivitätsleiste oben in DevTools das Tool "Quellen " (das Toolsymbol ") und dann die Registerkarte "Arbeitsbereich " (gruppiert mit der Registerkarte "Seite ") aus, und klicken Sie dann auf der Registerkarte "Arbeitsbereich " auf die Schaltfläche "Ordner hinzufügen ".

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

  3. Navigieren Sie zu einem Ordner, z. B C:\Users\localAccount\GitHub\Demos\demo-to-do. , und klicken Sie dann auf die Schaltfläche Ordner auswählen .

    Am oberen Rand der DevTools wird die Meldung angezeigt, dass DevTools Vollzugriff auf den <Pfad> anfordert.

  4. Klicken Sie auf die Schaltfläche "Zulassen ".

    Die Struktur der demo-to-do Dateien wird auf der Registerkarte "Arbeitsbereich " des Tools "Quellen" angezeigt. Die HTML-, JS- und CSS-Dateien haben einen grünen "zugeordneten" Punkt.

  5. Erweitern Sie auf der Registerkarte Arbeitsbereich die Dateistruktur, und klicken Sie dann auf eine oder mehrere Dateien, z. B to-do.js.

    Die Datei wird im Tool "Quellen" geöffnet:

    Das Tool

Öffnen des Tools "Quick Source" und Bearbeiten einer Datei

Angenommen, Sie möchten weiterhin das Elemente-Tool anzeigen, aber gleichzeitig die Quelldateien anzeigen und bearbeiten, die mit dem Tool "Quellen " geöffnet wurden.

  1. Fahren Sie von oben fort und wählen Sie in der Aktivitätsleiste oben in DevTools ein anderes Tool als das Tool Quellen (das Symbol für das Tool Quellen) aus, z. B. das Tool Elemente (das Toolsymbol für Elemente).

  2. Wenn die Symbolleiste für die Schnellansicht am unteren Rand der DevTools nicht angezeigt wird, drücken Sie ESC.

  3. Klicken Sie auf der Symbolleiste "Schnellansicht " unten in DevTools auf die Schaltfläche "Weitere Tools ", und wählen Sie dann "Schnellquelle" aus.

    Das Quick Source-Tool wird in der Schnellansicht am unteren Rand der DevTools geöffnet:

    Quick Source-Tool mit der geöffneten .js Datei

    todo.js wird angezeigt, da diese Datei im Tool "Quellen " geöffnet ist.

  4. Löschen Sie auf der Demo-Aufgaben-Webseite alle Aufgaben.

  5. Klicken Sie auf den Quick Source-Bereich , und drücken Sie dann Strg+F.

    Im Quick Source-Tool wird die Benutzeroberfläche "Suchen" angezeigt.

  6. Geben Sie keine Aufgaben ein, und drücken Sie dann die Eingabetaste.

  7. Ändere no tasks in der Codezeile zu 0 tasks.

    Auf der Registerkarte "Dateiname" wird ein Sternchen angezeigt.

  8. Drücken Sie STRG+S.

    Das Sternchen wird von der Registerkarte "Dateiname" entfernt.

  9. Aktualisieren Sie die Demo-Webseite (STRG+R).

  10. Wenn sich die gerenderte Webseite nicht von "Nein" in "0" ändert und auf der Registerkarte "JS-Dateiname" kein grüner Punkt "zugeordnet" 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.

    Die gerenderte Webseite ändert sich von "No" in "0", und auf der Registerkarte "JS-Dateiname" befindet sich ein grüner "mapped"-Punkt.

    Eine bearbeitete .js Datei im Quick Source-Tool mit einer aktualisierten Demo-Webseite

Wenn Sie nun die Dateien des Ordners in DevTools bearbeiten, werden die Änderungen nicht nur an der vom Server zurückgegebenen vorübergehenden Datei vorgenommen, sondern auch in den Quelldateien auf Ihrem lokalen Laufwerk gespeichert. Sie können die Datei im Quick Source-Tool bearbeiten und gleichzeitig ein anderes Tool anzeigen (oder im Tool Quellen ).

Dies ist das Ende der Schritte des Tutorials.

Siehe auch:

Öffnen einer Datei über das Befehlsmenü

Wenn Sie eine Datei über das Befehlsmenü öffnen, wird diese Datei sowohl im Quick Source-Tool als auch im Tool "Quellen " geöffnet.

Führen Sie zum Öffnen des Befehlsmenüs eine der folgenden Aktionen aus:

  • Wählen Sie DevTools-Befehl>"Ausführen" anpassen und steuern.

  • Drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS).

  • Klicken Sie auf den Link Befehl ausführen im leeren Quick Source-Tool (oder Quellentool ).

Führen Sie einen der folgenden Schritte aus, um eine Datei mithilfe der Eingabeaufforderung "Datei öffnen " im Befehlsmenü zu öffnen:

  • Tool >"Quellenauswählen"Weitere Optionen (neben der Registerkarte "Seite") >Datei öffnen.

  • Wählen Sie "DevTools>öffnen und anpassen" aus.

  • Drücken Sie Strg+P (Windows, Linux) oder Befehl+P (macOS).

  • Wenn das Tool "Quick Source" (oder das Tool "Quellen ") leer ist, klicken Sie in den Anweisungen im Tool auf den Link Datei öffnen :

    Das Befehlsmenü

    Die Eingabeaufforderung Datei öffnen im Befehlsmenü wird angezeigt.

    Um den Link "Datei öffnen " in den Anweisungen im Bereich anzuzeigen, müssen Sie möglicherweise nach unten scrollen oder die Schnellansicht-Trennlinie nach oben ziehen, um den Schnellansichtsbereich zu vergrößern.

Tastenkombinationen im Quick Source-Tool

Das Quick Source-Tool verfügt über eine optimierte Benutzeroberfläche. Verwenden Sie diese Tastenkombinationen.

  • STRG+F - Suchen.

  • STRG+S - Speichern. Wenn im HTML-, JS- oder CSS-Dateinamen kein grüner "zugeordneter" Punkt mehr vorhanden ist, klicken Sie lange 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.

  • STRG+P – Öffnen Sie eine Datei über das Befehlsmenü. Dies entspricht dem Aufrufen des Tools "Quellen " und dem anschließenden Klicken auf eine Datei auf der Registerkarte "Arbeitsbereich ".

Schließen einer Datei

Um eine Datei zu schließen, klicken Sie auf die Schaltfläche "x " auf der Registerkarte der Datei.

Die Datei wird im Tool "Quick Source" und " Sources " geschlossen.

Siehe auch

  • Zuletzt aktualisiert um