Debug JS breakpoints with Chrome browser __js

1. What is the breakpoint debugging? It is not difficult to be difficult.

Breakpoint debugging is not really a complex thing, simple understanding is not outside the call is to open the browser, open sources find JS file, the line number on the point. The operation seems very simple, in fact, many people tangle is where to break the point. (Let's look at a screenshot of a breakpoint, for example, with a Chrome breakpoint.)

Step remember not. Open the page with the Chrome browser → Press F12 to open the developer tool → Open sources→ Open the JS code file you want to debug → Click on the line number, ok! congratulations on your maiden breakpoint, haha ~ 2. How to hit the breakpoint is appropriate.

Interrupt point operation is very simple, the core problem is how to hit the breakpoint to be able to row out the problem of the code to find out. Below I continue to give an example to facilitate everyone to understand, nonsense not to say more, above:

Suppose we are now implementing a load more function, such as the above figure, but now loading more features have a problem, click the data did not load out, at this time we think of what should be. (For another line to write the answer, you can see what your first reaction is)

The first thing I thought about was whether I clicked on or failed. Click on the event in the method is not running. Well, if you want to know the answer to this question, we'll go to a breakpoint and try it, where the breakpoint hits. Take a look at yourself first.

Then the above figure:

You have no idea. Yes, now that you want to know if the clicks are successful, we are sure to add a breakpoint in the click event in the code, and remember not to add the line in 226, because the function in the click Method is executed, not the 226-line selector. The breakpoint has been hit now, and then what to do. And then I'm thinking about it

Continue the diagram above:

Then of course we go back and click Load More button, why. Amount of ... If you ask, please allow me to use this expression, do not click to load more buttons, how to trigger the Click event. Does not trigger the Click event, how to execute the function in the Click event. Growl-like. But I am sure you will not ask such a low question ~ no Nonsense ~

Continue to the point, the above diagram is to click on the loading of more buttons, we can see that the left side of the page is covered by a translucent layer, the page also has a string of English and two buttons, the right code 227 lines are added to the background color, this situation, regardless of those buttons English is what the meaning of what role, What information do you get from this picture? Keep on thinking and thinking ~

If this is the case with the above illustration, the function in the Click event is invoked to further illustrate the click event. So the first "criminal suspect" we have for this problem has been ruled out. Add:

If the above situation does not appear to do. That is not to say that the Click event did not take effect. That's what caused the Click event to not take effect. Think about it all by yourself ~

There are many reasons why the Click event has not come into effect, much more than the multiple selector error, syntax error, the selected element is later generated, and so on. How to solve it.

Selector error, you can continue to see the contents of the console section, I think we know how to deal with the

Grammar error, careful investigation, unfamiliar grammar can be compared with Baidu

The selected element is generated later, the simplest processing is to use the. On () method to deal with, this dongdong with the event delegate processing, details can be their own Baidu. So what's the next "suspect" identity locked in?

We look at the inside of the event, the Click event Triggers, and the next question is the internal function problem. If you want to ask why. Please give me a piece of tofu ...

For example, give you a pen, let you write, and then you wrote a word on the paper, found that the word did not come out, why. You said I wrote it, there are scratches on the paper. Is it possible that the pen has no ink or the nib is broken. This example and click to load more a reason, writing this action is a click operation, and the internal function is ink or nib. See, no ~

Then we analyze the contents of the next click event, which contains three sentences, the first sentence is the variable i self growth, the second sentence is to add an I tag to the button, the third sentence is the method of calling the data request.

On the effect of these three words, we can put a larger part of the suspicion in the third sentence, a small part of the first sentence and the second sentence, some people may be puzzled, the second sentence how can there be suspicion. His role is simply to add a label that has no effect on the data, indeed, it has no effect on the data, but for serious reasons it can still be wrong, for example, if it's missing a semicolon. Or a symbolic error inside the sentence. This little problem is often a waste of our time.

Good, in order to further lock "criminal suspect", to introduce a tool, but also the figure appears in one of two icons, see the following figure:

The function of this small icon is called "Progressive execution" or "step-by-step", which is my personal understanding of a name, meaning, every time you click it, the JS statement will be executed later, it also has a shortcut key, F10. The following illustration shows how it will look after it has been clicked:

I clicked this button two times (or use F10 shortcut), the JS code from 227 lines to 229 lines, so I call it "execution by statement" or "progressive execution." This function is very practical, most of the debugging will be used to it.

It's too late, keep writing tomorrow, the show is still behind

—————————————————————— Split Line ————————————————————

OK, then write.

It says that I clicked the "Execute by Statement" button two times, and the code runs from 227 lines to 229 lines, which is what everyone thinks it means. is not the explanation from the grammar, the first two sentences are no problem, then is not also means that the first two sentences on the elimination of suspicion. I don't think so.

As we all know, loading more is a function of the next page, and one of the most core is passed to the background of the page number value, whenever I click to load more buttons once, the number of page numbers will add 1, so if the next page of data does not come out, is not likely because the page number is the value of the [I variable] (The following unified address I) has a problem. So how to troubleshoot the page number there is a problem. Everyone thinks for themselves first.

Here are two ways to see the actual output value of page number I, above:

First type:

Action steps are as follows:

1. Still →2 the breakpoint on line 227. Click to load More button →3. Click the Execute BY Statement button once, the JS code executes to 228 line →4. Select the i++ with the mouse (what do you mean you don't understand?) Is that you want to copy a thing, is not to select it. Yes, that's the check, →5. When selected, the mouse hovers over the target, and you see the result of the above figure.

The second type:

This method is actually the same as the first, but only in the console output I value, you only need to follow the first method to the third step →4. Open and sources the console→5 of the same level column. Enter i→6 in the input field below the console. Press ENTER to enter.

In the second method above, mentioned console this thing, we can call it the console or anything else, which is not important ~console is very powerful, in the process of debugging, we often need to know what the value of some variables exactly output, or we use the selector [$]. Div ") Whether or not the elements we want are selected, can be printed on the console. Of course, directly with the first method can also be.

Show us how to print the elements we want to select in the console. Above the picture ~

Enter $ (this) in the console to get the selected element, yes, exactly what we clicked on-loading More button elements.

Here to say I console this console understanding: This Dongdong is a JS parser, is used to parse the browser itself to run JS Guy, but the browser through console let us developers in the debugging process, you can control the operation of JS and output. Through the above two methods, you may find it easy to use, but I would like to remind you, or some novice more likely to encounter confusion. confused one: In the case of no interruption, in the console input I, the result console error.

This should be a common problem for beginners, why not interrupt the point I have no way to directly output the value of the variable in the console. Personal understanding at this time I just a local variable, if not hit a breakpoint, the browser will all of the JS parsing complete, console and can not access to local variables, can only access to global variables, so this time console will error I did not define, but when JS hit the breakpoint, The console resolves to the function of the local variable I, at which point I is able to be accessed. Puzzle Two: Why do I enter $ (". XXX") directly in the console to print something.

Very simply, console itself is a JS parser, $ (". XXX") is a JS statement, so the natural console can parse this statement and output the results.

Describes the use of the "Execute by Statement" button and the console console, and finally a button, above:

This button I call it the "process by step" button, and the "Execute by word" button is different, the "process-by-step" button is often used in a method to call multiple JS files, the related JS code is relatively long, you will use this button.

Image above:

Suppose I just hit a breakpoint on line 227, and then I clicked the Execute button to line 229, and then I clicked the "Execute by word" button again. Will go to the next image of JS:

These are the contents of the Zepto library files, nothing good-looking, inside the operation is very complex, we can not always use the "step-by-Statement Execution" button, so you will find that you press the most days still in the library file around ... . Then it's time to go to the "process-by-step" button.

Image above:

Except for a breakpoint in line 227, at the same time also played a breakpoint in 237 lines, when we run to 229 rows, directly click the "process-by-step" button, you will find that JS directly skipped the library file, run to 237 lines, you can use their own experience.

Final Summary:

This article mainly introduces the "Execute by Statement" button, the "process by step" button, console console these three tools, as well as debugging bugs, some ideas. The use of tools I will not repeat, we know how to use on the line, the specific way to more reasonable usage, but also need everyone through a lot of practice to summarize the promotion ~

I actually want to talk about debugging bugs in the main idea, but because the selected example involves too much ... Afraid all write down content is too long, we are not interested to see, so I simply selected a part for you to explain, do not know if we have no harvest. Don't look at me debug three words write a bunch of things, if really in the actual project you also like me to do, estimated that you debug a bug more than the time to write a script a lot longer ... In the actual situation, we should develop the first time to get the problem, in the mind to troubleshoot problems, to find the most likely problems, if you can not quickly troubleshoot the most important point, then you may use the most troublesome but very reliable method, using the "Execute by statement" The button will be the whole and problem-related JS in turn to perform, in the process of implementation, they also follow the idea, while noting the value of each variable and selector selected element is correct, in general, do it again, the bug is almost solved.

so personally think that we debug the idea of the bug should be: First of all, JS whether the successful implementation come in; Secondly, JS whether there are logic problems, variable problems, parameter problems, etc. finally, if the above is not a problem, please carefully look at the various symbols ...

ok~ Breakpoint on here ~ there is no understanding of the students can be in the following message ~ And if you have what do not understand the point of knowledge or the front of the more confused place, can also be in the following message, when I will continue to write a few documents for the message Oh ~