Javascript-Breakpoint-Debugging-Erfahrung, gemeinsame Nutzung von Javascript-Kenntnissen

1. Was ist Breakpoint-Debugging? Ist es schwierig?

Das Debuggen von Haltepunkten ist eigentlich nicht so kompliziert. Ein einfaches Verständnis dafür, dass keine ausgehenden Anrufe erfolgen, besteht darin, den Browser zu öffnen, die Quellen zu öffnen, die js-Datei zu suchen und auf die Zeilennummer zu klicken. Die Bedienung scheint sehr einfach zu sein, aber tatsächlich haben viele Menschen Schwierigkeiten, den Punkt zu durchbrechen. (Sehen wir uns zunächst einen Haltepunkt-Screenshot am Beispiel des Haltepunkts des Chrome-Browsers an)

Erinnern Sie sich an die Schritte?

Öffnen Sie die Seite mit dem Chrome-Browser → Drücken Sie F12, um die Entwicklertools zu öffnen → Open Sources → Öffnen Sie die js-Codedatei, die Sie debuggen möchten → Klicken Sie auf die Zeilennummer, OK. Herzlichen Glückwunsch zu Ihrer Jungfräulichkeit. Hit! das Zeichen, haha~~

2. Wie setzt man Haltepunkte richtig?

Die Funktionsweise von Haltepunkten ist sehr einfach. Die Kernfrage lautet: Wie werden Haltepunkte festgelegt, um die Probleme im Code herauszufinden? Lassen Sie mich ohne weitere Umschweife ein Beispiel geben, hier ist das Bild oben:

Angenommen, wir implementieren jetzt eine Funktion zum Laden von mehr, wie im Bild oben gezeigt, aber jetzt gibt es ein Problem mit der Funktion zum Laden von mehr. Die Daten werden nach dem Klicken nicht geladen Zeit? (Schreiben Sie Ihre Antwort in eine andere Zeile, damit Sie sehen können, wie Ihre erste Reaktion ist)

Das erste, woran ich dachte, war: War mein Klick erfolgreich? Werden die Methoden im Click-Event ausgeführt? Okay, wenn wir die Antwort auf diese Frage wissen wollen, versuchen wir sofort, einen Haltepunkt zu setzen. Wo ist der Haltepunkt? Denken Sie zunächst selbst darüber nach.

Folgen Sie dem Bild oben:

Haben Sie darüber nachgedacht? Das ist richtig, da wir wissen möchten, ob der Klick erfolgreich ist, fügen wir natürlich einen Haltepunkt beim Klickereignis im Code hinzu. Denken Sie daran, ihn nicht in Zeile 226 hinzuzufügen, da die Funktion in der Klickmethode ausgeführt wird, nicht die Auswahl online 226. Gerät. Der Haltepunkt ist nun festgelegt. Was tun Sie als Nächstes? Denken Sie selbst darüber nach~

Weiter mit dem Bild oben:

Dann gehen wir natürlich zurück und klicken auf die Schaltfläche „Mehr laden“, warum? Stirn. . . Wenn Sie fragen, erlauben Sie mir bitte, dieses Emoticon zu verwenden . Wie kann ich ein Klickereignis auslösen, ohne auf die Schaltfläche „Mehr laden“ zu klicken? Wie führe ich die Funktion im Klickereignis aus, ohne das Klickereignis auszulösen? Brüllend. . Aber ich glaube, dass nicht jeder eine so niedrige Frage stellen wird~ Kein Unsinn mehr~

Um mit dem Thema fortzufahren: Das Bild oben zeigt, was nach dem Klicken auf die Schaltfläche „Mehr laden“ geschieht. Wir können sehen, dass die Seite auf der linken Seite von einer durchsichtigen Ebene und zwei Schaltflächen oben bedeckt ist Auf der rechten Seite wird die Hintergrundfarbe zu Zeile 227 des Seitencodes hinzugefügt. Welche Informationen erhalten Sie aus diesem Bild, unabhängig von der englischen Bedeutung dieser Schaltflächen? Denken Sie weiter darüber nach~

Wenn die obige Situation auftritt, beachten Sie bitte, dass die Funktion im Klickereignis aufgerufen wird, was weiter anzeigt, dass das Klickereignis wirksam wird. Dann ist unser erster „Strafverdächtiger“ für dieses Problem beseitigt.

Zusätzlicher Hinweis:

Was soll ich tun, wenn die oben genannte Situation nicht eintritt? Bedeutet das, dass das Klickereignis nicht wirksam wurde? Was führt also dazu, dass das Click-Ereignis nicht wirksam wird? Jeder denkt darüber nach~

Es kann viele Gründe geben, warum das Klickereignis nicht wirksam wird, z. B. mehrere Auswahlfehler, Syntaxfehler, das ausgewählte Element wird später generiert usw. Wie kann man es lösen?

Auswahlfehler, Sie können weiterhin den Inhalt des Konsolenteils sehen, ich denke, Sie werden wissen, wie Sie damit umgehen sollen

Grammatikfehler, überprüfen Sie sie sorgfältig. Wenn Sie mit der Grammatik nicht vertraut sind, können Sie sie auf Baidu vergleichen.

Das ausgewählte Element wird später generiert, indem es mit der .on()-Methode verarbeitet wird. Weitere Informationen finden Sie bei Baidu.

Wo wird also die Identität des „Strafverdächtigen“ als nächstes geheim gehalten?

Wir richten unsere Aufmerksamkeit auf das Innere des Ereignisses. Das Klickereignis wird ausgelöst, daher ist das nächste Problem das interne Funktionsproblem. Wenn Sie fragen möchten, warum? Bitte gib mir ein Stück Tofu. . .

Ich gebe dir zum Beispiel einen Stift und bitte dich zu schreiben. Dann schreibst du ein Wort auf das Papier und stellst fest, dass das Wort nicht herauskommt. Sie sagten, ich hätte es geschrieben, aber das Papier weist immer noch Kratzer auf. Ist es möglich, dass der Stift keine Tinte mehr hat oder die Spitze gebrochen ist? Dieses Beispiel ähnelt eher dem Klicken beim Laden. Der Schreibvorgang ist ein Klickvorgang, und die interne Funktion ist die Tinte oder die Stiftspitze. Verstehst du~

Dann analysieren wir den Inhalt des Klickereignisses, das drei Sätze enthält. Der erste Satz besteht darin, die Variable i automatisch zu erhöhen, der zweite Satz darin, der Schaltfläche eine i-Beschriftung hinzuzufügen, und der dritte Satz darin, den aufzurufen Datenanforderungsmethode.

Durch die Funktionen dieser drei Sätze können wir einen größeren Teil des Verdachts auf den dritten Satz und einen kleineren Teil auf den ersten und zweiten Satz legen. Einige Leute sind möglicherweise verwirrt, der zweite Satz verdächtig? Seine Funktion besteht lediglich darin, eine Beschriftung hinzuzufügen, die überhaupt keine Auswirkungen auf die Daten hat. Bei strenger Betrachtung kann es jedoch dennoch zu Fehlern kommen. Was ist beispielsweise, wenn a fehlt? Semikolon? Oder steckt im Satz ein falsches Symbol? Es sind oft kleine Probleme wie diese, die viel Zeit verschwenden.

Okay, um den „Strafverdächtigen“ weiter ins Visier zu nehmen, möchte ich Ihnen ein Tool vorstellen, das auch eines der beiden Symbole ist, die im Bild oben erscheinen, wie im Bild unten gezeigt:

Die Funktion dieses kleinen Symbols wird als „Anweisungs-für-Anweisungs-Ausführung“ oder „Schritt-für-Schritt-Ausführung“ bezeichnet. Dies ist ein Begriff, den ich persönlich verstehe. Es bedeutet, dass die js-Anweisung jedes Mal angezeigt wird wird einen Satz später ausführen. Es gibt auch eine Tastenkombination, F10. Das Bild unten zeigt den Effekt, nachdem darauf geklickt wurde:

Ich habe zweimal auf diese Schaltfläche geklickt (oder die Tastenkombination F10 verwendet) und der js-Code wurde von Zeile 227 bis Zeile 229 ausgeführt, daher nenne ich es „Anweisung-für-Anweisung-Ausführung“ oder „Schritt-für-Schritt-Ausführung“. ". Diese Funktion ist sehr praktisch und wird in den meisten Debugging-Schritten verwendet.

Es ist zu spät, ich schreibe morgen weiter, der Spaß kommt noch~

——————————————————————Trennlinie———————————————————

OK, schreib weiter!

Wie oben erwähnt, habe ich zweimal auf die Schaltfläche „Anweisung für Anweisung ausführen“ geklickt und der Code wurde von Zeile 227 bis Zeile 229 ausgeführt. Was bedeutet das Ihrer Meinung nach? Bedeutet das, dass die ersten beiden Sätze grammatikalisch korrekt sind? Bedeutet das auch, dass die ersten beiden Sätze den Verdacht beseitigen? Das glaube ich nicht.

Jeder weiß, dass das Laden von mehr eine Funktion für die nächste Seite ist, und die wichtigste davon ist der an den Hintergrund übergebene Seitenzahlwert. Jedes Mal, wenn ich auf die Schaltfläche „Mehr laden“ klicke, wird der Seitenzahlwert um 1 erhöht Die Daten auf der nächsten Seite werden nicht angezeigt. Liegt möglicherweise ein Problem mit dem Seitenzahlwert vor, bei dem es sich um die [i-Variable] (im Folgenden als i bezeichnet) handelt? Wie kann man also überprüfen, ob ein Problem mit der Seitenzahl vorliegt? Denken wir alle erst einmal selbst darüber nach.

Im Folgenden erfahren Sie zwei Möglichkeiten, den tatsächlichen Ausgabewert des Seitenzahlwerts i] anzuzeigen, wie oben gezeigt:

Erster Typ:

Die Schritte sind wie folgt:

1. Setzen Sie weiterhin einen Haltepunkt in Zeile 227 → 2. Klicken Sie auf die Schaltfläche „Mehr laden“ → 3. Klicken Sie einmal auf die Schaltfläche „Anweisung für Anweisung ausführen“, und der JS-Code wird bis Zeile 228 ausgeführt → 4. Verwenden Sie die Maus um i++ auszuwählen (was ist „Verstehen Sie Auswahl nicht?“ Sie möchten etwas kopieren, möchten Sie es auswählen? Ja, das ist die Auswahl) → 5. Bewegen Sie nach der Auswahl die Maus über das Ziel, und Sie werden sehen das Ergebnis wie oben dargestellt.

Zweiter Typ:

Diese Methode ähnelt tatsächlich der ersten Methode, außer dass sie den Wert von i in der Konsole ausgibt. Sie müssen nur der ersten Methode bis zum dritten Schritt folgen → 4. Öffnen Sie die Konsole in derselben Ebenenspalte wie die Quellen → 5. Geben Sie i in das Eingabefeld unterhalb der Konsole ein → 6. Drücken Sie die Eingabetaste.

In der zweiten Methode oben wird die Konsole genannt. Die Funktion der Konsole ist oft sehr leistungsfähig ​Bestimmte Variablen werden ausgegeben, oder ob wir einen Selektor [$".div") verwenden, um das gewünschte Element usw. auszuwählen, kann auf der Konsole ausgedruckt werden. Natürlich können Sie die erste Methode auch direkt verwenden.

Lassen Sie mich Ihnen zeigen, wie Sie die Elemente drucken, die wir in der Konsole auswählen möchten. Bild oben~

Geben Sie $(this) in die Konsole ein, um das ausgewählte Element zu erhalten. Ja, es ist das Objekt, auf das wir geklickt haben – laden Sie weitere Schaltflächenelemente.

Hier möchte ich Ihnen mein Verständnis der Konsole mitteilen: Bei diesem Ding handelt es sich um einen JS-Parser, der vom Browser selbst zum Parsen und Ausführen von JS verwendet wird. Der Browser ermöglicht es uns Entwicklern jedoch, die Konsole über den zu verwenden Konsole. Während des Debugging-Prozesses können Sie die Ausführung und Ausgabe von js steuern. Durch die beiden oben genannten Methoden denken Sie vielleicht, dass die Verwendung sehr einfach ist, aber ich möchte Sie daran erinnern, dass es sonst zu einer Verwirrung kommen kann, auf die einige Anfänger eher stoßen.

Verwirrung 1: Wenn es keinen Haltepunkt gibt, gebe ich i in die Konsole ein, aber die Konsole meldet einen Fehler.

这应该是新手很常见的问题，为什么不打断点我就没有办法在控制台直接输出变量的值呢？个人理解这时候i只是一个局部变量，如果不打上断点，浏览器会把所有的js全部解析完成，console并不能访问到局部变量，只能访问到全局变量，所以这时候console会报错i未定义，但是当js打上断点时，console解析到了局部变量i所在的函数内，这时候i是能够被访问的。

困惑二：为什么我直接在console里输入$(“.xxx”)能打印出东西来呢？

很简单，console本身就是一个js解析器，$(“.xxx”)就是一个js语句，所以自然console能够解析这个语句然后输出结果。

介绍完“逐语句执行”按钮和console控制台的用法，最后再介绍一个按钮，上图：

这个按钮我称呼它为“逐过程执行”按钮，和“逐语句执行”按钮不同，“逐过程执行”按钮常用在一个方法调用多个js文件时，涉及到的js代码比较长，则会使用到这个按钮。

上图：

假设上图我只在227行打了个断点，然后一直点击逐语句执行”按钮到229行，这时候如果再点击一次“逐语句执行”按钮呢？则会进入下图的js里：

这些都是zepto库文件的内容，没啥好看的，里面运行很复杂，我们不可能一直使用“逐语句执行”按钮，这样你会发现你按了大半天还在库文件里面绕。。。这时候咋办？那就该“逐过程执行”按钮上场了。

上图：

我除了在227行打了一个断点，同时还在237行打了一个断点，当我们运行到229行时，直接单击“逐过程执行”按钮，你会发现，js直接跳过了库文件，运行到了237行，大家可以自己使用体验一下。

最后总结：

本文主要介绍了“逐语句执行”按钮、“逐过程执行”按钮、console控制台这三个工具，以及调试bug时的一些思路。工具的用法我就不再赘述了，大家知道用法就行，具体怎么去更合理的使用，还需要大家通过大量的实践去总结提升~

我其实在本文主要想讲的是调试bug的一个思路，但是由于选的例子涉及东西太多。。。怕全部写下来内容太长，大家也没兴趣看，所以我就简单的选了一部分给大家讲解，不知道大家有没有收获。别看我调试三句话写了一堆的东西，如果真的在实际项目中你也像我这样去做，估计你调试一个Bug的时间会比写一个脚本的时间还长很多。。。在实际情况下，我们应该养成拿到问题的第一时间，自行在脑海中排查问题，找到最有可能出现问题的点，如果没办法迅速的排查出最重要的点，那么你可以使用最麻烦但是很靠谱的方法，利用“逐语句执行”按钮将整个和问题相关的js依次去执行一遍，在执行的过程中，自己也跟着理清思路，同时注意下每个变量的值以及选择器选中的元素是否正确，一般来说，这样做一遍下来，bug都解决的差不多了。

所以个人认为，我们调试bug的思路应该是这样的：首先，js是否成功的执行进来；其次，js是否存在逻辑问题，变量问题，参数问题等等；最后，如果上述都没有问题，请仔细查看各种符号。。。

OK~断点就讲到这里~有不明白的同学可以在下面留言~还有如果大家有什么不懂的知识点或者对前端比较困惑的地方，也可以在下面留言，有空的时候我也会继续针对大家的留言写一些文档的哦~