Übersicht über das Tool „Quellen“

  • Artikel
  • 21 Minuten Lesedauer

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

Detaillierte Inhalte:

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 in Quelldateien zu speichern.
Editorbereich 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 bleiben erhalten, bis Sie die Seite aktualisieren, oder bleiben nach der Seitenaktualisierung erhalten, 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 einschließlich aller von Ihnen vorgenommenen Änderungen zu durchlaufen, während Sie alle von Ihnen angegebenen JavaScript-Ausdrücke beobachten. Überwachen sie die Werte von Variablen, die für die aktuelle Codezeile im Gültigkeitsbereich liegen, und ändern Sie sie manuell.

Die folgende Abbildung zeigt den Navigatorbereich mit einem roten Feld in der oberen linken Ecke von DevTools, dem oben rechts hervorgehobenen Editorbereich und dem unten hervorgehobenen Debuggerbereich . Ganz links befindet sich der Hauptteil des Browserfensters, in dem die gerenderte Webseite abgeblendet angezeigt wird, da der Debugger an einem Haltepunkt angehalten wird:

Die Bereiche des Tools "Quellen" 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 Tools "Quellen" zu maximieren, legen Sie DevTools in einem separaten Fenster ab, und verschieben Sie optional das DevTools-Fenster auf einen separaten Monitor. Siehe DevTools-Platzierung ändern (Abdocken, Unten andocken, Andocken nach links).

Informationen zum Laden der oben gezeigten Debug-Demowebseite finden Sie unten unter Dem grundlegenden Ansatz für die Verwendung eines Debuggers.

Verwenden des Navigatorbereichs zum Auswählen von Dateien

Verwenden Sie den Navigatorbereich (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.

Der Navigatorbereich.

Um auf alle ausgeblendeten Registerkarten des Navigatorbereichs zuzugreifen, wählen Sie " Weitere Registerkarten" aus. (Weitere Registerkarten).

Die folgenden Unterabschnitte decken den Navigatorbereich ab:

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

Verwenden Sie die Registerkarte " Seite " im Navigatorbereich , 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 die Seite geladen hat.

Die Registerkarte "Seite" im Bereich "Navigator" des Tools "Quellen".

Um eine Datei im Editorbereich 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 mit der Maus auf die Ressource.

Wenn Sie eine Datei auf eine neue Registerkarte des Browsers laden oder andere Aktionen anzeigen möchten, 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 Beschriftung topden Hauptdokumentrahmen dar, bei dem es sich um einen HTML-Frame handelt.
  • Das Cloudsymbol stellt einen Ursprung dar.
  • Das Ordnersymbol stellt ein Verzeichnis dar.
  • Das Seitensymbol stellt eine Ressource dar.

Gruppieren von Dateien nach Ordnern 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 Navigatorbereich (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 Navigatorbereich , um Dateien zu einem Arbeitsbereich hinzuzufügen, damit Änderungen, die Sie in DevTools vornehmen, in Ihrem lokalen Dateisystem gespeichert werden.

Eine Datei, die sich in einem Arbeitsbereich befindet, wird in allen DevTools durch einen grünen Punkt neben dem Dateinamen gekennzeichnet.

Die Registerkarte "Dateisystem" für einen Arbeitsbereich

Wenn Sie eine Datei im Quellentool bearbeiten, werden Ihre Änderungen standardmäßig verworfen, wenn Sie die Webseite aktualisieren. Das Quellentool funktioniert mit einer Kopie der Front-End-Ressourcen, die vom Webserver zurückgegeben werden. Wenn Sie diese Front-End-Dateien ändern, die vom Server zurückgegeben werden, bleiben die Änderungen nicht erhalten, da Sie die Quelldateien nicht geändert haben. Sie müssen ihre Änderungen auch im eigentlichen Quellcode anwenden und dann erneut auf dem Server bereitstellen.

Wenn Sie hingegen einen Arbeitsbereich verwenden, bleiben Änderungen, die Sie an Ihrem Front-End-Code vornehmen, erhalten, wenn Sie die Webseite aktualisieren. Wenn Sie bei einem Arbeitsbereich den Front-End-Code bearbeiten, der vom Server zurückgegeben wird, wendet das Quellentool ihre Bearbeitungen auch auf den lokalen Quellcode an. Damit andere Benutzer Ihre Änderungen sehen können, müssen Sie die geänderten Quelldateien nur 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 im Quellcode umfasst, z. B. Minimierung oder TypeScript-Kompilierung .

Weitere Informationen finden Sie im Lernprogramm "Dateien mit Arbeitsbereichen bearbeiten" (Registerkarte "Dateisystem")

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

Verwenden Sie die Registerkarte "Außerkraftsetzungen " im Navigatorbereich , um Seitenressourcen (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.

Die Registerkarte "Außerkraftsetzungen" im Navigatorbereich.

Das Feature "Außerkraftsetzungen " ähnelt Arbeitsbereichen. Verwenden Sie Außerkraftsetzungen, wenn Sie mit Änderungen an einer Webseite experimentieren möchten, und Sie müssen die Änderungen beibehalten, nachdem Sie die Webseite aktualisiert haben, aber Sie interessieren sich nicht für die Zuordnung Ihrer Änderungen zum Quellcode der Webseite.

Eine Datei, die eine vom Server zurückgegebene Datei außer Kraft setzt, wird durch einen violetten Punkt neben dem Dateinamen in allen DevTools angezeigt.

Siehe auch

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

Verwenden Sie die Registerkarte " Inhaltsskripts " im Navigatorbereich , um alle Inhaltsskripts anzuzeigen, die von einer installierten Microsoft Edge-Erweiterung geladen wurden.

Die Registerkarte "Inhaltsskripts" im Bereich "Navigator".

Wenn der Debugger Code eingibt, den Sie nicht erkennen, sollten Sie diesen Code als Bibliothekscode markieren, um zu vermeiden, dass Sie in diesen Code wechseln. Weitere Informationen finden Sie unter "Markieren von Inhaltsskripts als Bibliothekscode".

Siehe auch

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

Verwenden Sie die Registerkarte " Codeausschnitte " im Navigatorbereich , um JavaScript-Codeausschnitte zu erstellen und zu speichern, sodass Sie diese Codeausschnitte problemlos auf jeder 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 ganz einfach ausführen. Wenn Sie (Windows, Linux) oderS Command+(macOS) drücken+Ctrl``S, speichert DevTools den Codeausschnitt in Ihrem Dateisystem.

Es gibt mehrere Möglichkeiten zum Ausführen eines Codeausschnitts:

  • Wählen Sie im Navigatorbereich die Registerkarte " Codeausschnitte " und dann die Codeausschnittdatei aus, um sie zu öffnen. Wählen Sie dann unten im Editorbereich " Ausführen " (Schaltfläche "Ausführen") aus.
  • Wenn DevTools den Fokus hat, drücken Ctrl``P+Sie (Windows, Linux) oderP+Command (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 zusätzlich zur **** Verwendung des Navigator-Bereichs im Tool "Quellen" das Befehlsmenü von überall aus in DevTools verwenden.

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

Wenn Sie eine Liste aller .js Dateien anzeigen und aus dieser auswählen möchten, geben Sie .jsein.

Öffnen einer Datei mithilfe des Befehlsmenüs

Wenn Sie eingeben ?, werden im Befehlsmenü mehrere Befehle angezeigt, darunter ... Öffnen Sie die Datei. Wenn Sie das Befehlsmenü deaktivieren Backspace möchten, 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 Editorbereich , 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 Editorbereich bearbeiten, aktualisiert DevTools die Webseite so, dass der geänderte Code ausgeführt wird.

Der Editorbereich im Tool "Quellen".

Der Editor-Bereich bietet 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 Bearbeitungen verworfen, wenn Sie die Webseite aktualisieren. Informationen zum Speichern der Änderungen in Ihrem Dateisystem finden Sie weiter oben unter Verwenden der Registerkarte "Dateisystem", um einen lokalen Arbeitsbereich zu definieren.

Die folgenden Unterabschnitte decken den Editorbereich ab:

Bearbeiten einer JavaScript-Datei

Um eine JavaScript-Datei in DevTools zu bearbeiten, verwenden Sie den Editorbereich im Quellentool .

Bearbeiten von JavaScript im Editorbereich.

Um eine Datei in den Editorbereich zu laden, verwenden Sie die Registerkarte " Seite " im Navigatorbereich (auf der linken Seite). Oder verwenden Sie das Befehlsmenü wie folgt: Wählen Sie oben rechts in DevTools "Anpassen" aus, und steuern Sie DevTools (...), und wählen Sie dann "Datei öffnen" aus.

Speichern und Rückgängigmachen

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

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

  • Um Änderungen zu speichern, drücken Sie Ctrl+S windows/linux oder Command+S macOS.
  • Zum Rückgängigmachen einer Änderung drücken Sie Ctrl+Z windows/linux oder Command+Z macOS.

Standardmäßig werden Ihre Bearbeitungen verworfen, wenn Sie die Webseite aktualisieren. Weitere Informationen zum Speichern der Änderungen in Ihrem lokalen Dateisystem finden Sie unter "Dateien mit Arbeitsbereichen bearbeiten" (Registerkarte "Dateisystem")

Suchen und Ersetzen

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

Suchen und Ersetzen im Editorbereich des Tools "Quellen"

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

Anzeigen der von Ihnen vorgenommenen Änderungen

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

Die Schublade wird am unteren Rand von DevTools geöffnet und zeigt Ihre Änderungen auf der Registerkarte "Änderungen " an.

Anzeigen lokaler Änderungen auf der Registerkarte "Änderungen" der Schublade

Änderungen innerhalb einer Funktion werden wirksam

DevTools führt kein Skript erneut aus. Daher werden nur Änderungen in JavaScript wirksam, die Sie innerhalb von 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 beliebigen 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 Übermitteln des Formulars wird das Formular, console.log('A')das sich im globalen Bereich befindet, nicht ausgeführt, aber console.log('B')innerhalb einer onClick Funktion ausgeführt und an die Konsole ausgegeben B :

JavaScript auf globaler Ebene wird nicht erneut ausgeführt.

Neuformatieren einer minimierten JavaScript-Datei mit pretty-print

Wenn Sie eine Datei mit pretty-print umformatieren möchten, um sie lesbar zu machen, wählen Sie unten im Editorbereich die Schaltfläche " Pretty print " (Format.) aus, die als geschweifte Klammern angezeigt wird. Oder wenn oben im Editorbereich eine Schaltfläche "Schön drucken" angezeigt wird, können Sie diese Schaltfläche auswählen.

Die Schaltfläche "Pretty print".

Die neu formatierte Datei wird auf einer neuen Registerkarte :formatted mit angehängtem Dateinamen angezeigt. Der neu formatierte Code ist schreibgeschützt.

Eine ziemlich gedruckte (neu formatierte) JavaScript-Datei

So führen Sie einen Bildlauf der neu formatierten Datei zu dem Code aus, den Sie in der minimierten Datei auswählen:

  1. Wenn die neu formatierte Dateiregisterkarte geöffnet ist, schließen Sie sie.
  2. Wählen Sie Code in der minimierten Datei im Editorbereich aus.
  3. Wählen Sie die Schaltfläche " Hübsches Drucken" aus . Der formatierte Code wird auf einer neuen Registerkarte angezeigt und zu dem von Ihnen ausgewählten Code gescrollt.

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

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

Quellzuordnungen von Präprozessoren bewirken, dass DevTools ihre ursprünglichen JavaScript-Quelldateien zusätzlich zu Ihren minimierten, transformierten JavaScript-Dateien, die vom Server zurückgegeben werden, laden. 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 Ihren minimierten Code tatsächlich 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 für die Quellzuordnungs-URL und einer Schaltfläche " Hinzufügen " angezeigt.

Der Quellzuordnungsansatz sorgt dafür, dass Ihr Front-End-Code auch nach dem Kombinieren, Minimieren oder Kompilieren lesbar und debuggbar ist. Weitere Informationen finden Sie unter Zuordnen des verarbeiteten Codes zum 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 vom 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 kann Ihr Server Ihre Quellkarten und Ihre Originaldateien .ts oder .jsx Dateien für React enthalten. Das Tool "Quellen " zeigt diese Dateien an, erlaubt ihnen jedoch nicht, diese Dateien zu bearbeiten. Wenn Sie Haltepunkte festlegen und den Debugger verwenden, zeigt DevTools Ihre Originaldateien .ts an .jsx , führt jedoch die minimierte Version Ihrer JavaScript-Dateien schrittweise durch.

In diesem Szenario eignet sich das Quellentool zum Überprüfen und Durchlaufen des transformierten Front-End-JavaScript, das vom Server zurückgegeben wird. Verwenden Sie den Debugger, um Überwachungsausdrücke zu definieren, und verwenden Sie die Konsole, um JavaScript-Ausdrücke einzugeben, um Daten zu bearbeiten, die in den Gültigkeitsbereich passen.

Bearbeiten einer CSS-Datei

Es gibt zwei Möglichkeiten zum Bearbeiten von CSS in DevTools:

Das Tool "Quellen" unterstützt das direkte Bearbeiten einer CSS-Datei. Wenn Sie z. B. die CSS-Datei aus dem Lernprogramm "Dateien mit Arbeitsbereichen bearbeiten" (Registerkarte "Dateisystem") bearbeiten, um der folgenden Formatregel zu entsprechen, ä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 zum Bearbeiten von HTML in DevTools:

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

Der HTML-Editor des Tools "Quellen".

Im Gegensatz zu einer JavaScript- oder CSS-Datei kann eine VOM Webserver zurückgegebene HTML-Datei nicht direkt im Quellentool bearbeitet werden. Zum Bearbeiten einer HTML-Datei mithilfe des Editors des Tools "Quellen" 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 Ctrl+S windows/linux oder Command+S macOS. Eine bearbeitete Datei wird durch ein Sternchen gekennzeichnet.

Um Text zu finden, drücken Sie Ctrl+F unter Windows/Linux oder Command+F unter macOS.

Zum Rückgängigmachen einer Bearbeitung drücken Sie Ctrl+Z windows/linux oder Command+Z macOS.

Zum Anzeigen anderer Befehle beim Bearbeiten einer HTML-Datei klicken Sie im Editorbereich mit der rechten Maustaste auf die HTML-Datei.

Wechseln zu einer Zeilennummer oder Funktion

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

  1. Wählen Sie im Navigatorbereich 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
: Gehe zu Zeile Wechseln sie zu einer Zeilennummer.
@ Wechseln zum Symbol Wechseln Sie zu einer Funktion. Bei der Eingabe @werden im Befehlsmenü die Funktionen aufgelistet, die sich in der JavaScript-Datei befinden, die im Editorbereich 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 Hauptspeicherort zum Anzeigen von Quelldateien in den DevTools befindet sich im Quellentool . Manchmal müssen Sie jedoch auf andere Tools wie Elemente oder Konsole zugreifen, während Sie Ihre Quelldateien anzeigen oder bearbeiten. Sie verwenden das Schnellquelltool in der Schublade, das unten in DevTools angezeigt wird.

So verwenden Sie das Schnellquelltool :

  1. Wählen Sie ein anderes Tool als das Tool "Quellen " aus, z. B . das Elementtool.

  2. Drücken Sie Ctrl++Shift``P (Windows, Linux) oder Command+Shift+P (macOS). Das Befehlsmenü wird geöffnet.

  3. Geben Sie quickein, und wählen Sie dann " Schnellquelle anzeigen" aus.

    Am unteren Rand des DevTools-Fensters wird die Schublade angezeigt, wobei das Schnellquelltool ausgewählt ist. Das Schnellquelltool enthält die letzte Datei, die Sie im Tool "Quellen " in einer kompakten Version des DevTools-Code-Editors bearbeitet haben.

  4. Drücken Sie Ctrl+P (Windows, Linux) oder+Command``P (macOS), um das Dialogfeld "Datei öffnen" zu öffnen.

Verwenden des Debuggerbereichs zum Debuggen von JavaScript-Code

Verwenden Sie den JavaScript-Debugger, um den JavaScript-Code zu durchlaufen, der vom Server zurückgegeben wird. Der Debugger enthält den Debuggerbereich sowie Haltepunkte, die Sie in Codezeilen im Editorbereich festlegen.

Mit dem Debugger durchlaufen Sie den Code, während Sie alle von Ihnen angegebenen JavaScript-Ausdrücke beobachten. Sie können Variablenwerte überwachen und manuell ändern und automatisch anzeigen, welche Variablen für die aktuelle Anweisung im Gültigkeitsbereich liegen.

Der Debuggerbereich des Tools "Quellen" .

Der Debugger unterstützt standardmäßige Debuggingaktionen, z. B.:

  • Festlegen von Haltepunkten zum Anhalten des Codes.
  • Schrittweises Durchlaufen des Codes.
  • Anzeigen und Bearbeiten von Eigenschaften und Variablen.
  • Beobachten der Werte von JavaScript-Ausdrücken.
  • Anzeigen des Aufrufstapels (die Sequenz der bisher ausgeführten Funktionsaufrufe).

Der Debugger in DevTools ist so konzipiert, dass er wie der Debugger in Visual Studio Code und der Debugger in Visual Studio aussieht, sich anfühlt 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 im Editorbereich einfügenconsole.log(). Ein weiterer, leistungsstärkerer Ansatz ist die Verwendung des Debuggers von Microsoft Edge DevTools. Die Verwendung eines Debuggers kann 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 wie folgt ein Formular von der Webseite:

  1. Öffnen Sie die Demo : Erste Schritte beim Debuggen von JavaScript mit der Microsoft Edge DevTools-Webseite 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 "Überprüfen" aus. Oder drücken Sie F12. Das DevTools-Fenster wird neben der Demowebseite geöffnet.

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

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

  5. Wählen Sie im Editorbereich eine Zeilennummer in der Nähe einer verdächtigen Codezeile aus, um einen Haltepunkt in dieser Zeile festzulegen. In der folgenden Abbildung wird ein Haltepunkt in der Zeile var sum = addend1 + addend2;festgelegt. (Update: Seit 2022 werden Haltepunkte jetzt durch ein blaues Rechteck anstelle eines roten Kreises angezeigt.)

  6. Geben Sie auf der Webseite Werte ein, und übermitteln Sie das Formular. Geben Sie z. B. Zahlen ein, z 5 . B. und 1wä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 Modus "Angehalten", sodass Sie die Werte der im Bereich enthaltenen Eigenschaften überprüfen und den Code schrittweise durchlaufen können.

    Der Debugger wechselt in den angehaltenen Modus.

    In der obigen Abbildung haben wir die Watch-Ausdrücke sum hinzugefügt und typeof sumzwei Zeilen hinter den Haltepunkt getreten.

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

    An diesem Punkt können Sie Ausdrücke im Überwachungsbereich hinzufügen. Diese Ausdrücke sind dieselben Ausdrücke, die Sie in eine 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 in der Schublade 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 ist, dass Sie zuerst die Eingabedaten von 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 Ctrl+S (Windows, Linux) oder Command+S (macOS), um die Änderung in der lokalen zwischengespeicherten Datei zu speichern.

  11. Geben Sie die Webseite ein 5 , und 1 klicken Sie dann auf die Schaltfläche "Hinzufügen ". Jetzt Scope > Local > sum: is the number 6, instead of the string "51".

Siehe auch

Vorteile der Watch und scope 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, wo sum sich der Bereich befindet.

  • Ausgeben der Anweisungen sum und console.log(typeof sum) im Konsolenbereich der DevTools, wenn der Debugger angehalten wird, wo sum sich der Bereich befindet.

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

Wenn sich die Variable sum im Bereich sum befindet und ihr Wert automatisch im Bereichsbereich des Debuggerbereichs angezeigt wird, und auch im Editorbereich überlagert werden, wo sum berechnet wird. Daher müssten Sie wahrscheinlich keinen Überwachungsausdruck für sumdefinieren.

Der Debugger bietet eine umfangreichere, flexiblere Anzeige und Umgebung als eine console.log Anweisung. Beispielsweise können Sie im Debugger beim Durchlaufen des Codes 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. (Um die Konsole anzuzeigen, drücken Sie Esc.)

Haltepunkte und Überwachungsausdrücke bleiben erhalten, wenn Sie die Webseite aktualisieren.

Direktes Debuggen von Visual Studio Code

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

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

Diese Erweiterung bietet Zugriff auf die Elemente und Netzwerktools von Microsoft Edge DevTools in Microsoft Visual Studio Code.

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

Artikel zum Debuggen

In den folgenden Artikeln werden der Debuggerbereich und haltepunkte behandelt:

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 Bestimmungen verwendet werden. Die Originalseite befindet sich hier und wurde von Kayce Basken (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Creative Commons License. Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.