Wie debuggen Sie JavaScript -Programme? Die primitivste Methode besteht darin, Alert () zum Drucken von Inhalten auf der Seite zu verwenden, und eine leicht verbesserte Methode besteht darin, Console.log () zu verwenden, um Inhalte auf der JavaScript -Konsole auszugeben. Die Verwendung dieser beiden Methoden hat in der Tat viele Debugging -Probleme kleiner JavaScript -Skripte gelöst. Es wäre jedoch schade, keine Entwickler -Tools zu verwenden, die in Chrom immer leistungsfähiger werden. In diesem Artikel wird hauptsächlich die Breakpoint- und Debugging -Funktionen von JavaScript vorgestellt, dh das Quellbereich (früher als Skripte genannte Skripte). Wenn Sie verschiedene Java -Debugging -Techniken in Eclipse beherrschen, sind die Konzepte hier ähnlich. Die beim Schreiben dieses Artikels verwendete Chromversion ist 25.0.1364.172.
Grundlegende Umgebung
Links von der Quellespanel befindet sich die Inhaltsquelle, einschließlich verschiedener Ressourcen auf der Seite. Unter ihnen ist es in Quellen und Inhaltskripte unterteilt. Quellen sind verschiedene Ressourcen, die auf der Seite selbst enthalten sind. Sie sind nach den Domänen organisiert, die auf der Seite erscheinen, worauf wir achten müssen. Asynchron geladene JS -Dateien werden auch hier nach dem Laden angezeigt. Inhaltskripte sind eine Chromerweiterung, die gemäß der Erweiterungs -ID organisiert ist. Diese Art von Erweiterung ist tatsächlich eine in der Seite eingebettete Ressource und kann auch DOM lesen und schreiben. Nur Entwickler, die solche Erweiterungen schreiben und debuggen, sollten sich um sie kümmern. Wenn in Ihrem Browser keine Erweiterungen installiert sind, werden Inhaltskripte nichts angezeigt.
Der mittlere Hauptbereich des Quellenbereichs wird verwendet, um den Inhalt der Ressourcendatei links anzuzeigen.
Auf der rechten Seite des Quellenpanels befindet sich der Debugging -Funktionsbereich. Die obere Reihe von Tasten ist eine Pause/Weitergabe, Schritt-für-Schritt, Schritt-für-Schritt-Einsprung, Schritt-für-Schritt-Sprung, Deaktivieren/Aktivieren Sie alle Haltepunkte. Im Folgenden finden Sie verschiedene spezifische Funktionsbereiche. Dies wird später eingeführt.
Beachten Sie, dass die Bereiche auf beiden Seiten standardmäßig schrumpfen und nicht auf beiden Seiten angezeigt werden. Klicken Sie auf beiden Seiten auf die teleskopischen Tasten, um angezeigt zu werden. Wenn der linke Bereich angezeigt wird, wird die Standardeinstellung automatisch schrumpfen. Klicken Sie daneben auf die Pin -Schaltfläche und es wird nicht zurückgezogen.
Am unteren Rand stehen auch einige Feature -Tasten, die sehr nützlich sind.
Legen Sie den Haltepunkt auf Quellcode fest
Öffnen Sie über die Inhaltsquelle links die entsprechende JavaScript -Datei, klicken Sie auf die Dateizeilennummer und legen Sie die Haltepunkte fest und löschen Sie sie. Jeder hinzugefügte Haltepunkt wird in der Liste der Haltepunkte im Debug -Bereich rechts angezeigt. Wenn Sie auf den Listen -Haltepunkt klicken, finden Sie den Haltepunkt im Inhaltsbereich. Wenn Sie über mehrere Dateien und mehrere Haltepunkte verfügen, ist es sehr bequem, die Haltepunkte in der Liste der Haltepunkte schnell zu finden.
Für jeden zusätzlichen Haltepunkt gibt es zwei Zustände: aktivieren und deaktivieren. Die gerade hinzugefügten Haltepunkte sind alle aktivierten Zustände, und der behinderte Zustand besteht darin, den Haltepunkt beizubehalten, aber die Haltepunktfunktion vorübergehend abbrechen. Vor jedem Haltepunkt in der Liste der Haltepunkte gibt es ein Kontrollkästchen, und das Unabteil wird den Haltepunkt deaktiviert. Breakpoints können im rechten Klickmenü der Haltepunktposition auch deaktiviert werden. Sie können auch alle zusätzlichen Haltepunkte auf der Schaltfläche in der rechten Band vorübergehend deaktivieren und darauf klicken, um den ursprünglichen Status wiederherzustellen.
Bedingter Breakpoint : Wählen Sie "Breakpoint ..." im rechten Maustaste des Breakpoint-Positions auswählen, um die Bedingung festzulegen, um den Breakpoint, das heißt, einen Ausdruck zu auslösen, und der Breakpoint wird nur ausgelöst, wenn der Ausdruck wahr ist. Überprüfen Sie den Umgebungs -Call -Stapel von Haltepunkten (Anrufstapel): Wenn der Haltepunkt stoppt, zeigt der Anrufstapel im Debugging -Bereich auf der rechten Seite den Methoden -Anrufstack an, in dem sich der aktuelle Haltepunkt befindet. Zum Beispiel gibt es eine Funktion g (), in der die Funktion f () aufgerufen wird, und ich habe einen Haltepunkt in f () festgelegt. Wenn ich dann die Funktion g () in der Konsole ausführe, wird der Haltepunkt ausgelöst und der Anrufstapel wie folgt angezeigt:
Das Oberteil ist f () und dann g (). Jede Schicht im Anrufstapel wird als Rahmen bezeichnet. Wenn Sie auf jeden Frame klicken, können Sie zum Aufrufpunkt dieses Rahmens springen.
Darüber hinaus können Sie die Ausführung des aktuellen Frame im Rahmen mit dem Rechtsklickmenü ab dem Beginn des Frame neu starten. Zum Beispiel wird im Rahmen der Funktion f () der Haltepunkt zum Beginn von f () und erneut ausgesetzt, und der variable Wert im Kontext wird ebenfalls wiederhergestellt. Auf diese Weise können Sie bei Kombination von Funktionen wie Variablenänderung und Codebearbeitung wiederholt im aktuellen Frame debuggen, ohne die Seite zu aktualisieren und den Haltepunkt erneut auszulösen. Variablen anzeigen
Unterhalb der Liste der Anrufstapelliste befindet sich die Liste der Umfangsvariablen, in der Sie die Werte lokaler und globaler Variablen zu diesem Zeitpunkt anzeigen können. Führen Sie den ausgewählten Code aus
Während des Breakpoint-Debuggens können Sie die Maus verwenden, um die Variable oder den Ausdruck auszuwählen, die Sie anzeigen möchten, und dann mit der rechten Maustaste auf das Menü klicken, um "Evaluse in Console" auszuführen, um den aktuellen Wert des Ausdrucks anzuzeigen. Die Schaltfläche "Interrupt/Weitergabe" oben im Debugging -Bereich auf der rechten Seite der JavaScript -Anweisung, die das nächste Mal ausgeführt werden soll, hat eine Funktion. Wenn kein Breakpoint ausgelöst wird, wird der Interrupt -Status "Vorbereitung" eingeleitet. Wenn die Seite das nächste Mal die JavaScript -Anweisung ausführt, unterbricht sie automatisch, z. B. den Code, der ausgeführt wird, wenn eine Klickaktion ausgelöst wird. Vorübergehend ändern JavaScript -Code. Bei Debugging -Code gewöhnen wir uns normalerweise an diese Schleife: Ändern Sie den Code → Aktualisieren Sie die Seite → Wiederholung. Tatsächlich kann der Inhalt in der JS -Datei jedoch in Chrome vorübergehend geändert werden. Speichern (Strg+S) kann sofort wirksam werden und es sofort mit Konsole und anderen Funktionen neu entfernen. Bitte beachten Sie jedoch, dass diese Änderung vorübergehend ist und die Änderung der Aktualisierungsseitenveränderung verschwunden ist.
Bruchpunkt in der Ausnahme
Sie können die Schaltfläche unterhalb der Schnittstelle sehen. Es handelt sich um einen Schalter, der festlegt, ob das Programm unterbrochen wird, wenn es eine Ausnahme beim Laufen trifft. Wenn Sie auf diese Schaltfläche klicken, wechselt zwischen 3 Zuständen:
Standardmäßig wird keine Unterbrechung auftreten
Alle Ausnahmen werden unterbrochen, einschließlich erfasster Situationen
Interrupt nur, wenn eine ungewöhnliche Ausnahme eintritt
Erklären Sie hauptsächlich den Unterschied zwischen Zustand 2 und Zustand 3
versuchen{
Wirf 'eine Ausnahme';
} catch (e) {
console.log (e);
}
Der Code im obigen Versuch stößt auf eine Ausnahme, aber der Catch -Code dahinter kann die Ausnahme aufnehmen. Wenn alle Ausnahmen unterbrochen werden, unterbricht der Code automatisch, wenn er in die Wurfanweisung ausgeführt wird, die eine Ausnahme erzeugt. Und wenn es nur unterbrochen wird, wenn es auf eine ungewöhnliche Ausnahme stößt, wird es hier nicht unterbrochen. Im Allgemeinen werden wir mehr besorgt darüber sind, auf unbekannte Ausnahmen zu stoßen.
Setzen Sie Breakpoints auf DOM -Elementen
Manchmal müssen wir uns anhören, dass ein bestimmtes DOM geändert wird, ohne sich darum zu kümmern, welche Codelinie geändert wird (oder es gibt möglicherweise viele Orte, die geändert werden). Dann können wir Breakpoints direkt auf das DOM festlegen.
Wie in der Abbildung gezeigt, können Sie in der Elemente-Elemente-Überprüfung drei Haltepunkte im Rechtsklickmenü in einem Element festlegen: Nachdem der untergeordnete Knoten seine eigenen Attribute modifiziert und einen eigenen Knoten modifiert wurde, wird der DOM-Haltepunkt in der DOM-Haltepunktliste auf der rechten Seite des Quellenpanels angezeigt. Sobald der Code entsprechende Änderungen an der DOM vorgenommen wurde, wird der Code dort gestoppt, wie in der folgenden Abbildung gezeigt.
Xhr Break -Punkt
Auf der rechten Seite befindet sich XHR -Haltepunkte im Debugging -Bereich. Klicken Sie auf + und geben Sie die in der URL enthaltene Zeichenfolge ein, um die AJAX -Anforderung für die URL anzuhören. Der Eingangsinhalt entspricht dem Filter der URL. Wenn nichts ausgefüllt ist, hören Sie sich alle XHR -Anfragen an. Sobald der XHR -Anruf ausgelöst ist, wird er an der Stelle untergebracht, an der Anfrage beantragt wird. Send () wird angefordert.
Trigger -Haltepunkt nach Ereignistyp
Die Liste der Event -Hörer im Debug -Bereich rechts, in dem verschiedene mögliche Ereignisstypen aufgeführt sind. Überprüfen Sie den entsprechenden Ereignisart und unterbrechen automatisch, wenn der JavaScript -Code, der das Ereignis dieses Typs auslöst.
Debugg -Verknüpfungsschlüssel
Die Abkürzungsschlüssel in allen Entwicklungswerkzeugen finden Sie in den Einstellungen in der unteren rechten Ecke der Schnittstelle. F8, F10, F11 oder Shitf+F11 wird im Allgemeinen bei Debuggen von Haltepunkten verwendet, aber Funktionstasten wie F10 können mit den Standard -Verknüpfungsschlüssel des Systems in Konflikt stehen. Es spielt keine Rolle, sie können durch CMD+/, CMD+', CMD+ersetzt werden; Verschiebung+cmd+; jeweils. //@ sourceURL Nennen Sie den von Eval erstellten Code. Manchmal werden im aktuellen JavaScript -Kontext ein sehr dynamischer Code in der Form einer String über die Funktion eval () erstellt, anstatt als separate JS -Datei zu laden. Auf diese Weise finden Sie die Datei nicht im Inhaltsbereich links, daher ist es schwierig zu debuggen. Tatsächlich fügen wir einfach eine Zeile "//@ SourceUrl = Name" am Ende des von Eval erstellten Codes hinzu, um diesen Code zu nennen (der Browser behandelt diese spezielle Form von Kommentaren speziell), so dass er im Inhaltsbereich links angezeigt wird, genau wie Sie eine JS -Datei mit einem bestimmten Namen laden, Sie können Breakpoint und Debuggen festlegen. In der folgenden Abbildung führen wir ein Stück Code über Evaly aus und verwenden SourceURL, um es dynamiccript.js zu nennen. Nach der Ausführung wird diese "Datei" im Inhaltsbereich links angezeigt, und sein Inhalt ist der Inhalt in Eval. Sie können sich auch dieses Beispiel ansehen, um den dynamisch kompilierten Coffeescript -Code zu benennen:
var coffee = coffeeescript.comPile (Code.Value) + "//@ SourceURL =" + (EvalName.Value || "Coffeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
Eval (Kaffee);
Tatsächlich kann //@ SourceURL nicht nur im Eval -Code verwendet werden, sondern auch in jeder JS -Datei oder sogar der von JavaScript Console eingegebene Code mit dem gleichen Effekt! Mit der Schaltfläche "Formatcode (hübsche Druck) wird der unordentliche Code in einen schönen Code umgewandelt, z. Klicken Sie auf das Format und unformat es. Vor der Verschönerung
Verschönerte Referenz: Chrome Developer Tools Offizielle Dokumentation