JavaScript-Debugfeatures

Artikel
03/26/2024

In diesem Artikel wird beschrieben, wie Sie die Debuggerfeatures in Microsoft Edge DevTools verwenden, einschließlich der Festlegung eines Zeilenhaltepunkts.

Siehe auch:

Erste Schritte beim Debuggen von JavaScript : Tutorial: Exemplarische Vorgehensweise.
Halten Sie Ihren Code mit Haltepunkten an, indem Sie verschiedene Typen von Haltepunkten festlegen.

Anzeigen und Bearbeiten von JavaScript-Code

Wenn Sie einen Fehler beheben, möchten Sie häufig einige Änderungen an Ihrem JavaScript-Code ausprobieren. Sie müssen die Änderungen nicht in einem externen Editor oder einer externen IDE vornehmen, die Datei erneut auf den Server hochladen und dann die Seite aktualisieren. Zum Testen von Änderungen können Sie stattdessen Ihren JavaScript-Code direkt in DevTools bearbeiten und das Ergebnis sofort anzeigen.

So zeigen Sie eine JavaScript-Datei an und bearbeiten sie:

Öffnen Sie die Webseite, die Sie debuggen möchten, in einem neuen Fenster oder einer neuen Registerkarte. Sie können die Demoseite Erste Schritte beim Debuggen von JavaScript verwenden.
Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.
Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Quellen aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools ().
Wählen Sie im Bereich Navigator die Datei aus, die Sie ändern möchten, um sie im Bereich Editor zu öffnen. Wenn Sie die Demoseite verwenden, wählen Sie get-started.jsaus.
Bearbeiten Sie die Datei im Bereich Editor. Fügen Sie beispielsweise in der onClick Funktion der Demoseite hinzualert("The add button was clicked");.
Drücken Sie STRG+S (Windows, Linux) oder BEFEHL+S (macOS), um zu speichern. DevTools lädt dann die JavaScript-Datei in die JavaScript-Engine von Microsoft Edge, und die Änderungen werden sofort wirksam.
Testen Sie die Änderung. Klicken Sie beispielsweise auf der Demoseite auf die Schaltfläche Nummer 1 und Zahl 2 hinzufügen . Die Warnung wird angezeigt.

Die änderung, die Sie in DevTools vorgenommen haben, ist nützlich, um eine Fehlerbehebung schnell zu testen, ist aber temporär. Um die Änderung dauerhaft zu machen, müssen Sie die Änderung in Ihrem Quellcode vornehmen und die Datei dann erneut auf den Server hochladen.

Erläutern des Quellcodes mithilfe von Copilot in Edge

Wenn Sie eine Webseite überprüfen, benötigen Sie möglicherweise weitere Informationen zum Quellcode, der im Quellentool angezeigt wird. Mithilfe der Funktion Diese Codezeilen erklären erhalten Sie weitere Informationen zum Quellcode in Copilot in Edge:

Copilot in der Microsoft Edge-Randleiste mit dem Quellcode und der Erklärung.

Weitere Informationen zu diesem Feature finden Sie unter Erläutern des Quellcodes mithilfe von Copilot in Edge.

Neuformatieren einer verkneinigten JavaScript-Datei mit Pretty-Print

Um eine verkneinigte Datei für Menschen lesbar zu machen, klicken Sie unten im bereich Editor auf die Schaltfläche Format ().

Schaltfläche

Festlegen eines Haltepunkts, um Code anzuhalten

Legen Sie einen Haltepunkt fest, um Ihren Code mitten in der Laufzeit anzuhalten. Der einfachste und bekannteste Haltepunkttyp ist ein Zeilenhaltepunkt.

Verwenden Sie einen Zeilenhaltepunkt, wenn Sie den genauen Codebereich kennen, den Sie untersuchen müssen. DevTools hält immer an der angegebenen Codezeile an, bevor sie ausgeführt wird.

So legen Sie einen Zeilenhaltepunkt fest:

Öffnen Sie die Webseite, die Sie debuggen möchten, in einem neuen Fenster oder einer neuen Registerkarte. Sie können die Demoseite Erste Schritte beim Debuggen von JavaScript verwenden.
Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.
Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Quellen aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools ().
Wählen Sie im Bereich Navigator die Datei aus, die die Codezeile enthält, die Sie debuggen möchten. Wenn Sie die Demoseite verwenden, wählen Sie get-started.jsaus.
Klicken Sie auf den Bereich links neben der Zeilennummer für die Codezeile. Oder klicken Sie mit der rechten Maustaste auf die Zeilennummer, und wählen Sie dann Haltepunkt hinzufügen aus.

Neben der Zeilennummer wird dann ein roter Kreis angezeigt, der einen Haltepunkt angibt:

Das Festlegen von Zeilenhaltepunkten kann manchmal ineffizient sein, insbesondere wenn Sie nicht genau wissen, wo Sie suchen sollen, oder wenn Ihre Codebasis groß ist. Um beim Debuggen Zeit zu sparen, erfahren Sie, wie und wann die anderen Typen von Haltepunkten verwendet werden. Weitere Informationen finden Sie unter Anhalten von Code mit Haltepunkten.

Schrittweiser Code

Nachdem Der Code an einem Haltepunkt angehalten wurde, durchlaufen Sie den Code zeilenweise, und untersuchen Dabei ablaufsteuerungs- und Eigenschaftswerte. Informationen zum Anhalten an einem Haltepunkt finden Sie oben unter Festlegen eines Haltepunkts zum Anhalten von Code.

Schritt über eine Codezeile

Wenn Sie in einer Codezeile angehalten werden, die eine Funktion enthält, die für das zu debuggende Problem nicht relevant ist, klicken Sie auf die Schaltfläche Step over (), um die Funktion auszuführen, ohne sie schrittweise zu durchlaufen.

Klicken auf

Angenommen, Sie debuggen den folgenden Codeausschnitt:

function updateLabel() {
    var addend1 = getNumber1(); // A
    var addend2 = getNumber2(); // B
    var sum = addend1 + addend2; // C
    label.textContent = addend1 + " + " + addend2 + " = " + sum;
}
function getNumber1() {
    return inputs[0].value;
}
function getNumber2() {
    return inputs[1].value;
}

Sie werden auf Aangehalten. Nachdem Sie auf Schritt über geklickt haben, führt DevTools den gesamten Code in der getNumber1() Funktion aus und hält dann an B. Wenn Sie erneut auf Ausführen klicken, führt DevTools den gesamten Code in der getNumber2() Funktion aus und hält dann an C.

Schrittweises Ausführen einer Codezeile

Wenn Sie in einer Codezeile angehalten werden, die einen Funktionsaufruf enthält, der sich auf das Problem bezieht, das Sie debuggen, klicken Sie auf die Schaltfläche Step into (), um diese Funktion weiter zu untersuchen:

Klicken Sie auf

Angenommen, Sie debuggen den folgenden Code:

function updateLabel() {
    var addend1 = getNumber1(); // A
    var addend2 = getNumber2();
    var sum = addend1 + addend2;
    label.textContent = addend1 + " + " + addend2 + " = " + sum;
}
function getNumber1() {
    return inputs[0].value; // B
}
function getNumber2() {
    return inputs[1].value;
}

Sie werden auf Aangehalten. Nachdem Sie auf Schrittweise ausführen geklickt haben, führt DevTools diese Codezeile aus und hält dann an B.

Aus einer Codezeile heraustreten

Wenn Sie innerhalb einer Funktion angehalten werden, die nicht mit dem Problem, das Sie debuggen, zusammenhängt, klicken Sie auf die Schaltfläche Step out (), um den restlichen Code der Funktion auszuführen.

Klicken auf

Angenommen, Sie debuggen den folgenden Code:

function onClick() {
  if (inputsAreEmpty()) {
    label.textContent = "Error: one or both inputs are empty."; // B
    return;
  }

  updateLabel(); // C
}
function inputsAreEmpty() {
  if (getNumber1() === "" || getNumber2() === "") { // A
    return true;
  } else {
    return false;
  }
}

Sie werden auf Aangehalten. Nachdem Sie auf Step out geklickt haben, führt DevTools den restlichen Code in inputsAreEmpty()aus und hält dann bei an B , wenn inputsAreEmpty zurückgegeben wird true, oder andernfalls C angehalten wird.

Ausführen des gesamten Codes bis zu einer bestimmten Zeile

Beim Debuggen einer langen Funktion gibt es möglicherweise viel Code, der nicht mit dem Problem zusammenhängt, das Sie debuggen.

Sie können alle Zeilen der Funktion einzeln durchlaufen, indem Sie mehrmals auf die Schaltfläche Schritt über ( über) klicken.
Etwas besser: Sie können einen Zeilenhaltepunkt für die Gewünschte Zeile festlegen und dann auf die Schaltfläche Skriptausführung fortsetzen () klicken.
Aber es gibt einen schnelleren Weg: Klicken Sie mit der rechten Maustaste auf die Codezeile, und wählen Sie dann Weiter mit hier aus:

DevTools führt den gesamten Code bis zu diesem Punkt aus und hält dann in dieser Zeile an.

Starten Sie die oberste Funktion der Aufrufliste neu.

Wenn Sie in der ersten Zeile der obersten Funktion in Ihrer Aufrufliste anhalten möchten, während sie in einer Codezeile angehalten werden, klicken Sie mit der rechten Maustaste auf den Bereich Aufrufliste , und wählen Sie dann Frame neu starten aus. Die top-Funktion ist die letzte Funktion, die ausgeführt wurde.

Der folgende Code ist ein Beispiel, das Sie schrittweise durchlaufen können:

function updateLabel() {
  var addend1 = getNumber1(); // B
  var addend2 = getNumber2();
  var sum = addend1 + addend2;
  label.textContent = addend1 + " + " + addend2 + " = " + sum; // A
}

Sie werden auf Aangehalten. Nachdem Sie Frame neu starten ausgewählt haben, werden Sie auf Bangehalten, ohne dass Sie einen Haltepunkt für diese Zeile festlegen und Skriptausführung fortsetzen auswählen müssen.

Auswählen von Frame neu starten

Fortsetzen der Skriptausführung

Um die Laufzeit nach einer Pause des Skripts fortzusetzen, klicken Sie auf die Schaltfläche Skriptausführung fortsetzen (). DevTools führt das Skript bis zum nächsten Haltepunkt aus, falls vorhanden.

Klicken auf die Schaltfläche Skriptausführung fortsetzen

Skriptausführung erzwingen

Um alle Haltepunkte zu ignorieren und zu erzwingen, dass ihr Skript weiter ausgeführt wird, klicken und halten Sie die Schaltfläche Skriptausführung fortsetzen () und dann auf die Schaltfläche Skriptausführung erzwingen ().

Klicken auf die Schaltfläche Skriptausführung erzwingen

Ändern des Threadkontexts

Wenn Sie mit Web-Workern oder Service-Workern arbeiten, klicken Sie auf einen Kontext, der im Bereich Threads aufgeführt ist, um zu diesem Kontext zu wechseln. Der blaue Pfeil gibt an, welcher Kontext derzeit ausgewählt ist:

Bereich

Angenommen, Sie werden an einem Haltepunkt sowohl in Ihrem Standard-Skript als auch in Ihrem Service Worker-Skript angehalten. Sie möchten die lokalen und globalen Eigenschaften für den Service Worker-Kontext anzeigen, aber das Tool Quellen zeigt den Standard Skriptkontext an. Um zum Dienst-Worker-Kontext zu wechseln, klicken Sie im Bereich Threads auf den Eintrag Service Worker.

Anzeigen und Bearbeiten von Eigenschaften und Variablen

Verwenden Sie den Bereich Bereich , um die Werte von Eigenschaften und Variablen in den lokalen, schließenden und globalen Bereichen anzuzeigen und zu bearbeiten, während sie in einer Codezeile angehalten werden.

Doppelklicken Sie auf einen Eigenschaftswert, um ihn zu ändern.
Nicht aufzählbare Eigenschaften sind abgeblendet.

Bereich

Sehen Sie sich die Werte von JavaScript-Ausdrücken an.

Verwenden Sie den Bereich Überwachen, um die Werte benutzerdefinierter Ausdrücke zu watch. Sie können einen beliebigen gültigen JavaScript-Ausdruck watch.

Der Überwachungsbereich

Um einen neuen watch Ausdruck zu erstellen, klicken Sie auf die Schaltfläche Watch Ausdruck hinzufügen ().
Um die Werte aller vorhandenen Ausdrücke zu aktualisieren, klicken Sie auf die Schaltfläche Aktualisieren (). Werte werden automatisch aktualisiert, während Code schrittweise durchlaufen wird.
Um einen watch Ausdruck zu löschen, klicken Sie mit der rechten Maustaste auf den Ausdruck, und wählen Sie dann watch Ausdruck löschen aus.

Anzeigen der Aufrufliste

Während sie in einer Codezeile angehalten sind, können Sie im Bereich Aufrufliste die Aufrufliste anzeigen, die Sie zu diesem Punkt brachte.

Klicken Sie auf einen Eintrag, um zu der Codezeile zu springen, in der diese Funktion aufgerufen wurde. Das blaue Pfeilsymbol gibt an, welche Funktion DevTools derzeit hervorhebung:

Der Bereich

Hinweis

Wenn sie nicht in einer Codezeile angehalten wird, ist der Bereich Aufrufliste leer.

Kopieren einer Stapelüberwachung

Um die aktuelle Aufrufliste in die Zwischenablage zu kopieren, klicken Sie mit der rechten Maustaste auf den Bereich Aufrufliste , und wählen Sie dann Stapelablaufverfolgung kopieren aus:

Befehl

Der folgende Code ist ein Beispiel für die Ausgabe:

getNumber2 (get-started.js:40)
inputsAreEmpty (get-started.js:24)
onClick (get-started.js:16)

Ignorieren eines Skripts oder Eines Skriptmusters

Um ein Skript während des Debuggens zu ignorieren, fügen Sie das Skript der Liste Ignorieren hinzu. Wenn ein Skript in der Liste "Ignorieren" enthalten ist, wird das Skript im Bereich Aufrufliste verdeckt, und Sie treten niemals in die Funktionen des Skripts ein, wenn Sie Ihren Code schrittweise durchlaufen.

Im folgenden Codeausschnitt verwendet libzeile A beispielsweise , eine Drittanbieterbibliothek. Wenn Sie sicher sind, dass das Problem, das Sie debuggen, nicht mit dieser Drittanbieterbibliothek zusammenhängt, ist es sinnvoll, das Skript der Liste Ignorieren hinzuzufügen:

function animate() {
    prepare();
    lib.doFancyStuff(); // A
    render();
}

Hinzufügen eines Skripts zur Liste "Ignorieren" aus dem bereich "Editor"

So fügen Sie der Liste "Ignorieren" aus dem Bereich "Editor" ein Skript hinzu:

Öffnen Sie die Datei.
Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle in der Datei, und wählen Sie dann Add script to ignore list (Skript zum Ignorieren hinzufügen) aus:

Hinzufügen eines Skripts zur Liste "Ignorieren" aus dem Bereich "Aufrufliste"

So fügen Sie der Liste "Ignorieren " aus dem Bereich Aufrufliste ein Skript hinzu:

Anhalten von Code an einem Haltepunkt.
Klicken Sie im Bereich Aufrufliste mit der rechten Maustaste auf eine Funktion, und wählen Sie dann Add script to ignore list (Skript zum Ignorieren hinzufügen) aus:

Hinzufügen eines Skripts zur Liste "Aus Einstellungen ignorieren"

So fügen Sie ein einzelnes Skript oder ein Skriptmuster zur Liste ignorieren aus Den Einstellungen hinzu:

Um Einstellungen zu öffnen, klicken Sie in DevTools auf das Symbol DevTools anpassen und steuern (), und klicken Sie dann auf Einstellungen (). Oder drücken Sie F1, während DevTools den Fokus hat.
Navigieren Sie zur Seite Liste ignorieren der Einstellungen.
Klicken Sie auf die Schaltfläche Muster hinzufügen . Ein vorgeschlagenes Muster wird angezeigt: /framework\.js$
Geben Sie den Skriptnamen oder ein RegEx-Muster von Skriptnamen ein, die der Liste "Ignorieren" hinzugefügt werden sollen.
Klicken Sie auf die Schaltfläche Hinzufügen.

Ausführen von Debugcodeausschnitten von einer beliebigen Seite

Wenn Sie denselben Debugcode im Konsolentool immer wieder ausführen, sollten Sie die Verwendung von Codeausschnitten in Betracht ziehen. Codeausschnitte sind Laufzeitskripts, die Sie in DevTools erstellen, speichern und ausführen.

Weitere Informationen finden Sie unter Ausführen von JavaScript-Codeausschnitten auf einer beliebigen Webseite.

Verwenden Sie `# sourceURL` zum Benennen von ausgewerteten und Inlinecode in DevTools

Um einen Codeblock, bei dem es sich nicht um eine Datei handelt, über einen Dateinamen in DevTools zu erstellen, einschließlich im Quellentool , verwenden Sie das # sourceURL Pragma in einem Kommentar.

Codeblöcke, die keine Dateien sind, umfassen:

JavaScript-Code, der mit der eval() -Funktion ausgeführt wird.
JavaScript-Code, der sich in einem <script> Tag befindet.
CSS-Code, der sich in einem <style> Tag befindet.

Wenn der Browser die oben genannten Codearten ausführt, verfügt DevTools nicht über einen Dateinamen, um diese Codeblöcke anzuzeigen, und die Codeblöcke erhalten generische Namen oder werden überhaupt nicht angezeigt.

Dateinamen werden in der gesamten DevTools-Benutzeroberfläche angezeigt, z. B. an den folgenden Speicherorten:

Der Bereich Navigator des Quellentools .
Die Aufrufliste im Debuggerbereich des Quellentools .
Die Registerkarte der Datei im Bereich Editor des Tools Quellen.
Protokollieren, Warnungen und Fehlermeldungen im Konsolentool .
Das Flammendiagramm im Leistungstool .

Das # sourceURL Pragma mit der Syntax //# sourceURL=my-assigned-file-name.js oder /*# sourceURL=my-assigned-file-name.css*/ist ein spezieller Kommentar, der ausgewerteten und Inlinecode einen virtuellen Dateinamen in DevTools gibt.

Verwenden Sie das # sourceURL Pragma, um Codeblöcken, die keine Dateien sind, einen virtuellen Dateinamen zu geben, um diesen Dateinamen im Quellentool und in devTools anzuzeigen. Zum Beispiel:

Für JavaScript:

function sum(a, b) {
  return a + b;
}

console.log(sum(1, 2));

//# sourceURL=math-utilities.js

Für CSS:

.card {
  padding: 1rem;
  border-radius: 0.5rem;
}

/*# sourceURL=card-styles.css*/

Daher zeigt DevTools diese Codeblöcke zusammen mit ihren angegebenen virtuellen Dateinamen für sie an (math-utilities.js und card-styles.css):

Die Quellen- und Konsolentools mit den virtuellen Dateinamen

Siehe auch

Erste Schritte beim Debuggen von JavaScript : Ein einfaches, kurzes Tutorial mit vorhandenem Code mit Screenshots.
Übersicht über das Quellentool : Das Quellentool enthält den JavaScript-Debugger und -Editor.
Deaktivieren Sie JavaScript.