Haltepunkteinstellungen und Debugging-Tipps zum Debuggen von JavaScript mithilfe von Chrome_javascript-Tipps

Wie debuggen Sie JavaScript-Programme? Die primitivste Methode ist die Verwendung von „alert()“ zum Drucken von Inhalten auf der Seite. Eine leicht verbesserte Methode besteht darin, „console.log()“ zum Ausgeben von Inhalten auf der JavaScript-Konsole zu verwenden. Nun, diese beiden Methoden haben tatsächlich die Debugging-Probleme vieler kleiner JavaScript-Skripte gelöst. Aber es wäre eine Schande, die immer leistungsfähigeren Entwicklertools von Chrome ungenutzt zu lassen. In diesem Artikel werden hauptsächlich die JavaScript-Haltepunkteinstellungs- und Debugging-Funktionen vorgestellt, bei denen es sich um das Quellenfenster (früher Skripte genannt) handelt. Wenn Sie mit verschiedenen Java-Debugging-Techniken in Eclipse vertraut sind, sind die Konzepte hier ähnlich. Die zum Zeitpunkt des Verfassens dieses Artikels verwendete Chrome-Version ist 25.0.1364.172.

Grundlegende Umgebung

Die linke Seite von SourcesPanel ist die Inhaltsquelle, einschließlich verschiedener Ressourcen auf der Seite. Unter ihnen sind sie in Quellen- und Inhaltsskripte unterteilt. Quellen sind die verschiedenen Ressourcen, die auf der Seite selbst enthalten sind. Sie sind nach den auf der Seite angezeigten Domänen geordnet. Auch asynchron geladene js-Dateien werden hier nach dem Laden angezeigt. Inhaltsskripte sind eine Erweiterung von Chrome. Sie sind nach der Erweiterungs-ID organisiert. Solche Erweiterungen sind tatsächlich in die Seite eingebettet. Sie können auch das DOM lesen und schreiben. Entwickler, die solche Erweiterungen schreiben und debuggen, müssen sich um sie kümmern. Wenn in Ihrem Browser keine Erweiterungen installiert sind, sehen Inhaltsskripte nichts.

Der mittlere Hauptbereich des Quellenbereichs dient zur Anzeige des Inhalts der Ressourcendateien auf der linken Seite.

Die rechte Seite des Quellenfensters ist das Debugging-Menüband. In der oberen Reihe befinden sich die Schaltflächen „Pause/Fortfahren“, „Einzelschritt-Ausführung“, „Einzelschritt-In“, „Einzelschritt-Aus“ und „Alle Haltepunkte deaktivieren/aktivieren“. Nachfolgend sind verschiedene spezifische Funktionsbereiche aufgeführt. Später eingeführt.

Beachten Sie, dass der linke und der rechte Bereich möglicherweise standardmäßig verkleinert sind und nicht auf beiden Seiten angezeigt werden. Klicken Sie auf die Schaltflächen zum Verkleinern auf beiden Seiten , um sie anzuzeigen. Der Bereich auf der linken Seite wird bei der Anzeige standardmäßig automatisch verkleinert. Durch Klicken auf die Pin-Schaltfläche daneben wird er nicht verkleinert.

Außerdem befinden sich unten einige nützliche Funktionstasten.

Setzen Sie einen Haltepunkt für den Quellcode

Öffnen Sie die entsprechende JavaScript-Datei über die Inhaltsquelle auf der linken Seite und klicken Sie auf die Zeilennummer der Datei, um Haltepunkte festzulegen und zu löschen. Jeder hinzugefügte Haltepunkt wird in der Haltepunktliste im Debugging-Bereich auf der rechten Seite angezeigt. Durch Klicken auf den Haltepunkt in der Liste wird der Haltepunkt im Inhaltsbereich gefunden. Wenn Sie mehrere Dateien und mehrere Haltepunkte haben, ist es sehr praktisch, die Haltepunkte in der Haltepunktliste zu verwenden, um sie schnell zu finden.

Für jeden hinzugefügten Haltepunkt gibt es zwei Zustände: aktiviert und deaktiviert. Die gerade hinzugefügten Haltepunkte befinden sich alle im aktivierten Zustand. Der deaktivierte Zustand bedeutet, dass der Haltepunkt beibehalten wird, die Haltepunktfunktion jedoch vorübergehend abgebrochen wird. Vor jedem Haltepunkt befindet sich in der Haltepunktliste ein Kontrollkästchen. Durch Deaktivieren wird der Haltepunkt deaktiviert. Haltepunkte können auch im Kontextmenü der Haltepunktposition deaktiviert werden. Sie können auch alle hinzugefügten Haltepunkte vorübergehend über die Schaltfläche im rechten Menüband deaktivieren und erneut klicken, um den ursprünglichen Zustand wiederherzustellen.

Bedingter Haltepunkt: Wählen Sie „Haltepunkt bearbeiten…“ im Kontextmenü der Haltepunktposition, um die Bedingungen für das Auslösen des Haltepunkts festzulegen, d. h. einen Ausdruck zu schreiben und ihn nur dann auszulösen, wenn Der Ausdruck ist ein wahrer Haltepunkt. Sehen Sie sich den Umgebungsaufrufstapel (Call Stack) des Haltepunkts an: Wenn der Haltepunkt stoppt, zeigt der Aufrufstapel im Debugging-Bereich rechts den Methodenaufrufstapel an, in dem sich der aktuelle Haltepunkt befindet. Beispielsweise gibt es eine Funktion g( ), die eine Funktion f() aufruft, und ich einen Haltepunkt in f() setze, dann wird der Haltepunkt ausgelöst, wenn ich die Funktion g() in der Konsole ausführe, und der Aufrufstapel wird wie folgt angezeigt:

Oben ist f(), dann g(). Jede Ebene im Aufrufstapel wird als Frame bezeichnet. Klicken Sie auf jeden Frame, um zum Aufrufpunkt des Frames zu springen.

Darüber hinaus können Sie auch das Rechtsklick-Menü auf dem Frame verwenden, um die Ausführung des aktuellen Frames neu zu starten, d. h. vom Anfang des Frames an auszuführen. Wenn Sie Frame beispielsweise im Frame der Funktion f() neu starten, springt der Haltepunkt zum Anfang von f() und wird erneut ausgeführt, und die Variablenwerte im Kontext werden ebenfalls wiederhergestellt. Auf diese Weise können Sie in Kombination mit Funktionen wie Variablenänderung und Codebearbeitung wiederholt im aktuellen Frame debuggen, ohne die Seite zu aktualisieren und erneut Haltepunkte auszulösen. Variablen anzeigen

Unter der Liste „Aufrufstapel“ befindet sich die Liste „Bereichsvariablen“, in der Sie derzeit die Werte lokaler Variablen und globaler Variablen anzeigen können. Ausgewählten Code ausführen

Beim Debuggen von Haltepunkten können Sie mit der Maus die Variable oder den Ausdruck auswählen, die Sie anzeigen möchten, und dann mit der rechten Maustaste auf das Menü klicken und „In Konsole auswerten“ ausführen, um den aktuellen Wert des Ausdrucks anzuzeigen. Unterbrechen Sie die JavaScript-Anweisung, die beim nächsten Mal ausgeführt werden soll. Die Schaltfläche „Unterbrechen/Weiter“ auf der rechten Seite des Debugging-Bereichs hat auch eine Funktion. Wenn der Haltepunkt nicht ausgelöst wird, wird der Interrupt-Status „vorbereiten“ aufgerufen Das nächste Mal wird die Seite automatisch unterbrochen, wenn eine JavaScript-Anweisung ausgeführt wird, z. B. Code, der ausgeführt wird, wenn eine Klickaktion ausgelöst wird. Beim Debuggen von Code wird normalerweise eine vorübergehende Änderung des JavaScript-Codes verwendet: Code ändern → Seite aktualisieren → erneut überprüfen, ein solcher Zyklus. Tatsächlich können Sie in Chrome den Inhalt der JS-Datei jedoch vorübergehend ändern, sie speichern (Strg S) und sie wird sofort wirksam. In Kombination mit Funktionen wie der Konsole können Sie sofort ein erneutes Debuggen durchführen. Bitte beachten Sie jedoch, dass diese Änderung vorübergehend ist und beim Aktualisieren der Seite verloren geht.

Haltepunkt bei Ausnahme

Sie können die Schaltfläche unten in der Benutzeroberfläche sehen. Es handelt sich um einen Schalter, der festlegt, ob das Programm unterbrochen werden soll, wenn es beim Ausführen auf eine Ausnahme stößt. Durch Klicken auf diese Schaltfläche wird zwischen drei Zuständen gewechselt:

Standardmäßig wird es nicht unterbrochen, wenn Ausnahmen auftreten

Wird unterbrochen, wenn alle Ausnahmen auftreten, einschließlich abgefangener Fälle

Nur ​​bei nicht erfasster Ausnahme unterbrechen

Erklären Sie hauptsächlich den Unterschied zwischen Zustand 2 und Zustand 3

Versuchen Sie es{
wirf 'eine Ausnahme';
}catch(e){
console.log(e);
}

Der Code im obigen Versuch wird auf eine Ausnahme stoßen, aber der folgende Catch-Code kann die Ausnahme abfangen. Wenn alle Ausnahmen unterbrochen werden, unterbricht der Code automatisch, wenn er die throw-Anweisung erreicht, die eine Ausnahme generiert. Wenn er nur dann unterbricht, wenn nicht abgefangene Ausnahmen auftreten, gibt es hier keine Unterbrechung. Im Allgemeinen machen wir uns mehr Sorgen über nicht abgefangene Ausnahmen.

Setzen Sie einen Haltepunkt für ein DOM-Element

Manchmal müssen wir die Änderung eines bestimmten DOM überwachen, unabhängig davon, welche Codezeile geändert wird (sie kann an mehreren Stellen geändert werden). Dann können wir Haltepunkte direkt im DOM setzen.

Wie in der Abbildung gezeigt, können Sie im Elementebereich der Elementinspektion im Kontextmenü eines Elements Haltepunkte in drei verschiedenen Situationen festlegen: Der untergeordnete Knoten ändert seine eigenen Attribute, ändert seinen eigenen Knoten und wird gelöscht und ausgewählt, in der Mitte rechts im Quellenbereich. Der DOM-Haltepunkt wird in der Liste der DOM-Haltepunkte an der Seite angezeigt. Sobald der Code ausgeführt wird, um entsprechende Änderungen am DOM vorzunehmen, stoppt er dort, wie in der folgenden Abbildung dargestellt.

XHR-Haltepunkt

Im Debugging-Bereich auf der rechten Seite gibt es einen XHR-Haltepunkt und geben Sie die in der URL enthaltene Zeichenfolge ein, um die Ajax-Anfrage der URL zu überwachen. Wenn nichts ausgefüllt ist, werden alle XHR-Anfragen abgehört. Sobald der XHR-Aufruf ausgelöst wird, wird er bei request.send() unterbrochen.

Haltepunkte nach Ereignistyp auslösen

Ereignis-Listener-Liste im Debugging-Bereich auf der rechten Seite, hier werden verschiedene mögliche Ereignistypen aufgelistet. Überprüfen Sie den entsprechenden Ereignistyp und er unterbricht automatisch, wenn der JavaScript-Code dieses Ereignistyps ausgelöst wird.

Debugging-Tastenkombinationen

Die Tastenkombinationen in allen Entwicklungstools finden Sie in den Einstellungen in der unteren rechten Ecke der Benutzeroberfläche. F8, F10, F11 oder Shitf F11 werden im Allgemeinen zum Debuggen von Haltepunkten verwendet, aber unter Mac OS können Funktionstasten wie F10 mit den Standard-Tastenkombinationen des Systems in Konflikt geraten. Es spielt keine Rolle, sie können durch Cmd / , Cmd ' , Cmd ; ersetzt werden. //@ sourceURL Benennen Sie den von eval generierten Code. Manchmal wird ein sehr dynamischer Code im aktuellen Javascript-Kontext in Form einer Zeichenfolge durch die Funktion eval() erstellt, anstatt als unabhängige JS-Datei geladen zu werden. Auf diese Weise können Sie die Datei nicht im linken Inhaltsbereich finden, was das Debuggen erschwert. Tatsächlich müssen wir am Ende des von eval erstellten Codes nur eine Zeile „//@ sourceURL=name“ hinzufügen, um diesen Code zu benennen (der Browser behandelt diese spezielle Form von Kommentaren speziell). Damit wird es im Inhaltsbereich auf der linken Seite angezeigt, genau wie Sie eine JS-Datei mit einem bestimmten Namen geladen haben, und Sie können Haltepunkte festlegen und debuggen. Im Bild unten führen wir einen Codeabschnitt über eval aus und benennen ihn mithilfe von sourceURL als „dynamicScript.js“. Nach der Ausführung erscheint diese „Datei“ im linken Inhaltsbereich und ihr Inhalt ist der Inhalt in eval. Sehen Sie sich auch dieses Beispiel für die Benennung von dynamisch kompiliertem CoffeeScript-Code an:

var Coffee = CoffeeScript.compile(code.value) "//@ sourceURL=" (evalName.value || "Coffeeeeeeee!");
eval(Kaffee);

Tatsächlich kann //@ sourceURL nicht nur im Eval-Code verwendet werden, sondern auch in jeder JS-Datei oder sogar in Code, der in die Javascript-Konsole eingegeben wird, mit dem gleichen Effekt! Die Schaltfläche „Code formatieren (Pretty Print)“ wird verwendet, um unordentlichen Code in schönen Code umzuformatieren. Beispielsweise sind einige komprimierte JS-Dateien grundsätzlich nicht lesbar, geschweige denn debuggen. Klicken Sie einmal, um die Formatierung durchzuführen, und klicken Sie erneut, um die Formatierung abzubrechen. Vor der Verschönerung
Referenzmaterialien nach der Verschönerung: Offizielle Dokumentation der Chrome Developer Tools