Freigeben über

Übersicht über das Tool „Quellen“

Verwenden Sie das Tool Quellen , um Front-End-JavaScript-Code anzuzeigen, zu ändern und zu debuggen und um die Ressourcen zu untersuchen, aus denen die aktuelle Webseite besteht.

Ausführlicher Inhalt:

Die Bereiche Navigator, Editor und Debugger

Das Tool Quellen verfügt über drei Bereiche:

Bereich Aktionen
Navigatorbereich Navigieren Sie zwischen den Ressourcen, die vom Server zurückgegeben werden, um die aktuelle Webseite zu erstellen. Wählen Sie Dateien, Bilder und andere Ressourcen aus, und zeigen Sie deren Pfade an. Richten Sie optional einen lokalen Arbeitsbereich ein, um Änderungen direkt an Quelldateien zu speichern.
bereich "Editor" Zeigen Sie JavaScript, HTML, CSS und andere Dateien an, die vom Server zurückgegeben werden. Nehmen Sie experimentelle Änderungen an JavaScript oder CSS vor. Ihre Änderungen werden beibehalten, bis Sie die Seite aktualisieren, oder werden nach der Seitenaktualisierung beibehalten, wenn Sie in einer lokalen Datei mit Arbeitsbereichen speichern. Wenn Sie Arbeitsbereiche oder Außerkraftsetzungen verwenden, können Sie auch HTML-Dateien bearbeiten.
Debuggerbereich Verwenden Sie den JavaScript-Debugger, um Haltepunkte festzulegen, die Ausführung von JavaScript anzuhalten und den Code schrittweise zu durchlaufen, einschließlich aller änderungen, die Sie vorgenommen haben, während Sie sich die von Ihnen angegebenen JavaScript-Ausdrücke ansehen. Sehen Sie sich die Werte von Variablen an, die sich im Gültigkeitsbereich der aktuellen Codezeile befinden, und ändern Sie sie manuell.

Die folgende Abbildung zeigt den Bereich Navigator mit einem roten Feld in der oberen linken Ecke von DevTools, den Editor Bereich oben rechts hervorgehoben und den Debuggerbereich unten hervorgehoben. Ganz links befindet sich der Standard Teil des Browserfensters, in dem die gerenderte Webseite abgeblendet angezeigt wird, da der Debugger an einem Haltepunkt angehalten ist:

Die Bereiche des Quellentools im schmalen Layout

Wenn DevTools breit ist, wird der Debuggerbereich auf der rechten Seite platziert und umfasst Bereich und Überwachung:

Navigieren, Anzeigen, Bearbeiten und Debuggen von JavaScript, das vom Server zurückgegeben wird

Um die Größe des Quellentools zu maximieren, koppeln Sie DevTools in einem separaten Fenster aus, und verschieben Sie optional das DevTools-Fenster auf einen separaten Monitor. Weitere Informationen finden Sie unter Ändern der DevTools-Platzierung (Ausdocken, Andocken nach unten, Andocken auf der linken Seite).

Informationen zum Laden der oben gezeigten Debugdemo-Webseite finden Sie weiter unten unter Der grundlegende Ansatz für die Verwendung eines Debuggers.

Verwenden des Navigatorbereichs zum Auswählen von Dateien

Verwenden Sie den Bereich Navigator (auf der linken Seite), um zwischen den Ressourcen zu navigieren, die vom Server zurückgegeben werden, um die aktuelle Webseite zu erstellen. Wählen Sie Dateien, Bilder und andere Ressourcen aus, und zeigen Sie deren Pfade an.

Bereich

Der Bereich Navigator enthält die folgenden Registerkarten:

Registerkarte Beschreibung Dokumente
Page Zeigen Sie die Ressourcen an, die der Browser vom Server oder Dateisystem heruntergeladen hat, überprüfen Sie deren Inhalt, und debuggen Sie Code. Verwenden der Registerkarte "Seite" zum Untersuchen von Ressourcen, die die aktuelle Webseite erstellen
Arbeitsbereich Zeigen Sie lokale Dateien in DevTools an, um DevTools als integrierte Entwicklungsumgebung (Integrated Development Environment, IDE) im Browser zu verwenden. Fügen Sie dem Arbeitsbereich einen lokalen Ordner hinzu, um Mit DevTools Dateien zu bearbeiten und Änderungen auf dem Datenträger zu speichern.
Außerkraftsetzungen Experimentieren Sie mit Änderungen an einer Webseite, und behalten Sie die Änderungen bei, nachdem Sie die Webseite aktualisiert haben, ohne ihre Änderungen dem Quellcode der Webseite zuzuordnen. Verwenden der Registerkarte Außerkraftsetzungen zum Überschreiben von Serverdateien mit lokalen Dateien
Inhaltsskripts Anzeigen von Inhaltsskripts, die von einer Microsoft Edge-Erweiterung geladen wurden. Verwenden der Registerkarte "Inhaltsskripts" für Microsoft Edge-Erweiterungen
Codeausschnitte Erstellen und speichern Sie JavaScript-Codeausschnitte, damit Sie ganz einfach einen JavaScript-Codeausschnitt auf einer beliebigen Webseite ausführen können. Verwenden der Registerkarte "Codeausschnitte" zum Ausführen von JavaScript-Codeausschnitten auf einer beliebigen Seite

Um auf ausgeblendete Registerkarten des Navigatorbereichs zuzugreifen, klicken Sie auf die Schaltfläche Weitere Registerkarten (Weitere Registerkarten).

Details finden Sie unten. Weiter unten: Verwenden des Befehlsmenüs zum Öffnen von Dateien.

Verwenden der Registerkarte "Seite" zum Untersuchen von Ressourcen, die die aktuelle Webseite erstellen

Auf der Registerkarte Seite im Tool Quellen werden die Ressourcen angezeigt, die von der aktuellen Webseite verwendet werden, z. B. das HTML-Dokument der Webseite, JavaScript-Dateien, CSS-Dateien oder Bilder. Die auf der Registerkarte Seite angezeigten Ressourcen sind in einer Struktur angeordnet, die dem Dateisystem- oder Serverpfad entspricht, aus dem sie heruntergeladen wurden.

Verwenden Sie die Registerkarte Seite , um die Ressourcen anzuzeigen, die der Browser vom Server oder Dateisystem heruntergeladen hat, deren Inhalt zu überprüfen und Code zu debuggen.

Registerkarte

Um eine Datei im bereich Editor anzuzeigen, wählen Sie auf der Registerkarte Seite eine Datei aus. Für ein Bild wird eine Vorschau des Bilds angezeigt.

Um die URL oder den Pfad für eine Ressource anzuzeigen, zeigen Sie auf die Ressource.

Um eine Datei auf eine neue Registerkarte des Browsers zu laden oder andere Aktionen anzuzeigen, klicken Sie mit der rechten Maustaste auf den Dateinamen.

Symbole auf der Registerkarte "Seite"

Auf der Registerkarte Seite werden die folgenden Symbole verwendet:

  • Das Fenstersymbol stellt zusammen mit der Bezeichnung topden Standard Dokumentrahmen dar, bei dem es sich um einen HTML-Frame handelt: Das Fenstersymbol
  • Das Cloudsymbol stellt einen Ursprung dar: Das Cloudsymbol
  • Das Ordnersymbol stellt ein Verzeichnis dar: Das Ordnersymbol
  • Das Seitensymbol stellt eine Ressource dar: Das Seitensymbol
Gruppieren von Dateien nach Ordner oder als flache Liste

Auf der Registerkarte Seite werden Dateien oder Ressourcen nach Server und Verzeichnis gruppiert oder als flache Liste angezeigt.

So ändern Sie die Gruppierung von Ressourcen:

  1. Klicken Sie neben den Registerkarten im Bereich Navigator (links) auf die Schaltfläche ... (Weitere Optionen). Ein Menü wird angezeigt.
  2. Aktivieren oder deaktivieren Sie die Option Nach Ordner gruppieren .

Fügen Sie dem Arbeitsbereich einen lokalen Ordner hinzu, um Mit DevTools Dateien zu bearbeiten und Änderungen auf dem Datenträger zu speichern.

Verwenden Sie die Registerkarte Arbeitsbereich im Tool Quellen , um lokale Dateien in DevTools anzuzeigen und zu bearbeiten. Die Registerkarte Arbeitsbereich ist nützlich, wenn Sie in Verbindung mit einem lokalen Webserver verwendet werden, da Sie dann Ihre lokale Website in Edge laden und ihre Quelldateien in DevTools bearbeiten können.

Wenn Sie der Registerkarte Arbeitsbereich einen Ordner hinzufügen, werden die Dateien und Unterordner in diesem Ordner auf der Registerkarte angezeigt, und Sie können Dateien öffnen, um sie anzuzeigen und zu bearbeiten.

Auf der Registerkarte Arbeitsbereich werden nicht die Ressourcen angezeigt, die der Browser heruntergeladen hat, um die Webseite anzuzeigen. Auf der Registerkarte Arbeitsbereich werden nur die Ordner und Dateien angezeigt, die sich in den lokalen Ordnern befinden, die Sie hinzugefügt haben.

In devTools wird in einer Datei ein grüner "zugeordneter" Punkt angezeigt, für die DevTools eine Zuordnung zwischen der Arbeitsbereichsdatei und der Webseitenressource finden konnte. Wenn die Seite beispielsweise ein Stylesheet mit dem Namen styles.css verwendet und der Arbeitsbereich eine Datei mit dem Namen styles.cssenthält, ordnet DevTools die Dateien einander zu und zeigt einen grünen "zugeordneten" Punkt an.

Der grüne "zugeordnete" Punkt gibt an, dass Änderungen, die Sie an Webseitenressourcen vornehmen, gespeichert werden. Wenn Sie beispielsweise auf der Registerkarte Formatvorlagen des Tools Elemente eine Änderung vornehmen, bearbeiten Sie das Stylesheet der Webseite (nicht die Datei). Wenn der CSS-Dateiname, der auf der Registerkarte Formatvorlagen angezeigt wird, einen grünen "zugeordneten" Punkt aufweist, wurde dieses Stylesheet einer Datei in Ihrem Arbeitsbereich zugeordnet, und Ihre Änderungen gehen nicht verloren.

Registerkarte

Wenn Sie eine Datei im Tool Quellen bearbeiten, werden Ihre Änderungen standardmäßig verworfen, wenn Sie die Webseite aktualisieren. Das Tool Quellen arbeitet mit einer Kopie der Front-End-Ressourcen, die vom Webserver zurückgegeben werden. Wenn Sie diese Vom Server zurückgegebenen Front-End-Dateien ändern, werden die Änderungen nicht beibehalten, da Sie die Quelldateien nicht geändert haben. Sie müssen ihre Änderungen auch in Ihrem tatsächlichen Quellcode anwenden und dann erneut auf dem Server bereitstellen.

Wenn Sie hingegen einen Arbeitsbereich verwenden, werden Änderungen, die Sie am Front-End-Code vornehmen, beibehalten, wenn Sie die Webseite aktualisieren. Wenn Sie bei einem Arbeitsbereich den vom Server zurückgegebenen Front-End-Code bearbeiten, wendet das Tool Quellen Ihre Änderungen auch auf Ihren lokalen Quellcode an. Damit andere Benutzer Ihre Änderungen sehen können, müssen Sie nur die geänderten Quelldateien erneut auf dem Server bereitstellen.

Arbeitsbereiche funktionieren gut, wenn der vom Server zurückgegebene JavaScript-Code dem lokalen JavaScript-Quellcode entspricht. Arbeitsbereiche funktionieren nicht so gut, wenn Ihr Workflow Transformationen für Ihren Quellcode umfasst, z. B. Minimierung oder TypeScript-Kompilierung .

Siehe auch:

Verwenden der Registerkarte Außerkraftsetzungen zum Überschreiben von Serverdateien mit lokalen Dateien

Verwenden Sie die Registerkarte Außerkraftsetzungen im Tool Quellen , um antworten von einem Webserver mit lokalen Dateien zu überschreiben. Die Registerkarte Außerkraftsetzungen ist nützlich, um temporäre Änderungen an einzelnen Dateien, z. B. einer CSS-Datei, auf einer beliebigen Website vorzunehmen. Verwenden Sie Außerkraftsetzungen , wenn Sie mit Änderungen an einer Webseite experimentieren möchten. Sie müssen die Änderungen nach dem Aktualisieren der Webseite beibehalten, aber Es ist Ihnen egal, ob Sie Ihre Änderungen dem Quellcode der Webseite zuordnen möchten.

Um mit der Verwendung der Registerkarte Außerkraftsetzungen zu beginnen, erstellen Sie einen neuen Ordner in Ihrem Dateisystem, und wählen Sie diesen Ordner auf der Registerkarte Außerkraftsetzungen aus. Von nun an werden alle Änderungen, die Sie auf der Registerkarte Formatvorlagen des Tools Elemente oder auf der Registerkarte Seite des Tools Quellen vornehmen, im neuen Ordner gespeichert. DevTools verwendet die lokalen Dateien, um die übereinstimmenden Serverantworten zu überschreiben.

Registerkarte

Siehe auch:

Verwenden der Registerkarte "Inhaltsskripts" für Microsoft Edge-Erweiterungen

Verwenden Sie die Registerkarte Inhaltsskripts im Bereich Navigator , um alle Inhaltsskripts anzuzeigen, die von einer microsoft Edge-Erweiterung geladen wurden, die Sie installiert haben.

Registerkarte

Wenn der Debugger Code eingibt, den Sie nicht kennen, sollten Sie diesen Code der Liste "Ignorieren" hinzufügen, um zu vermeiden, dass dieser Code schrittweise ausgeführt wird. Weitere Informationen finden Sie unter Hinzufügen von Inhaltsskripts zur Liste "Ignorieren".

Siehe auch:

Verwenden der Registerkarte "Codeausschnitte" zum Ausführen von JavaScript-Codeausschnitten auf einer beliebigen Webseite

Verwenden Sie die Registerkarte Codeausschnitte im Bereich Navigator , um JavaScript-Codeausschnitte zu erstellen und zu speichern, damit Sie diese Codeausschnitte problemlos auf einer beliebigen Webseite ausführen können.

Ein Codeausschnitt, der die jQuery-Bibliothek in eine Webseite einfügt

Angenommen, Sie geben häufig den folgenden Code in die Konsole ein, um die jQuery-Bibliothek in eine Seite einzufügen, damit Sie jQuery-Befehle über die Konsole ausführen können:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Stattdessen können Sie diesen Code in einem Codeausschnitt speichern und dann bei Bedarf problemlos ausführen. Wenn Sie STRG+S (Windows, Linux) oder BEFEHL+S (macOS) drücken, speichert DevTools den Codeausschnitt in Ihrem Dateisystem.

Es gibt mehrere Möglichkeiten, einen Codeausschnitt auszuführen:

  • Wählen Sie im Bereich Navigator die Registerkarte Codeausschnitte aus, und wählen Sie dann die Codeausschnittdatei aus, um sie zu öffnen. Klicken Sie dann unten im bereich Editor auf die Schaltfläche Ausführen (Schaltfläche Ausführen).
  • Wenn DevTools den Fokus hat, drücken Sie STRG+P (Windows, Linux) oder BEFEHL+P (macOS), um das Befehlsmenü zu öffnen, und geben Sie dann !ein.

Codeausschnitte ähneln Bookmarklets.

Siehe auch:

Verwenden des Befehlsmenüs zum Öffnen von Dateien

Um eine Datei zu öffnen, können Sie nicht nur den Bereich Navigator im Tool Quellen verwenden, sie können das Befehlsmenü von überall in DevTools verwenden.

  • Drücken Sie von überall in DevTools aus STRG+P unter Windows/Linux oder BEFEHL+P unter macOS. Das Befehlsmenü wird angezeigt und listet alle Ressourcen auf, die sich auf den Registerkarten des Bereichs Navigator des Tools Quellen befinden.
  • Oder klicken Sie neben den Registerkarten des Bereichs Navigator im Tool Quellen auf die Schaltfläche Weitere Optionen (...), und wählen Sie dann Datei öffnen aus.

Geben Sie zum Anzeigen und Auswählen aus einer Liste aller .js Dateien .jsein.

Öffnen einer Datei über das Befehlsmenü

Wenn Sie ? eingeben, werden im Befehlsmenü mehrere Befehle angezeigt, einschließlich ... Öffnen Sie die Datei. Wenn Sie die Rücktaste drücken, um das Befehlsmenü zu löschen, wird eine Liste der Dateien angezeigt.

Weitere Informationen finden Sie unter Ausführen von Befehlen mit dem Microsoft Edge DevTools-Befehlsmenü.

Verwenden des Editor Bereichs zum Anzeigen oder Bearbeiten von Dateien

Verwenden Sie den bereich Editor, um Dateien anzuzeigen oder zu bearbeiten, einschließlich JavaScript-, HTML-, CSS- und Bilddateien. Im bereich Editor wird der Inhalt der Datei angezeigt, die Sie auf einer der Registerkarten des Navigatorbereichs ausgewählt haben:

  • Page
  • Arbeitsbereich
  • Außerkraftsetzungen
  • Inhaltsskripts
  • Codeausschnitte

Im Bereich "Editor" kann beispielsweise Folgendes angezeigt werden:

  • Der Inhalt eines Codeausschnitts.
  • Der Inhalt einer Arbeitsbereichsdatei , die nicht tatsächlich in Ihrem Front-End-Code verwendet wird (da Sie mit Workspace den Inhalt eines beliebigen Ordners bearbeiten können).

Bereich

Der Bereich Editor verfügt über die folgende Unterstützungsebene für verschiedene Dateitypen:

Dateityp Unterstützte Aktionen
JavaScript Anzeigen, Bearbeiten und Debuggen.
CSS Anzeigen und Bearbeiten.
HTML Anzeigen und Bearbeiten.
Images „Ansicht“ aus.

Standardmäßig werden Änderungen verworfen, wenn Sie die Webseite aktualisieren. Informationen zum Speichern der Änderungen in Ihrem Dateisystem finden Sie oben unter Hinzufügen eines lokalen Ordners zum Arbeitsbereich, um Mit DevTools Dateien zu bearbeiten und Änderungen auf dem Datenträger zu speichern.

In den folgenden Unterabschnitten wird der bereich Editor behandelt:

Siehe auch:

Bearbeiten einer JavaScript-Datei

Um eine JavaScript-Datei in DevTools zu bearbeiten, verwenden Sie den Bereich Editor im Tool Quellen.

Bearbeiten von JavaScript im bereich

Um eine Datei in den bereich Editor zu laden, verwenden Sie die Registerkarte Seite im Bereich Navigator (auf der linken Seite). Oder verwenden Sie das Befehlsmenü wie folgt: Wählen Sie in der oberen rechten Ecke von DevTools die Option DevTools anpassen und steuern (...) aus, und wählen Sie dann Datei öffnen aus.

Siehe auch:

Speichern und Rückgängigmachen

Damit JavaScript-Änderungen wirksam werden, drücken Sie STRG+S (Windows, Linux) oder BEFEHL+S (macOS).

Wenn Sie eine Datei ändern, wird neben dem Dateinamen ein Sternchen angezeigt.

  • Um Änderungen zu speichern, drücken Sie STRG+S unter Windows/Linux oder BEFEHL+S unter macOS.
  • Um eine Änderung rückgängig zu machen, drücken Sie STRG+Z unter Windows/Linux oder BEFEHL+Z unter macOS.

Standardmäßig werden Ihre Änderungen verworfen, wenn Sie die Webseite aktualisieren. Weitere Informationen zum Speichern der Änderungen in Ihrem lokalen Dateisystem finden Sie unter Bearbeiten und Speichern von Dateien in einem Arbeitsbereich (Registerkarte "Arbeitsbereich" des Quellentools).

Suchen und Ersetzen

Um Text in der aktuellen Datei zu suchen, wählen Sie den bereich Editor aus, um ihm den Fokus zu geben, und drücken Sie dann STRG+F unter Windows/Linux oder BEFEHL+F unter macOS.

Suchen und Ersetzen im Bereich

Um Text zu suchen und zu ersetzen, wählen Sie links neben dem Textfeld Suchen die Schaltfläche Ersetzen (A-B>) aus. Die Schaltfläche Ersetzen (A-B>) wird angezeigt, wenn eine bearbeitbare Datei angezeigt wird.

Anzeigen der vorgenommenen Änderungen

Wenn Sie einen Arbeitsbereich definieren, werden Änderungen an JavaScript gespeichert und sind im Tool "Änderungen " sichtbar.

Um die Änderungen zu überprüfen, die Sie an einer Datei vorgenommen haben, klicken Sie mit der rechten Maustaste in den Bereich Editor, und wählen Sie dann Lokale Änderungen aus.

Der Bereich Schnellansicht wird am unteren Rand von DevTools geöffnet und zeigt Ihre Änderungen auf der Registerkarte Änderungen an.

Anzeigen lokaler Änderungen auf der Registerkarte

Siehe auch:

Änderungen innerhalb einer Funktion werden wirksam

Wenn Sie einen Arbeitsbereich definieren, werden Änderungen innerhalb eines JavaScript-Funktionstexts wirksam.

DevTools führt ein Skript nicht erneut aus. Die einzigen JavaScript-Änderungen, die wirksam werden, sind Änderungen, die Sie in Funktionen vornehmen. In der folgenden Abbildung haben wir beispielsweise den folgenden Code zum JavaScript hinzugefügt, der vom Server zurückgegeben wird:

  • Wir haben die -Anweisung console.log('A') außerhalb einer funktion hinzugefügt.
  • Wir haben die -Anweisung console.log('B') innerhalb einer onClick Funktion hinzugefügt. Anschließend haben wir die Änderungen gespeichert, Zahlen in das Formular eingegeben und dann die Formularschaltfläche zum Senden des Formulars ausgewählt.

Nach dem Senden des Formulars , console.log('A')das sich im globalen Bereich befindet, wird nicht ausgeführt, aber console.log('B')innerhalb einer onClick Funktion wird ausgeführt, und B es wird an die Konsole ausgegeben:

JavaScript im globalen Bereich wird nicht erneut ausgeführt.

Neuformatieren einer minimierten JavaScript-Datei mit Pretty-Print

Verknaktete Dateien werden automatisch neu formatiert, wenn Sie sie im bereich Editor öffnen.

Um die Datei in den ursprünglichen minimierten Zustand zu rückgängig machen, klicken Sie unten im bereich Editor auf die Schaltfläche Hübsches Drucken (Format), die als geschweifte Klammern angezeigt wird.

Schaltfläche

Weitere Informationen finden Sie unter Neuformatieren einer verkneinigten JavaScript-Datei mit pretty-print.

Zuordnen von minimiertem Code zu Ihrem Quellcode, um lesbaren Code anzuzeigen

Quellzuordnungen von Vorprozessoren führen dazu, dass DevTools Ihre ursprünglichen JavaScript-Quelldateien zusätzlich zu ihren verknedelten, transformierten JavaScript-Dateien lädt, die vom Server zurückgegeben werden. Anschließend zeigen Sie Ihre ursprünglichen Quelldateien an, während Sie Haltepunkte festlegen und Code schrittweise durchlaufen. In der Zwischenzeit führt Microsoft Edge tatsächlich Ihren minimierten Code aus.

Wenn Sie im Bereich Editor mit der rechten Maustaste auf eine JavaScript-Datei klicken und dann Quellzuordnung hinzufügen auswählen, wird ein Popupfeld mit dem Textfeld Quellzuordnungs-URL und der Schaltfläche Hinzufügen angezeigt.

Der Ansatz zur Quellzuordnung sorgt dafür, dass Ihr Front-End-Code auch nach dem Kombinieren, Minimieren oder Kompilieren von Front-End-Code von Menschen lesbar und debuggt werden kann. Weitere Informationen finden Sie unter Zuordnen des verarbeiteten Codes zu Ihrem ursprünglichen Quellcode zum Debuggen.

Transformationen vom Quellcode in kompilierten Front-End-Code

Wenn Sie ein Framework verwenden, das Ihre JavaScript-Dateien transformiert, z. B. React, unterscheidet sich Ihr lokales Quell-JavaScript möglicherweise von dem Front-End-JavaScript, das vom Server zurückgegeben wird. Arbeitsbereiche werden in diesem Szenario nicht unterstützt, aber die Quellcodezuordnung wird in diesem Szenario unterstützt.

In einer Entwicklungsumgebung enthält Ihr Server möglicherweise Ihre Quellzuordnungen und Ihre ursprünglichen .ts Dateien oder .jsx Dateien für React. Das Tool Quellen zeigt diese Dateien an, ermöglicht es Ihnen jedoch nicht, diese Dateien zu bearbeiten. Wenn Sie Haltepunkte festlegen und den Debugger verwenden, zeigt DevTools Ihre ursprünglichen .ts Dateien oder .jsx Dateien an, führt jedoch die minimierte Version Ihrer JavaScript-Dateien durch.

In diesem Szenario ist das Tool Quellen nützlich, um das transformierte Front-End-JavaScript, das vom Server zurückgegeben wird, zu untersuchen und schrittweise zu durchlaufen. Verwenden Sie den Debugger, um Überwachungsausdrücke zu definieren, und verwenden Sie die Konsole, um JavaScript-Ausdrücke einzugeben, um Daten zu bearbeiten, die sich im Gültigkeitsbereich befinden.

Bearbeiten von CSS

Es gibt zwei Möglichkeiten zum Bearbeiten von CSS-Regeln und deren Eigenschaften in DevTools:

  • Bearbeiten Sie auf der Registerkarte Formatvorlagen im Tool Elemente CSS-Eigenschaften über Steuerelemente der Benutzeroberfläche.

  • Verwenden Sie im Tool Quellen auf der Registerkarte Seite oder auf der Registerkarte Arbeitsbereich den Text-Editor, um eine CSS-Datei zu bearbeiten.

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

Siehe auch:

Bearbeiten von CSS auf der Registerkarte "Seite" oder "Arbeitsbereich" im Tool "Quellen"

Die Registerkarte Seite oder Arbeitsbereich im Tool Quellen unterstützt das direkte Bearbeiten einer CSS-Datei. Wenn Sie z. B. die CSS-Datei aus dem Tutorial Bearbeiten und Speichern von Dateien in einem Arbeitsbereich (Registerkarte Quellentool Arbeitsbereich) so bearbeiten, dass sie der folgenden Formatvorlagenregel entspricht, ändert sich das H1 Element oben links auf der gerenderten Webseite in Grün:

h1 {
  color: green;
}

Bearbeiten Sie CSS im bereich Editor, um die Textfarbe der Überschrift H1 in Grün zu ändern.

CSS-Änderungen werden sofort wirksam; Sie müssen die Änderungen nicht manuell speichern.

Siehe auch:

Bearbeiten einer HTML-Datei

Es gibt zwei Möglichkeiten, HTML in DevTools zu bearbeiten:

  • Im Tool Elemente arbeiten Sie jeweils mit einem HTML-Element, über Benutzeroberflächensteuerelemente.
  • Im Tool Quellen verwenden Sie einen Text-Editor.

Der HTML-Editor des Quellentools

Im Gegensatz zu einer JavaScript- oder CSS-Datei kann eine html-Datei, die vom Webserver zurückgegeben wird, nicht direkt im Tool Quellen bearbeitet werden. Um eine HTML-Datei mit dem Editor des Quellentools zu bearbeiten, muss sich die HTML-Datei in einem Arbeitsbereich oder auf der Registerkarte Außerkraftsetzungen befinden. Weitere Informationen finden Sie in den folgenden Unterabschnitten des aktuellen Artikels:

Um Änderungen zu speichern, drücken Sie STRG+S unter Windows/Linux oder BEFEHL+S unter macOS. Eine bearbeitete Datei ist durch ein Sternchen gekennzeichnet.

Um Text zu suchen, drücken Sie STRG+F unter Windows/Linux oder BEFEHL+F unter macOS.

Um eine Bearbeitung rückgängig zu machen, drücken Sie STRG+Z unter Windows/Linux oder BEFEHL+Z unter macOS.

Um andere Befehle beim Bearbeiten einer HTML-Datei anzuzeigen, klicken Sie im Bereich Editor mit der rechten Maustaste auf die HTML-Datei.

Siehe auch:

Wechseln zu einer Zeilennummer oder Funktion

Um zu einer Zeilennummer oder einem Symbol (z. B. einem Funktionsnamen) in der Datei zu wechseln, die im Editor Bereich geöffnet ist, können Sie das Befehlsmenü verwenden, anstatt durch die Datei zu scrollen.

  1. Wählen Sie im Bereich Navigator die Auslassungspunkte (...) (Weitere Optionen), und wählen Sie dann Datei öffnen aus. Das Befehlsmenü wird angezeigt.
  2. Geben Sie eines der folgenden Zeichen ein:
Zeichen Befehlsname Zweck
: Zur Zeile wechseln Zu einer Zeilennummer wechseln.
@ Zum Symbol wechseln Wechseln Sie zu einer Funktion. Wenn Sie eingeben@, werden im Befehlsmenü die Funktionen aufgelistet, die sich in der JavaScript-Datei befinden, die im bereich Editor geöffnet ist.

Weitere Informationen finden Sie unter Ausführen von Befehlen mit dem Microsoft Edge DevTools-Befehlsmenü.

Quick source tool, to display source files when using a different tool

Der Standard Ort zum Anzeigen von Quelldateien in den DevTools befindet sich im Tool Quellen. Manchmal müssen Sie jedoch auf andere Tools wie Elemente oder Konsole zugreifen, während Sie Ihre Quelldateien anzeigen oder bearbeiten. Sie verwenden das Tool Schnellquelle im Bereich Schnellansicht am unteren Rand von DevTools.

So verwenden Sie das Tool "Schnellquelle "

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

  2. Drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS). Das Befehlsmenü wird geöffnet.

  3. Geben Sie quick ein, und wählen Sie dann Schnellquelle anzeigen aus.

    Der Bereich Schnellansicht wird am unteren Rand von DevTools geöffnet, wobei das Tool Schnellquelle ausgewählt ist. Das Tool "Schnellquell " zeigt dieselben Dateien an, die im Quellentool in einer kompakten Version des DevTools-Code-Editors geöffnet sind.

  4. Drücken Sie STRG+P (Windows, Linux) oder BEFEHL+P (macOS), um das Dialogfeld Datei öffnen zu öffnen.

Siehe auch:

Debuggen von JavaScript-Code mithilfe des Debuggerbereichs

Verwenden Sie den JavaScript-Debugger, um den vom Server zurückgegebenen JavaScript-Code schrittweise zu durchlaufen. Der Debugger enthält den Debuggerbereich zusammen mit Haltepunkten, die Sie in Codezeilen im bereich Editor festlegen.

Mit dem Debugger durchlaufen Sie den Code, während Sie alle von Ihnen angegebenen JavaScript-Ausdrücke beobachten. Beobachten Und ändern Sie Variablenwerte manuell, und zeigen Sie automatisch an, welche Variablen sich im Gültigkeitsbereich der aktuellen Anweisung befinden.

Der Debuggerbereich des Quellentools

Der Debugger unterstützt Standardmäßige Debugaktionen, z. B.:

  • Festlegen von Haltepunkten, um Code anzuhalten.
  • Schrittweises Durchlaufen von Code.
  • Anzeigen und Bearbeiten von Eigenschaften und Variablen.
  • Überwachen der Werte von JavaScript-Ausdrücken.
  • Anzeigen der Aufrufliste (die sequenz der bisherigen Funktionsaufrufe).

Der Debugger in DevTools ist so konzipiert, dass er wie der Debugger in Visual Studio Code und der Debugger in Visual Studio aussieht und funktioniert.

In den folgenden Unterabschnitten wird das Debuggen behandelt:

Der grundlegende Ansatz für die Verwendung eines Debuggers

Um Probleme mit JavaScript-Code zu beheben, können Sie -Anweisungen in Ihren Code einfügen console.log() . Ein weiterer, leistungsfähigerer Ansatz ist die Verwendung des Debuggers von Microsoft Edge DevTools. Die Verwendung eines Debuggers kann sogar einfacher sein als console.log(), sobald Sie mit dem Debuggeransatz vertraut sind.

Um einen Debugger auf einer Webseite zu verwenden, legen Sie in der Regel einen Haltepunkt fest und senden dann ein Formular von der Webseite wie folgt:

  1. Öffnen Sie die Webseite Demo: Erste Schritte beim Debuggen von JavaScript mit Microsoft Edge DevTools in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie F12. Das Fenster DevTools wird neben der Demowebseite geöffnet.

  3. Wählen Sie in DevTools die Registerkarte Quellen aus.

  4. Wählen Sie im Bereich Navigator (auf der linken Seite) die Registerkarte Seite und dann die JavaScript-Datei aus, z get-started.js. B. .

  5. Wählen Sie im bereich Editor eine Zeilennummer in der Nähe einer verdächtigen Codezeile aus, um einen Haltepunkt für diese Zeile festzulegen. In der folgenden Abbildung wird in der Zeile var sum = addend1 + addend2;ein Haltepunkt festgelegt.

  6. Geben Sie auf der Webseite Werte ein, und senden Sie das Formular. Geben Sie z. B. Zahlen wie 5 und 1 ein, und klicken Sie dann auf die Schaltfläche Zahl 1 und Zahl 2 hinzufügen.

    Der Debugger führt den JavaScript-Code aus und hält dann am Haltepunkt an. Der Debugger befindet sich jetzt im Angehaltenen Modus, sodass Sie die Werte der Eigenschaften überprüfen können, die sich im Gültigkeitsbereich befinden, und den Code schrittweise durchlaufen können.

    Aufrufen des Angehaltenen Modus des Debuggers

    In der obigen Abbildung haben wir die Überwachungsausdrücke sum und hinzugefügt typeof sumund zwei Zeilen über den Haltepunkt hinaus gestuft.

  7. Untersuchen Sie die Werte im Bereichsbereich , in dem alle Variablen oder Eigenschaften angezeigt werden, die sich im Bereich des aktuellen Haltepunkts befinden, und deren Werte.

    An diesem Punkt können Sie ausdrücke im Überwachungsbereich hinzufügen. Diese Ausdrücke sind die gleichen Ausdrücke, die Sie in einer console.log -Anweisung schreiben würden, um Ihren Code zu debuggen.

    Zum Ausführen von JavaScript-Befehlen zum Bearbeiten von Daten im aktuellen Kontext verwenden Sie die Konsole. Wenn Sie die Konsole im Bereich Schnellansicht am unteren Rand von DevTools öffnen möchten, drücken Sie ESC.

  8. Durchlaufen Sie den Code mithilfe der Steuerelemente am oberen Rand des Debuggerbereichs , z. B. Schritt (F9).

    Der Fehler in dieser Demo besteht darin, dass Sie zuerst die Eingabedaten aus Zeichenfolgen in Zahlen konvertieren müssen.

  9. Um den Fehler zu beheben, aktualisieren Sie die Seite, um das Webseitenformular zurückzusetzen, und ändern Sie dann die Zeile:

    var sum = addend1 + addend2;

    An:

    var sum = parseInt(addend1) + parseInt(addend2);

  10. Drücken Sie STRG+S (Windows, Linux) oder BEFEHL+S (macOS), um die Änderung in der lokalen zwischengespeicherten Datei zu speichern.

  11. Geben Sie 5 und 1 in die Webseite ein, und klicken Sie dann auf die Schaltfläche Hinzufügen . Jetzt Bereich>Lokale>Summe: ist die Zahl 6 anstelle der Zeichenfolge "51".

Siehe auch:

Vorteile der Überwachung und des Bereichs des Debuggers gegenüber console.log

Diese drei Ansätze sind gleichwertig:

  • Vorübergehendes Hinzufügen der -Anweisungen console.log(sum) und console.log(typeof sum) im Code, wobei sum sich im Bereich befindet.

  • Ausgeben der -Anweisungen sum und console.log(typeof sum) im Konsolenbereich der DevTools, wenn der Debugger angehalten wird, wobei sum sich im Gültigkeitsbereich befindet.

  • Festlegen der Überwachungsausdrückesum und typeof sum im Debuggerbereich .

Wenn sich die Variable sum im Gültigkeitsbereich sum befindet und ihr Wert automatisch im Abschnitt Bereich des Debuggerbereichs angezeigt wird, wird er auch im Editor Bereich überlagert, in dem sum berechnet wird. Daher müssten Sie wahrscheinlich keinen Watch-Ausdruck für sumdefinieren.

Der Debugger bietet eine umfangreichere, flexiblere Anzeige und Umgebung als eine console.log -Anweisung. Wenn Sie beispielsweise den Code schrittweise durchlaufen, können Sie im Debugger die Werte aller derzeit definierten Eigenschaften und Variablen anzeigen und ändern. Sie können auch JavaScript-Anweisungen in der Konsole ausgeben, z. B. um Werte in einem Array zu ändern, das sich im Gültigkeitsbereich befindet. (Drücken Sie ESC, um die Konsole anzuzeigen.)

Haltepunkte und Überwachungsausdrücke werden beibehalten, wenn Sie die Webseite aktualisieren.

Direktes Debuggen aus Visual Studio Code

Verwenden Sie die Microsoft Edge DevTools-Erweiterung für Visual Studio Code, um anstelle des DevTools-Debuggers den umfassenderen Debugger von Visual Studio Code zu verwenden.

Die Microsoft Edge DevTools-Erweiterung für Visual Studio Code

Diese Erweiterung ermöglicht den Zugriff auf die Elemente und Netzwerktools von Microsoft Edge DevTools aus Microsoft Visual Studio Code.

Weitere Informationen finden Sie unter Visual Studio Code für die Webentwicklung und auf der GitHub-Infodateiseite Microsoft Edge Developer Tools für Visual Studio Code.

Artikel zum Debuggen

In den folgenden Artikeln werden der Debuggerbereich und Die Haltepunkte behandelt:

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.