JS Debug Series: Debugging Basics and Tips

JS Debug Series Directory:-

Yesterday we saw the break point of the strong, in conjunction with the breakpoint for dynamic debugging, so that the code to read a lot easier, especially Ajax and so on.
In yesterday's after-school practice, it did add a lot of difficulty, because the submit Comment button is an event that is bound with jQuery.
So you can't see the function call directly on the element, nor can we locate the function source at once.
If we can't find the source location, we won't be able to do dynamic debugging on the breakpoint.
Let's do the practice of yesterday, and find out the source of his event first.

Nothing of value is found, just a very common node.
If it is not through the onclick binding is a function, we can not directly find his source, what to do?
Fortunately, he uses jquery, according to the "Talk about jquery Event source location problem", as long as the following code can be called to get the event.

function Lookevents (elem) {    return $.data? $.data (Elem, "events", Undefined, true): $._data (Elem, "events");} var event = lookevents ($ ("#btn_comment_submit") [0]); Gets the bound event

After the code is formatted, locate the following source.

But obviously, this is not the real source code, just called the commentmanager.postcomment method in the Click event.
So continue to position.

Enter 472 line to find the following code

This.postcomment = function () {    $ ("#btn_comment_submit"). val () = = "Modify" && $ ("#comment_edit_id"). html! = ""? Commentmanager.updatecomment (): Commentmanager.postnewcomment ()};

Obviously, it's not the final code we want, but it's also very important that he submits it according to the button value.
If the button is modified, the updatecomment method is executed, otherwise the postnewcomment method is executed.
We should continue to follow the commentmanager.postnewcomment method, walk up.

The final positioning to 478 line Out, this is the button code to submit comments, we do not analyze, interested in children's shoes to read the code.
The second question 2. Dynamically debug the execution of this commit comment event.
We also do not, the source found, according to yesterday's steps, you go to the dynamic debugging to try again. Be sure to practice it, or you'll forget it in seconds.
As I said before, if we look at it, then each of us will be the top scholar of the college entrance exam. So I still have to practice.

Let's get to the point today,debugger breakpoint.
What is this thing?
The literal translation is called the debugger, actually is the code breakpoint only, the usage is very simple, when you write the code, wants the breakpoint debugging place to write the debugger to be able.
Such as:

var A, b, c;debugger;a = 11;b = 22;c = a + B;console.log (c);

Now you click the Run button in the upper right corner of the code to try to see a layer of output, the breakpoint is not broken, the breakpoint is broken off?
Actually because you didn't open the console, open the console, and then click the Run button to try it. The discovery has broken down, stop at the following code.

Maybe you think, I directly in the console point down the breakpoint is not the same, why use debugger it?
Just debugging jquery events, you also found, very troublesome, of course, if you write your own project to find the source code may be relatively simple,
But it is easier to add debugger directly in the source code.
In particular, the various callbacks are the time when debugger .

Well, let's take a look at a comprehensive debugging exercise.

(function () {//For Independent scope    function add (A, b) {        return a + b;    }    debugger;    var sum = 0;    for (var i=0; i<10; i++) {        sum + = Add (i, 1);    }    Console.log (sum);}) ();

For the independent scope, I added a self-calling function.

If the function is not added, add, I, the sum variable will be under Global, you can open global to see what is inside.
Add a self-calling function to debug our code very clearly, so the variables are in Local.
Let's look at the Debug button in the upper right corner

The top four buttons are the most important, be sure to remember their function, the back of the two buttons for the moment no matter.

shortcut Keys	function
F8	Resume Running
F10	Step over, encountered custom function also as a statement execution, but not into the function inside
F11	Stepping in, encountering a custom function that goes inside the function
Shift + F11	Step out, jump out of the current custom function

Let's try out the functions of these buttons separately.
Run the code below and stop at the debugger breakpoint.

(function () {//For Independent scope    function add (A, b) {        A = a + A;        B = B + b        return a + b;    }    debugger;    var sum = 0;    for (var i = 0; i < i++) {        sum + = Add (i, 1);    }    debugger;    Console.log (sum);}) ();

We pressed the F8 to see what would happen.
Found that he stopped at the next debugger , so that F8 is resumed operation, but encountered a breakpoint will continue to stop.
We rerun the code or stop at the first debugger to press F10 and press.
will be found in for there will jump back and forth, because here is the loop ah.
To change the F11 try, you will find the execution sum + = Add (i, 1); Will jump to the internal code of the Add function.
So, as we can see, F10 won't go inside the custom function, and F11 will enter.
It is also a problem that many new people always encounter when debugging JQuery code.
Like what:

Debugger;var Digg_count = $ (' #digg_count '). html (); Console.log (' recommended in this article ', digg_count);

After running, when you press F11, you will enter into the JQuery library code inside, and then you debug, the more painful, do not know where you are.
In fact, the method is very simple, accidentally entered into the function you do not know or do not want to debug inside, the button Shift + F11 can be returned to the place where the function was just called.
You can try, when you debug this code, accidentally into the jQuery inside, and then press Shift + F11 will go to just that place, and the function has been executed.

Well, today's content is almost all of these, may feel a bit chaotic, today written relatively late, not carding good ideas, we will see it.