JS Debug Series: Breakpoints and dynamic debugging [basic]

JS Debug Series Directory:-

Well, I'm not talking about Hins Cheung's breakpoint. This song is the breakpoint that debugging uses, enter the topic.

After the after-school practice of yesterday 1. Analyze how the Votepost function is implemented as recommended.
In fact, we have seen the source code, as long as the source can be read to know how he achieved.

function votepost (n, T, i) {i | |    (i =! 1);    var r = {Blogapp:currentblogapp, postid:n, Votetype:t, isabandoned:i};    $ ("#digg_tips"). CSS ("Color", "red"). HTML ("Submit ..."); $.ajax ({url: "/mvc/vote/voteblogpost.aspx", type: "Post", DataType: "JSON", ContentType: "App Lication/json;                Charset=utf-8 ", Data:JSON.stringify (R), Success:function (n) {if (n.issuccess) {                var i = $ ("#" + t.tolowercase () + "_count"); R.isabandoned? $ (i). HTML (parseint ($ (i). HTML ())-1): $ (i). HTML (parseint ($ (i). HTML ()) + 1)} $ ("#digg_tips"). HTML (n . Message)}, Error:function (n) {n.status > 0 && (n.status = = $ ("#digg_tips"). HT ML ("Sorry! An error has occurred! Trouble feedback to [email protected]): $ ("#digg_tips"). html (N.responsetext)}});} 

It's almost like that.
ps: I'm using sublime text formatted code that's a little different from the chrome console after formatting.
You can also try this online formatting tool with the same effect: online JavaScript beautifier 

Simply read the code, you can roughly know that the function has 3 parameters, the first is PostID, is the article ID, the second is recommended (Digg)   or against (Bury),
But the third one has been useless, and the default value is False
look down, He was in #digg_tips shows "Commit ..." string, followed by Ajax Submit data to the background.
After the data is returned, if N.issuccess is true in the corresponding liking ( #digg_count ) or against ( #bury_count ) The Count ID on +1 ,
but see here if the value of isabandoned is true, Count-.
Then we can guess that the third parameter is the revocation of the recommendation or against the use, simply said I ordered the recommendation, but I do not want to recommend, can pass the third parameter true to implement the cancellation of the recommended role.
We'll test it later. The
is followed by the #digg_tips Displays the N.message information returned by the server.
If an AJAX error occurs, it is 500 error prompts sorry! An error has occurred! Trouble feedback to [email protected] " Other status prompts the server to return the error message directly.
This is the approximate process, because the function is simple, so it's basically a glance.

Maybe some new friends asked, how do you know Currentblogapp, N, T, I is what value?
Then let's proceed to the next step, the dynamic debugging OK. For compiled projects, dynamic debugging is a very useful tool.
First locate to Votepost source office, (this said yesterday, do not understand, then go back to see first.) )

So easy, we have to locate the source code.
Next we click on the number of the numbers, the next breakpoint operation.
Why not break the breakpoint at the same line?
Since the line is a function declaration part and cannot be broken, we will not be able to break the breakpoint at the code where the function is to execute.

See The line number of the line changed to blue, indicating that this place has been broken down. At the same time, we can see the broken breakpoint in the right breakpoints column.
Breakpoints This column is the management of all breakpoints, you can easily jump to the location of the corresponding breakpoint, and will often use the OH.

Now that we've finished the breakpoint, we'll go back and recommend it. (Although I feel I am cheating recommendation, but I really did not think so, originally was casually found a button when practicing.) )
When you click on the Referral button, the magic happens, and it doesn't run the recommendation, but instead jumps to the breakpoint in the console Sources panel where we just got off the counter.

Now, you can see the current variable not only on the right side of the scope Variables (variable scope), but also move the mouse directly to any variable to see the value of the variable.
The Scope Variables column displays the current scope and his parent scope, as well as closures.
is not super convenient. (When I was a beginner, Scope variables helped me a lot.) )

We take the next step and press 3 times F10 to see something like that.

Every time we press the F10 will execute a statement, just pressed 3 times, is executed to $ ("#digg_tips"). CSS ("Color", "red"). HTML ("Submit ...");
So we can see on the page #digg_tips display the words in the submission.
But when we press F10 again, we find him going all the way, without going into the callback function inside Ajax.

It's a tangled question, and I want to focus on that.
Like this callback function, especially asynchronous, we want to make the next breakpoint inside the callback function again.
So we can go to the next breakpoint in the line, and now we click on the recommendation is still parked in the line, we directly press F8 to the Ajax callback function at the break down.

Now, we can debug the callback data, and we can find the right Scope Variables more than a Closure thing, this is the closure.
If you do not understand now, then, this thing to a large space introduction, not three words can be understood, anyway, the console is very powerful right.
When we see the closure, we also see the Ajax return Data n, obviously, my issuccess property is false, because he returned a message "cannot recommend his own content."
is not very interesting, dynamic debugging, so that the search for bugs to become so easy.

Next, let's experiment with a third parameter.
We input votepost (Cb_entryid, ' Digg ', true) on the console; then enter.
The same stops at the breakpoint at the line, this does not debug, directly F8 into the Ajax callback function out.

Here we see very clearly that when the third argument is true, the recommendation is indeed canceled, and you can see that the recommended number is indeed-1 , even if it is refreshed.

This time we use two shortcut keys F10 and F8, tomorrow detailed introduction, today first learned basic debugging first.

After-school exercises: (to improve the difficulty)
1. Review the Submit Comment button in the comments below and find his event. (JQuery-bound)
2. Dynamically debug this Commit comment event execution process.

If not this practice, recommend to see the "JQuery Incident source Location Problem", there is a detailed analysis oh.