The previous articles have introduced some basic knowledge of the js debugging series. This time, the garbled code brothers have brought you js breakpoints and dynamic debugging methods. Friends who need it can refer to it.
After-class exercises I left yesterday 1. Analyze how the votePost function is implemented as recommended.
In fact, we have seen the source code. Just read the source code and you can 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("Commit..."); $.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 ? $(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 == 500 ? $("#digg_tips").html("Sorry! An error occurred! Please feedback to [email protected]") : $("#digg_tips").html(n.responseText)) } }); }It's almost like this.
ps: I use the sublime text formatted code, which is a bit different from the result after formatting on the chrome console.
You can also try this online formatting tool, the effect is similar: Online JavaScript beautiful
After reading the code simply, you can roughly know that this function has 3 parameters. The first is postId, which is the article ID, and the second is recommendation (digg) or opposition (bury).
But the third one has not been used, and the default value is false
Looking down, he displays the "Submit..." string at #digg_tips, and then submits the data to the background through ajax.
After returning the data, if n.IsSuccess is true, it will +1 on the corresponding count id of like (#digg_count) or objection (#bury_count).
However, if the value of isAbandoned is true, count -1.
Then we can guess that the third parameter is used to revoke recommendation or objection. Simply put, I clicked the recommendation, but I don’t want to recommend it now. I can pass the third parameter true to achieve the effect of canceling the recommendation.
Let's test it later.
Next, the n.Message information returned by the server is displayed at #digg_tips.
If an error occurs in ajax, it is 500. It will prompt "Sorry! An error has occurred! Please feedback to [email protected]" Other statuses directly prompt the server for the error message returned.
This is the general process, because this function is simple, it can be seen at a glance.
Some new friends may have asked, how do you know what value is currentBlogApp, n, t, i?
Then let’s go to the next step and dynamic debugging. Dynamic debugging is a very useful method for compiled projects.
First locate the votePost source code, (I said this yesterday and don’t understand it very much, then go back and take a look first.)
so easy, we have located the source code.
Next, we click on the number 92 and perform the breakpoint operation.
Why not breakpoints at line 91?
Because line 91 is the function declaration part, we cannot set a breakpoint, we can set a breakpoint at the code to be executed by the function.
Seeing that the line number of line 91 has turned blue, indicating that there has been a breakpoint in this place. At the same time, we can see the downed breakpoints in the Breakpoints column on the right.
The Breakpoints column manages all breakpoints, which can be easily redirected to the corresponding breakpoint position, and will be used in the future.
Now that we have finished setting the breakpoint, we will click on the recommendation. . (Although I feel like I'm cheating on recommendations, I really didn't think so. I just found a button to practice.)
When you click the recommendation button, something magic happened. Instead of running the recommendation function, you jumped to the breakpoint we just lowered in the Sources panel of the console.
Now, you can not only see the current variable in the Scope Variables column on the right, but also move the mouse directly to any variable to view the value of the variable.
The Scope Variables column displays the current scope and its parent scope, as well as closures.
Isn't it super convenient? . (Scope Variables helped me a lot when I was first learning closures.)
Let’s go to the next step and press F10 3 times to see something like this.
Every time we press F10, we will execute a statement. After pressing it 3 times just now, we will execute $("#digg_tips").css("color", "red").html("Submit...");
So we can see the #digg_tips displaying the words in the submission on the page.
But when we press F10 again, we found that it continued to execute all the way without entering the callback function inside ajax.
This is a confusing question, and I want to focus on it.
For callback functions like this, especially asynchronous, we need to next breakpoint inside the callback function.
So we can just set a breakpoint on line 96. Now we click on the recommendation and still stop at line 92. We can just press F8 and break it at ajax callback function.
Now, we can debug the callback data, and we can also find that there is an additional Closure thing in Scope Variables on the right, which is the closure.
If you can't understand it now, then just go through it. This thing needs to be introduced in a large amount of time, and it cannot be explained in just a few words. Anyway, the console is very powerful.
While seeing the closure, we also see the return data n of ajax. It is obvious that my IsSuccess property is false and has not succeeded because it returns a message "can't recommend your own content".
Isn't it very interesting? Dynamic debugging makes it easy to find bugs?
Next, let’s experiment with the third parameter.
We enter votePost(cb_entryId, 'Digg', true); and press Enter.
It also stopped at the breakpoint of line 92, so it will not debug in this, and directly enter the ajax callback function of F8.
Here we clearly see that when the third parameter is true, the recommendation is indeed cancelled. At the same time, you can see that the recommendation number is indeed -1, even if it is refreshed.
This time we used two shortcut keys F10 and F8. We will introduce them in detail tomorrow. Today we will learn basic debugging first.
After-class exercises: (Improving the difficulty)
1. Check out the Submit Comment button for comments below and find his event. (jQuery bound)
2. Dynamically debug the execution process of this submission comment event.
If you don’t know this exercise, it is recommended to read "A Brief Talk on the Issues of JQuery Event Source Code Positioning" for detailed analysis.
This article comes from: Blog Garden blogger’s garbled article. http://www.cnblogs.com/52cik/