Übersicht über das Tool „Quellen“

  • Artikel

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.
Editor-Bereich 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 , der in der oberen linken Ecke von DevTools mit einem roten Feld hervorgehoben ist, der Editor-Bereich oben rechts und der Debuggerbereich unten hervorgehoben ist. 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

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

In den folgenden Unterabschnitten wird der Bereich Navigator behandelt:

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

Verwenden Sie die Registerkarte Seite des Bereichs Navigator , um das Dateisystem zu erkunden, das vom Server zurückgegeben wird, um die aktuelle Webseite zu erstellen. Wählen Sie eine JavaScript-Datei aus, um sie anzuzeigen, zu bearbeiten und zu debuggen. Auf der Registerkarte Seite werden alle Ressourcen aufgelistet, die von der Seite geladen wurden.

Registerkarte

Um eine Datei im Editor-Bereich 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. Wählen Sie neben den Registerkarten im Bereich Navigator (auf der linken Seite) die Schaltfläche ... (Weitere Optionen) aus. Ein Menü wird angezeigt.
  2. Aktivieren oder deaktivieren Sie die Option Nach Ordner gruppieren .

Verwenden der Registerkarte Dateisystem zum Definieren eines lokalen Arbeitsbereichs

Verwenden Sie die Registerkarte Dateisystem im Bereich Navigator , um einem Arbeitsbereich Dateien hinzuzufügen, damit Änderungen, die Sie in DevTools vornehmen, in Ihrem lokalen Dateisystem gespeichert werden.

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 des Navigatorbereichs , um Seitenobjekte (z. B. Bilder) mit Dateien aus einem lokalen Ordner zu überschreiben.

Elemente auf dieser Registerkarte überschreiben, was der Server an den Browser sendet, auch nachdem der Server die Ressourcen gesendet hat.

Registerkarte

Das Feature Außerkraftsetzungen ähnelt Arbeitsbereichen. 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.

Eine Datei, die eine vom Server zurückgegebene Datei überschreibt, wird in DevTools durch einen violetten Punkt neben dem Dateinamen angezeigt.

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. Wählen Sie dann unten im Editor-Bereich Ausführen (Schaltfläche Ausführen) aus.
  • 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 wählen Sie neben den Registerkarten des Bereichs Navigator im Tool Quellen die Schaltfläche ... (Weitere Optionen) und 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 Editorbereichs zum Anzeigen oder Bearbeiten von Dateien

Verwenden Sie den Editor-Bereich, um die Front-End-Dateien anzuzeigen, die vom Server zurückgegeben werden, um die aktuelle Webseite zu erstellen, einschließlich JavaScript-, HTML-, CSS- und Bilddateien. Wenn Sie die Front-End-Dateien im Editor-Bereich bearbeiten, aktualisiert DevTools die Webseite, um den geänderten Code auszuführen.

Bereich

Der Editor-Bereich verfügt über die folgende Unterstützung 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 Verwenden der Registerkarte Dateisystem zum Definieren eines lokalen Arbeitsbereichs.

In den folgenden Unterabschnitten wird der Editor-Bereich 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 Editor-Bereich

Um eine Datei in den Editor-Bereich zu laden, verwenden Sie die Registerkarte Seite im Bereich Navigator (links). 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 von Dateien mit Arbeitsbereichen (Registerkarte Dateisystem).

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 Editor des Quellentools

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.

Neuformatieren einer minimierten JavaScript-Datei mit Pretty-Print

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

Um die Datei in den ursprünglichen minimierten Zustand zu rückgängig machen, klicken Sie unten im Editor-Bereich 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 Editorbereich mit der rechten Maustaste auf eine JavaScript-Datei klicken und dann Quellzuordnung hinzufügen auswählen, wird ein Popupfeld mit einem Textfeld Quellzuordnungs-URL und einer 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 einer CSS-Datei

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

  • Im Tool Elemente arbeiten Sie jeweils mit einer CSS-Eigenschaft, über Steuerelemente der Benutzeroberfläche. Dieser Ansatz wird in den meisten Fällen empfohlen. Weitere Informationen finden Sie unter Erste Schritte beim Anzeigen und Ändern von CSS.
  • Im Tool Quellen verwenden Sie einen Text-Editor, um CSS-Dateien zu bearbeiten.

Das Tool Quellen unterstützt das direkte Bearbeiten einer CSS-Datei. Wenn Sie z. B. die CSS-Datei im Tutorial Dateien mit Arbeitsbereichen bearbeiten (Registerkarte Dateisystem) so bearbeiten, dass sie der folgenden Formatregel entspricht, ändert sich das H1 Element oben links auf der gerenderten Webseite in Grün:

h1 {
  color: green;
}

Bearbeiten Sie CSS im Editor-Bereich, um die Textfarbe der H1-Überschrift 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.

Wenn Sie andere Befehle beim Bearbeiten einer HTML-Datei anzeigen möchten, 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 Editor-Bereich geöffnet ist.

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

Anzeigen von Quelldateien bei Verwendung eines anderen Tools

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 Quick-Source-Tool in der Drawer-Datei, die unten in DevTools angezeigt wird.

So verwenden Sie das Tool "Schnellquelle "

  1. Wählen Sie 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.

    Am unteren Rand des DevTools-Fensters wird die Schublade angezeigt, wobei das Tool Quick source (Schnellquelle ) ausgewählt ist. Das Tool "Schnellquell " enthält die datei, die Sie zuletzt im Tool Quellen in einer kompakten Version des DevTools-Code-Editors bearbeitet haben.

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

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 Editor-Bereich 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 beispielsweise Zahlen wie 5 und 1 ein, und wählen Sie dann die Schaltfläche Zahl 1 und Zahl 2 hinzufügen aus.

    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 Drawer 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 und auch im Bereich Editor überlagert wird, 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 befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

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