Js debugging series breakpoint and dynamic debugging [Basics]

The previous articles have introduced some basic knowledge about the js debugging series. This time, the garbled brother brought you the js breakpoint and dynamic debugging methods. For more information, see

Exercise after class I left yesterday. 1. analyze how the votePost function is recommended.
In fact, we have seen the source code. You only need to read the source code to know how it is implemented.

Function votePost (n, t, I) {I | (I =! 1); var r = {blogApp: currentBlogApp, postId: n, voteType: t, isAbandoned: I}; $ ("# digg_tips" ).css ("color ", "red" ).html ("submitting... "); $. ajax ({url: "/mvc/vote/VoteBlogPost. aspx ", type:" post ", dataType:" json ", contentType:" application/json; charset = UTF-8 ", data: JSON. stringify (r), success: function (n) {if (n. isSuccess) {var I = $ ("#" + t. toLowerCase () + "_ count"); r. isAbandoned? Certificate (I ).html(parseint()( I ).html ()-1): Certificate (I ).html(parseint()( I ).html () + 1)} $ ("# digg_tips" ).html (n. message)}, error: function (n) {n. status> 0 & (n. status = 500? $ ("# Digg_tips" ).html ("Sorry! An error occurred! Trouble feedback to contact@cnblogs.com "): $ (" # digg_tips ").html (n. responseText ))}});}

This is almost the case.
Ps: I used the sublime text format code, which is a little different from the formatted result on the chrome console.
You can also try this Online formatting tool. The effect is similar to that of Online JavaScript beautifier.

After reading the code, we can roughly know that this function has three parameters. The first is postId, which is the Article ID, and the second is recommendation (digg) or objection (bury ),
But the third one has never been used, and the default value is false.
Next, he displays the "submitting..." string at # digg_tips, and then submits data to the background through ajax.
After the data is returned, if n. IsSuccess is true, + 1 will be added to the corresponding count id (# digg_count) or the counter id (# bury_count,
But here we can see that if the value of isAbandoned is true, it will count-1.
We can guess that the third parameter is used to cancel the recommendation or oppose the recommendation. Simply put, I ordered the recommendation, but I don't want to recommend it now, you can pass the third parameter true to cancel the recommendation.
We will test it later.
The n. Message returned by the server is displayed at # digg_tips.
If an error occurs in ajax, the error 500 will prompt "Sorry! An error occurred! Trouble feedback to contact@cnblogs.com "other statuses directly prompt error messages returned by the server.
This is the general process. Because this function is simple, we can see it at a glance.

Some new friends may ask, how do you know the value of currentBlogApp, n, t, and I?
Let's proceed to the next step, and the dynamic debugging is complete. Dynamic debugging is a useful method for compiled projects.
First go to The votePost source code. (If you did not understand it yesterday, go back and check it first .)

So easy, we can find the source code.
Next, click the number 92 to perform the breakpoint operation.
Why is it not a breakpoint under line 91?
Because line 91 is part of the function declaration and there is no way to break the breakpoint, we can only break the breakpoint at the code where the function is to be executed.

The line number of line 91 turns blue, indicating that the breakpoint has been reached. At the same time, we can see the breakpoint in the Breakpoints column on the right.
The Breakpoints column is used to manage all Breakpoints, so that you can easily jump to the corresponding breakpoint location and will often be used in the future.

Now that the breakpoint is complete, we will go back and recommend it .. (Although I felt I was lying to the recommendation, I did not really think so. I found a button for practice at the beginning .)
When you click the recommendation button, a magic thing happens. Instead of running the recommendation function, you jump to the breakpoint we just placed on the Sources Panel of the console.

Now, you can not only view the current variable in the Scope Variables column on the right, but also move the mouse over any variable to view the value of the variable.
The Scope Variables column displays the current Scope, its parent Scope, and closure.
Is it super convenient .. (When I was learning about closures, Scope Variables helped me a lot .)

Let's proceed to the next step. Press F10 three times to see such a thing.

Every time we press F10, we will execute a statement. We just press it three times, that is, we execute $ ("# digg_tips" ).css ("color ", "red" ).html ("submitting... ");
So we can see the word # digg_tips in the submission on the page.
However, when we press F10 again, we find that he executes all the way without entering the internal callback function of ajax.

This is a tangle of problems, and I want to focus on it.
For callback functions like this, especially asynchronous functions, we need to place another breakpoint within the callback function.
So we can have another breakpoint in line 96. Now we click again and we recommend that we still stop at line 92. We can simply press F8 to break the ajax callback function.

Now, we can debug the callback data. At the same time, we can find that there is another Closure thing in Scope Variables on the right. This is the Closure.
If you can't understand it now, it will take a long time to introduce it. You can understand it without a few words. The console is very powerful.
While we can see the closure, we also see ajax's returned data n. Obviously, my IsSuccess attribute is false and fails, because he returned a message "cannot recommend his own content ".
Isn't it interesting? dynamic debugging makes it so easy to find bugs.

Next, let's test the third parameter.
Enter votePost (cb_entryId, 'digg', true) on the console, and press Enter.
It also stops at the breakpoint of 92 rows, and won't be debugged in this case. Directly F8 enters the ajax callback function.

Here we can clearly see that when the third parameter is true, the recommendation is indeed canceled, and you can see that the number of recommendations is indeed-1, even if the refresh is the same.

This time we used two Shortcut Keys: F10 and f8. we will introduce them in detail tomorrow. Today we will learn about Basic Debugging first.

Exercises after class: (improve the difficulty)
1. view the submit comment button for the following comments and find his event. (Bound by jQuery)
2. dynamically debug the execution process of this comments submission event.

If you don't need this exercise, we recommend that you take a look at the jQuery event source code locating issue for detailed analysis.

This article is from a garbled blog. Http://www.cnblogs.com/52cik/