Vorwort: Debugging -Code ist für jeden Programmierer unverzichtbar. Unabhängig davon, ob Sie ein Meister oder ein Anfänger sind, ist Debugging -Programme eine unverzichtbare Aufgabe. Im Allgemeinen werden Debugging -Programme nach dem Schreiben von Code oder beim Ändern von Fehler während des Testens durchgeführt. Es ist oft besser, das Niveau und die Genauigkeit des Programmierers bei der Analyse von Problemen während des Debugging -Codes widerzuspiegeln. Viele Anfänger sind sich des Problems immer nicht bewusst, wenn sie nach der Ursache des Fehlers suchen, viel Zeit damit verbringen, aber einige Fehler nicht lösen können, die sich letztendlich als recht einfach erweisen. Das Beherrschen verschiedener Debugging -Fähigkeiten wird definitiv das doppelte Ergebnis mit der halben Arbeit in der Arbeit erzielen. Zum Beispiel schnell Probleme finden, die Wahrscheinlichkeit eines Ausfalls reduzieren, logische Fehler usw. bei der heutigen Heute analysieren, wenn die Front-End-Entwicklung des Internets immer wichtiger wird. Es ist besonders wichtig, die Entwicklungskosten zu senken, die Arbeitseffizienz zu verbessern und die Entwicklung von Front-End-Fertigkeiten in der Front-End-Entwicklung zu meistern.
In diesem Artikel werden verschiedene Front-End-JS-Debugging-Techniken nacheinander erläutert. Vielleicht haben Sie sie gemeistert, also lass uns sie gemeinsam überprüfen. Vielleicht gibt es Methoden, die Sie noch nie gesehen haben. Sie können sie genauso gut zusammen lernen. Vielleicht wissen Sie nicht, wie Sie debuggen. Nutzen Sie diese Gelegenheit, um die Lücke zu schließen.
1. Alert, Aruout -Debugging -Meister
Zu diesem Zeitpunkt fing das Internet gerade erst an, und das Front-End der Webseite ging hauptsächlich um Inhaltsanzeigen, und Browserskripte konnten nur sehr einfache Hilfsfunktionen für die Seite liefern. Zu dieser Zeit wurden Webseiten hauptsächlich in Browsern ausgeführt, die von IE6 dominiert wurden, und die Debugging -Funktion von JS war immer noch sehr schwach, sodass sie nur durch die in das Fensterobjekt eingebaute Warnmethode debuggen konnten. Zu dieser Zeit hätte es so aussehen sollen:
Es ist zu beachten, dass der hier zu erscheinende Effekt nicht der Effekt ist, der im IE -Browser damals zu sehen ist, sondern der Effekt in der höheren Version von IE. Darüber hinaus schien es damals keine solche fortschrittliche Konsole zu geben, und die Verwendung von Alarm war auch im realen JS -Code von Seite. Obwohl die Debugging -Methode von Alarm sehr primitiv ist, hatte sie zu diesem Zeitpunkt ihren unauslöschlichen Wert und hat noch heute seinen Platz zu verwenden.
2. Die neue Generation von Debugging King Console
Da JS im Web Front-End immer mehr Dinge tun kann, wird die Verantwortung immer größer und der Status wird immer wichtiger. Die traditionelle Alarmdebugging-Methode hat die verschiedenen Szenarien der Front-End-Entwicklung nach und nach nicht erfüllt. Darüber hinaus ist die Debugging -Informationen, die von der Alarmdebugging -Methode aufgetaucht sind, wirklich nicht schön und blockieren einige Seiteninhalte, was wirklich nicht freundlich ist.
Andererseits müssen die Debugging -Informationen von Alarm in die Programmlogik wie "Alarm (xxxxx)" hinzugefügt werden, um normal zu funktionieren, und Alarm wird das fortgesetzte Rendering der Seite behindern. Dies bedeutet, dass er nach Abschluss des Entwicklerdebuggens diese Debugging -Codes manuell klären muss, was wirklich problematisch ist.
Daher haben die neue Generation von Browsern Firefox, Chrome und IE nacheinander JS -Debugging -Konsolen eingeführt, wodurch die Verwendung eines Formulars ähnlich wie "Console.log (xxxx)" verwendet wird, um Debugging -Informationen auf der Konsole zu drucken, ohne die Seitenanzeige direkt zu beeinflussen. Nehmen wir dh als Beispiel, es sieht so aus:
Ok, auf Wiedersehen von der hässlichen Alarmpop-up-Box. Der aufsteigende Star unter der Leitung von Chrome hat umfangreichere Funktionen auf Konsole erweitert:
Glaubst du, das ist befriedigend? Die Vorstellungskraft des Chrome -Entwicklungsteams ist wirklich bewundernswert:
OK, ich habe ein bisschen mehr off-topisch gesagt. Kurz gesagt, die Entstehung eingebauter Konsolenobjekte auf der Konsole und dem Browser hat große Bequemlichkeit für die Entwicklung und das Debuggen von Frontend-End-Debuggs hervorgerufen.
Einige Leute fragen sich vielleicht: Muss dieser Debugging -Code nach Abschluss des Debuggens gereinigt werden?
Wenn Sie vor der Verwendung des Konsolenobjekts eine fortgeschrittene Existenzüberprüfung haben, wird die Geschäftslogik ohne Löschung keine Schädigung der Geschäftslogik verursachen. Um den ordentlichen Code zu gewährleisten, sollten diese Debugging -Codes, die nicht mit der Geschäftslogik zusammenhängen, so weit wie möglich gelöscht werden.
3. JS Breakpoint Debugging
Breakpoint, eine der Funktionen des Debuggers, ermöglicht es bei Bedarf Programminterrupte, wodurch die Analyse erleichtert wird. Sie können auch Haltepunkte in einem Debuggen festlegen. Das nächste Mal müssen Sie das Programm nur automatisch in die Position des festgelegten Breakpoint -Positions laufen lassen, und Sie können es an der letzten Breakpoint -Position unterbrechen, die den Betrieb erheblich erleichtert und Zeit spart. -Baidu Encyclopedia
JS -Haltepunkt -Debugging bedeutet, JS -Code in Browser -Entwickler -Tools Bruchpunkte hinzuzufügen, sodass die Ausführung von JS an einem bestimmten Ort anhalten kann, wodurch Entwickler die Analyse und logische Verarbeitung der Codestellungen dort analysieren können. Um den Effekt des Breakpoint -Debuggens zu beobachten, bereiten wir im Voraus ein Stück JS -Code vor:
Der Code ist sehr einfach, es wird eine Funktion definieren, zwei Zahlen übergeben, eine unordentliche zufällige Ganzzahl hinzufügen und dann die Summe der beiden Zahlen zurückgeben. Lassen Sie uns als Beispiel Chrome Developer Tools ansehen und die grundlegenden Methoden des JS -Breakpoint -Debuggens ansehen.
3.1. Quellen Breakpoint
Erstens können wir im Testcode sehen, dass der Code normal über die Ausgabeergebnisse der Konsole in der obigen Abbildung ausgeführt werden sollte, aber warum sollte er sein? Ist das Endergebnis wirklich korrekt? Dies ist eine bedeutungslose Vermutung, aber ich nehme an, ich werde jetzt überprüfen: Die beiden in der Funktion übergebenen Zahlen, die zufällige Zahl und die endgültige Summe. Wie arbeite ich also?
Methode 1, die oben genannte, die oben genannte, ob Alarm oder Konsole verwendet wird, können wir sie auf diese Weise überprüfen:
Aus der obigen Abbildung haben wir dem Code drei Zeilen Konsolencode hinzugefügt, um die Datenvariablen zu drucken, die uns wichtig sind. Am Ende können wir klar überprüfen, ob der gesamte Berechnungsprozess normal ist, und dann die durch unsere Frage festgelegten Überprüfungsanforderungen erfüllen.
Methode 2 und Methode 1 haben offensichtliche Nachteile im Verifizierungsprozess, nämlich dass viel redundanter Code hinzugefügt wird. Schauen wir uns anschließend an, ob die Verwendung von Haltepunkten zur Überprüfung bequemer ist. Sehen Sie zunächst, wie Sie Breakpoints hinzufügen und welche Auswirkungen nach dem Haltepunkt sind:
Wie in der Abbildung gezeigt, ist der Prozess des Hinzufügens von Haltepunkten zu einem Code -Stück "F12 (Strg + Shift + I), die Entwicklungstools öffnen" - "Klicken Sie auf Quellenmenü" - "Suchen Sie die entsprechende Datei in der linken Baumstruktur" - "Klicken Sie auf die Spalte Zeilennummer", um die Hinzufügung/Löschung der Breakpoints in der aktuellen Zeile zu vervollständigen. Wenn der Breakpoint hinzugefügt wird, aktualisieren Sie die Ausführung von Seite JS an der Haltepunktposition. In der Quellenschnittstelle sehen Sie alle Variablen und Werte im aktuellen Bereich. Überprüfen Sie einfach jeden Wert, um unsere Überprüfungsanforderungen zu erfüllen.
Das Problem ist hier. Wenn Sie vorsichtig sind, werden Sie feststellen, dass die Werte der angezeigten Variablen A und B hinzugefügt wurden, wenn mein Code einen Haltepunkt erreicht. Wir können die ersten 10 und 20 nicht sehen, wenn wir die Summenfunktion aufrufen. Also, was soll ich tun? Dies erfordert, dass Sie zurückgehen und grundlegende Kenntnisse über Breakpoint -Debugging erlernen. Nach dem Öffnen des Quellenbereichs sehen wir den folgenden Inhalt in der Schnittstelle. Wir folgen der Mausstrecke, um zu sehen, was es bedeutet:
Von links nach rechts sind die von jedem Symbol dargestellten Funktionen:
Pause/Resume Skript Execution: Pause/Resume Skript Execution (die Programmausführung hält am nächsten Haltepunkt an).
STREP OVER NEXT -Funktionsaufruf: Führen Sie den Funktionsaufruf auf den nächsten Schritt aus (springen Sie zur nächsten Zeile).
Schritt in den nächsten Funktionsaufruf: Geben Sie die aktuelle Funktion ein.
Treten Sie aus der aktuellen Funktion heraus: Brechen Sie die aktuelle Ausführungsfunktion aus.
Deaktivieren/aktiv alle Haltepunkte: Schalten/auf allen Haltepunkten (nicht abgebrochen).
Pause zu Ausnahmen: Automatische Haltepunkteinstellung für Ausnahmen.
Zu diesem Zeitpunkt wurden die Funktionstasten für das Breakpoint -Debuggen fast eingeführt. Als nächstes können wir unsere Programmcode -Zeile nach der Zeile betrachten, um die Änderungen in jeder Variablen nach der Ausführung jeder Zeile anzuzeigen, wie in der folgenden Abbildung gezeigt:
Wie oben erwähnt, können wir den gesamten Prozess der Variablen A und B aus dem Anfangswert zum Hinzufügen eines Zufallswerts in der Mitte sehen und schließlich die Summe berechnen und das Endergebnis ausgeben. Es ist kein Problem, die Überprüfungsanforderungen der Frageneinstellung zu vervollständigen.
Für die verbleibenden Funktionstasten ändern wir unseren Testcode geringfügig und verwenden ein GIF -Diagramm, um deren Verwendung zu demonstrieren:
Eine Sache, die hier zu beachten ist, ist, dass die Funktion des Druckens von Variablenwerten direkt im Codebereich eine neue Funktion ist, die in der neueren Version von Chrome hinzugefügt wurde. Wenn Sie noch eine ältere Version von Chrome verwenden, können Sie möglicherweise keine Variableninformationen direkt unter Haltepunkten anzeigen. Zu diesem Zeitpunkt können Sie die Maus in den variablen Namen verschieben und für kurze Zeit innehalten, und der variable Wert wird angezeigt. Sie können auch den Variablennamen mit der Maus auswählen und mit der rechten Maustaste auf "Hinzufügen zum Uhren" klicken, um ihn im Anhaltspanel anzuzeigen. Diese Methode gilt auch für Ausdrücke. Darüber hinaus können Sie auch an den Haltepunkten zum Konsolenfeld wechseln, den Variablennamen direkt in die Konsole eingeben und die variablen Informationen eingeben. Dieser Teil ist relativ einfach, wenn man die Länge des Artikels berücksichtigt und keine Bilder und Demonstrationen macht.
3.2. Debugger -Breakpoint
Der sogenannte Debugger-Haltepunkt wird tatsächlich von mir benannt, und ich weiß nicht, wie ich professionelle Begriffe sagen soll. Insbesondere durch Hinzufügen eines "Debuggers"; Anweisung zum Code, es wird automatisch Punkte unterbrechen, wenn der Code die Anweisung ausführt. Der nächste Vorgang ist fast genau das gleiche wie das Hinzufügen von Haltepunkt -Debugging im Quellenpanel. Der einzige Unterschied besteht darin, dass die Erklärung nach dem Debuggen gelöscht werden muss.
Da die gleiche Möglichkeit zum Einstellen von Haltepunkten unterschiedlich ist, ist die Funktion das gleiche wie das Hinzufügen von Haltepunkten in das Quellenpanel. Warum existiert diese Methode noch? Ich denke, der Grund sollte folgender sein: Wir begegnen gelegentlich eine asynchrone Belastung von HTML -Fragmenten (einschließlich eingebetteter JS -Code) in die Entwicklung, und dieser Teil des JS -Code kann nicht in den Quellenbaumarten gefunden werden, sodass wir nicht direkt in das Entwicklungstool Bruchpunkte hinzufügen können. Dann, wenn wir dem asynchron geladenen Skript "Debugger" Breakpoints hinzufügen möchten; wird zu diesem Zeitpunkt funktionieren. Lassen Sie uns den Effekt direkt durch das GIF -Diagramm sehen:
4. DOM Breakpoint Debugging
Der DOM -Haltepunkt besteht, wie der Name schon sagt, das DOM -Element Breakpoints hinzuzufügen, um den Zweck des Debuggens zu erreichen. Der Effekt der Verwendung von Haltepunkten in der tatsächlichen Verwendung wird letztendlich in der JS -Logik implementiert. Schauen wir uns die spezifischen Auswirkungen jedes DOM -Haltepunkts nacheinander an.
4.1. Brechen Sie die Modifikationen von Subtree, wenn sich die untergeordneten Knoten im Knoten ändern (Veränderungen der Subtree)
Wenn die Front-End-Entwicklung heute immer komplexer wird, wird der Front-End-JS-Code immer komplexer, und eine scheinbar einfache Webseite wird normalerweise von großen Segmenten des JS-Code begleitet, das viele Vorgänge des Hinzufügens, Löschens und Änderns von DOM-Knoten umfasst. Es ist unvermeidlich, dass es schwierig ist, Codesegmente direkt über JS Code zu lokalisieren, aber wir können relevante DOM -Knoten schnell über das Elemente -Panel des Entwickler -Tools finden. Zu diesem Zeitpunkt ist es besonders wichtig, Skripte über DOM -Haltepunkte zu lokalisieren. Schauen wir uns die GIF -Demonstration an:
Die obige Abbildung zeigt die Auswirkungen des Hinzufügens, Löschens und Austauschs von Auftragsvorgängen, die Breakpoints für UL Child -Knoten (LI) auslösen. Es ist jedoch zu beachten, dass die Änderung von Attributen und Inhalten von Kinderknoten keine Bruchpunkte auslösen.
4.2. Attribute Änderungen brechen
Auf der anderen Seite wird die Speicherabhängigkeit von einigen Daten immer komplexer, da die Geschäftslogik der Front-End-Verarbeitung immer komplexer wird. Das Speichern von temporären Daten in den (benutzerdefinierten) Eigenschaften des DOM -Knotens ist in vielen Fällen eine bevorzugte Methode für Entwickler. Insbesondere nachdem der HTML5-Standard die benutzerdefinierte Attributunterstützung verbessert (z. B. Datensatz, Daten-*usw.), werden immer mehr Attributeinstellungen angewendet, sodass Chrome Developer-Tools auch Attributänderungstruhrpoint-Breakpoint-Unterstützung bieten, und die Effekte sind ungefähr wie folgt:
Diese Methode muss auch beachtet werden, dass jede Operation auf den Eigenschaften des untergeordneten Knotens den Haltepunkt des Knotens selbst nicht auslöst.
4.3. Brechen Sie beim Entfernen der Knoten
Diese DOM -Haltepunkteinstellung ist sehr einfach und die Auslösermethode ist sehr klar - wenn der Knoten gelöscht wird. Normalerweise sollte der Fall bei der Ausführung der Anweisung "ParentNode.removechild (Childnode)" sein. Diese Methode wird nicht viel verwendet.
Was wir früher vorgestellt haben, sind im Grunde die Debugging -Methoden, die wir häufig in der täglichen Entwicklung anwenden. Sie können mit fast allen Problemen in unserer täglichen Entwicklung umgehen, wenn sie ordnungsgemäß verwendet werden. Die Entwickler -Tools berücksichtigen jedoch auch mehr Situationen und bieten den Breakpoint mehr Möglichkeiten, wie in der Abbildung gezeigt:
5. XHR -Haltepunkte
Die Entwicklung von Front-End-Entwicklung hat in den letzten Jahren Veränderungen erdschüttelt, von ihrem unbekannten Ruf bis zu seinem aktuellen Wohlstand, Ajax steuert reiche Webanwendungen und mobile WebApp-einseitige Anwendungen boomt. All dies ist unzertrennlich vom XMLHTTPrequest -Objekt, und "XHR Breakpoints" ist eine Breakpoint -Debugging -Funktion, die für asynchrone Zwecke entwickelt wurde.
Wir können dem asynchronen Haltepunkt durch das "+" -Schild auf der rechten Seite "XHR -Haltepunkte" einen Breakpoint -Zustand hinzufügen. Wenn die URL beim Auslösen der asynchronen Anforderung ausgelöst wird, generiert die JS -Logik automatisch einen Haltepunkt. Die Haltepunktposition wird in der Demo -Animation nicht demonstriert, da die Demo die von JQuery verkapierte AJAX -Methode verwendet. Der Code wurde komprimiert und es gibt keinen Einfluss. Tatsächlich wird der XHR -Haltepunkt durch die Aussage "xhr.send ()" generiert.
Die Kraft von XHR -Haltepunkten ist, dass wir Breakpoint -Regeln anpassen können, was bedeutet, dass wir Breakpoints für eine bestimmte Charge, eine bestimmte und sogar alle asynchronen Anfragen festlegen können, was sehr leistungsfähig ist. Es scheint jedoch, dass diese Funktion in der täglichen Entwicklung nicht viel verwendet wird, zumindest benutze ich sie nicht viel. Denken Sie darüber nach, es gibt ungefähr zwei Gründe: Erstens sind diese Art von Breakpoint -Debugging -Anforderungen nicht viel in den täglichen Geschäft beteiligt. Zweitens basiert der größte Teil der Front-End-Entwicklung in dieser Phase auf dem JS-Framework, und die grundlegendste JQuery hat auch AJAX gut verkapselt. Nur wenige Menschen verkapulieren Ajax -Methoden selbst. Um die Codegröße zu reduzieren, wählt das Projekt normalerweise komprimierte Codebasen aus, wodurch XHR -Breakpoint -Verfolgung relativ weniger einfach ist.
6. Event -Hörer -Haltepunkte
Ereignishörer -Haltepunkt, dh die Haltepunkteinstellung wird gemäß dem Ereignisnamen durchgeführt. Wenn das Ereignis ausgelöst wird, befindet sich der Haltepunkt an dem Ort, an dem das Ereignis gebunden ist. Ereignishörer -Haltepunkte Liste Alle Seite und Skript -Ereignisse, darunter: Maus, Tastatur, Animation, Timer, XHR usw. Es reduziert die Schwierigkeit, die Geschäftslogik in Ereignissen zu debuggen, erheblich.
Das Demo -Beispiel demonstriert den Breakpoint -Effekt, wenn das Klickereignis abgefeuert wird und wenn SetTimeout festgelegt wird. Das Beispiel zeigt, dass nach der Auswahl des Ereignis -Ereignis -Breakpoint der Haltepunkt ausgelöst wird, wenn beide Schaltflächen klicken, und wenn SetTimeout eingestellt ist, wird der Breakpoint "Set Timer" ausgelöst.
Debugging ist ein sehr wichtiger Bestandteil der Projektentwicklung. Es kann uns nicht nur helfen, Probleme schnell zu finden, sondern auch die uns Entwicklungszeit zu retten. In verschiedenen Debugging -Methoden wird Ihre berufliche Entwicklung definitiv viele Vorteile bringen. Bei so vielen Debugging -Methoden erfordert die Auswahl eines geeigneten für Ihr aktuelles Anwendungsszenario jedoch Erfahrung und kontinuierliche Versuche, sich zu akkumulieren.
Nachdem dies geschrieben wurde, kann es im Grunde genommen gesagt werden, dass es in vollem Gange herausgekommen ist. Ich hoffe, es kann Ihre Aufmerksamkeit erregen und ich hoffe, dass Sie sich ein wenig berührt fühlen und ein wenig vertraut fühlen. Das Wichtigste ist, dass ich hoffe, dass Sie Ihre Fähigkeiten schnell verbessern und ein erfahrener Mensch werden können!