1.What is breakpoint debugging? Is it difficult?
Breakpoint debugging is actually not a complicated thing. A simple understanding of no outgoing calls is to open the browser, open sources, find the js file, and click on the line number. It seems very simple to operate, but what many people are actually confused about is where to break the point? (Let's first look at a breakpoint screenshot, taking the breakpoint of the Chrome browser as an example)
Remember the steps?
Open the page with a chrome browser → Press f12 to open the developer tools → Open Sources → Open the js code file you want to debug → Click on the line number, OK! Congratulations to your virgin breakpoint for hitting, haha~~
2. How to hit breakpoints appropriately?
The operation of breakpoints is very simple. The core problem is, how to hit breakpoints to troubleshoot the problem with the code? Let me continue to give you an example to understand. Without further ado, the picture above:
Suppose we are now implementing a function that loads more, as shown in the figure above, but there is a problem with loading more functions. After clicking, the data is not loaded. What should we think of at this time? (Write the answer in another line, and you can see what your first reaction is)
The first thing that came to my mind was whether my click was successful? Is the method in the click event running? OK, if you want to know the answer to this question, let’s try to hit a breakpoint immediately. Where is the breakpoint? Think about it first.
Next picture:
Did you think of it? That's right, since we want to know whether the click is successful, of course we are adding a breakpoint at the click event in the code. Remember not to add it on line 226, because the function in the click method is executed, not the selector of line 226. The breakpoint has been hit now, so what to do? Think about it yourself~
Continue to the above picture:
Then of course we went back and clicked on the Load More button, why? Forehead. . . If you ask this, please allow me to use this emoticon, without clicking on the Load More button, how to trigger the click event? How to execute the functions in the click event without triggering the click event? Roaring. . But I believe everyone will not ask such low questions~ I won't talk nonsense~
Continue to the topic, the picture above is the situation after clicking on the load more buttons. We can see that the page on the left is covered by a translucent layer. There is also a string of English and two buttons above the page. The 227 lines of the code on the right have been added with a background color. This situation occurs, no matter what the buttons mean and what their functions do. What information did you get from this picture? Keep thinking about it ~
If the above situation occurs, it means that the function in the click event has been called, which further explains that the click event takes effect. Then the first "criminal suspect" we have caused to this problem is ruled out.
To add:
What if the above situation does not occur? Does that mean that the click event has not taken effect? What caused the click event to not take effect? Everyone thinks about it themselves~
There are many reasons why the click event does not take effect, such as multi-selector errors, syntax errors, selected elements are later generated, etc. How to solve it?
The selector is wrong, you can continue to see the content of the console part later, I think everyone knows how to deal with it.
Syntax errors, check carefully. You can compare unfamiliar grammars on Baidu.
The selected element is generated later. The easiest way to handle it is to use the .on() method. This thing is processed with event delegation. You can use Baidu for details.
So where will the identity of the "criminal suspect" be locked next?
We turn our attention to the event inside, and the click event is triggered, so the next problem is the function problem inside it. If you want to ask why? Please give me a piece of tofu. . .
For example, I will give you a pen and ask you to write. Then you write a word on the paper and find that the word is not out. Why? You said I wrote it, and there were still scratches on the paper. Is it possible that the pen has no ink or the tip is broken? This example is more of a principle of click loading. The writing action is click operation, and the internal function is ink or pen tip. Do you understand ~
Next, we analyze the content of the click event, which contains three sentences. The first sentence is that the variable i grows by itself, the second sentence is to add an i tag to the button, and the third sentence is to call the method of requesting data.
Through the role of these three sentences, we can place a larger part of the suspicion in the third sentence and a small part on the first and second sentences. Some people may wonder, how can the second sentence be suspicious? His function is just to add a label, which has no effect on the data at all. Indeed, this sentence has no effect on the data, but for rigorous considerations, it may still make mistakes, for example, what if it lacks a semicolon? Or is there a symbol inside the sentence wrong? Often, it is this kind of small problem that wastes a lot of our time.
OK, in order to further lock in the "criminal suspect", I will introduce you to a tool, which is also one of the two icons appearing in the picture above, see the picture below:
The function of this small icon is called "execution by sentence" or "execution step by step". This is a name I personally understand, which means that every time I click it, the js statement will execute a sentence later, and it also has a shortcut key, F10. The following figure shows the effect after it is clicked:
I clicked this button twice (or used the F10 shortcut key), and the js code was executed from line 227 to line 229, so I called it "Statement-by-Step" or "Step Step-by-Step". This function is very practical and will be used for most debugging.
It's too late, I'll continue to write tomorrow, the good show is still coming~
――――――――――――――――――――――――――――――――――――――――――
OK, continue writing!
The above introduction shows that I clicked the "Sentence-by-Sentence Execution" button twice, and the code ran from line 227 to line 229. What do you think this means? Does it mean that from a grammatical point of view, the first two sentences are not problematic, so does it also mean that the first two sentences eliminate suspicion? I don't see it.
As we all know, loading more is a function of the next page, and the most core one is the page number value passed to the background. Whenever I click the Load More button once, the page number value must be increased by 1. So if the data on the next page does not come out, is it possible that there is a problem with the page number value, that is, [i variable] (the following is the unified name i)? So how to troubleshoot whether there are any problems with the page number? Everyone thinks first.
Here are two ways to view the actual output value of the page number i], the figure above:
The first type:
The operation steps are as follows:
1. Still hit a breakpoint on line 227 → 2. Click the Load More button → 3. Click the "Execute statement by sentence" button once, and the js code will be executed to line 228 → 4. Use the mouse to select i++ (what does it mean that you don't understand? That is, you want to copy something, do you want to select it? Yes, this is selected) → 5. After selecting, the mouse is suspended above the target, and you will see the result in the picture above.
The second type:
This method is actually similar to the first one, except that the value of i is output on the console. You only need to follow the first method to execute to step 3 → 4. Open the console of the same level as sources → 5. Enter i → 6. Press enter Enter key.
In the second method above, console is mentioned. We can call it console or anything else. This is not important. Console has a very powerful function. During the debugging process, we often need to know what the values of certain variables are output, or whether we use selector [$".div") to select the elements we want, etc., can be printed on the console. Of course, it is also possible to use the first method directly.
Let me demonstrate to you the elements we want to select in the console. Picture above ~
Enter $(this) in the console to get the selected element. Yes, it is the object we clicked - load more button elements.
Here I will tell you my understanding of the console console: this thing is a js parser, which is used by the browser itself to parse the guy running js. However, the browser allows us developers to control the operation and output of js during the debugging process through console. Through the above two methods, you may think it is very easy to use, but I would like to remind you, or it is a confusion that some beginners are more likely to encounter.
Confused 1: When there is no break point, enter i in console, and the console reports an error.
This should be a common problem for beginners. Why can't I directly output the value of variables in the console without breaking the point? Personally, I understand that i is just a local variable at this time. If no breakpoint is set, the browser will parse all js. The console cannot access local variables, but can only access global variables. Therefore, the console will report an error i undefined, but when js hits a breakpoint, the console parses it into the function where the local variable i is located, and i can be accessed at this time.
Confusion 2: Why can I print something directly into $(".xxx") in the console?
It's very simple. console itself is a js parser, and $(".xxx") is a js statement, so naturally console can parse this statement and output the result.
After introducing the usage of the "Sentence-by-Sentence Execution" button and console, we will finally introduce another button, the picture above:
I call this button "process execution" button, which is different from the "statement execution" button. The "process execution" button is often used when a method calls multiple js files. The js code involved is relatively long, so this button will be used.
Above:
Suppose in the above picture, I only made a breakpoint on line 227, and then kept clicking the "Execute statement by sentence" button to line 229, what if I click the "Execute statement by sentence" button again? It will enter the js in the following picture:
These are the contents of the zepto library file. There is nothing good to watch. It is very complicated to run. We cannot always use the "Sentence-by-Sentence Execution" button, so you will find that you have been pressing for most of the day and still circling in the library file. . . What to do at this time? Then it's time to "process-by-process execution" button to go on stage.
Above:
In addition to setting a breakpoint on line 227, I also hit a breakpoint on line 237. When we run to line 229, directly click the "Process-by-process execution" button. You will find that js directly skipped the library file and ran to line 237. You can use it for yourself to experience it.
Final summary:
This article mainly introduces the three tools of "Sentence-by-Sentence-by-Serial Execution" button, "Process-by-Serial Execution" button, console console, and some ideas when debugging bugs. I won’t repeat the usage of the tool. Just know the usage. How to use it more reasonably needs to be summarized and improved through a lot of practice~
Actually, what I want to mainly talk about in this article is a way to debug bugs, but because the examples I chose involve too many things. . . I was afraid that the content of the whole thing was too long and everyone was not interested in reading it, so I simply chose a part to explain it to you. I wonder if you have gained anything. Don’t look at the three sentences I wrote a lot of things in debugging. If you really do it like me in the actual project, you probably will take a lot longer to debug a bug than to write a script. . . In actual situations, we should develop the first time we get the problem, check the problem in our minds and find the most likely point. If we cannot quickly find the most important point, then you can use the most troublesome but reliable method to use the "Sentence-by-Sentence Execution" button to execute the entire js related to the problem one by one. During the execution process, we should also clarify our thoughts, and pay attention to the correct value of each variable and the elements selected by the selector. Generally speaking, if you do this once, the bugs will be almost solved.
So I personally think that our idea of debugging bugs should be as follows: First, whether js is successfully executed; second, whether js has logic problems, variable problems, parameter problems, etc.; finally, if there are no problems with the above, please carefully check various symbols. . .
OK~ That’s all about the breakpoint~ If you don’t understand, you can leave a message below~ If you have any knowledge points you don’t understand or are confused about the front-end, you can also leave a message below. When you have time, I will continue to write some documents on your messages~