JS Debug Series: Source Location and debugging [basic]

JS Debug Series Directory:-

If you look at 1, 22, you should have a preliminary understanding of the console, today we have a simple debugging.
The three after-school exercises that were left yesterday are pretty much what we are going to talk about today.
Let's deal with the first question first:1. Review the functions called by this function under the article recommended source code
Actually very simple, click the magnifying glass to select that recommendation.

This votepost (Cb_entryid, ' Digg ') is the function called by the recommended button, and is not very simple.

Second, navigate to the location of the file where the function resides.
In fact, it is very simple, of course, not familiar with the console of friends may not know how to look.
I enter votepost in the console and then enter,

The source code of the function is bold, and there is a link in the lower right corner blog-common.js?v=we8o1xrgctu07qvvwyqerqd7aa8fdjp_dgoe-crat3k1:1 What does this mean?
The back of the V=WE8O1XRGCTU07QVVWYQERQD7AA8FDJP_DGOE-CRAT3K1 directly ignored the good.

PS: If you want to know what this is, in fact, is a version number, as to what role, is often to prevent the cache, specific self-surfing online search it.
Blog-common.js:1 that's pretty much what it means.
Blog-common.js is the JS file where this function is located.
1 is the line number where the code is located.

Directly Click this link, you can jump to the Sources panel, this is the source panel, debugging the most important feature, will be introduced slowly.

But all the code is in one line, how do we look at it? 4,946 characters, fully indented on one line ...
Chrome provides us with a code formatting feature that can be formatted by clicking on the Pretty Print button below.

After the format is finished is very beautiful code, as to see do not understand, that is another matter.
Some can not understand the code is Uglifyjs,google ' s closure such as the tools compiled, such as jquery.min.js files.
There may be a level too, temporarily do not understand the code written by the great God, then I can do nothing, you can only refuel your own efforts to enhance the strength.
If the format is enough to find the location of the function, do not worry, I am in, panic what?
Go back to the console panel just now.

You are delighted to find thatblog-common.js?v=we8o1xrgctu07qvvwyqerqd7aa8fdjp_dgoe-crat3k1:91
Line number becomes 91, now click this link, you can jump to the corresponding format after the location, is not super convenient.

The last problem, modify the function to invalidate it, the simplest, more simple than the earlier, but a lot of people do not operate so I came out to speak.
First, we know that the function that is recommended for this function is votepost (Cb_entryid, ' Digg ') , and that he is directly written on the HTML via the onclick binding.
So this function is a global function that can be called everywhere, what does that mean?
means that we can modify ah, like a global variable, you can change where you are, the global function is also reasonable.
So we directly modify the empty function.
Votepost = function () {};  or votepost = $.noop; All can. $.noop is an empty function that JQuery provides for us, which is convenient for us to use.

Now Votepost is an empty function, so you click on the recommendation button and nothing happens.
Of course, refresh the page will be re-effective, we just debug on the page to modify it, not to change the source of the blog garden, it is impossible to permanently take effect.
So debugging means to find and troubleshoot the process, if you locate the source of the error, modify and then test, if not, re-modify after the refresh, so that you do not have to modify the actual file resulting in unrecoverable.

Today's content is almost these, in fact, there are very few direct global functions for you to debug, because now jQuery popular, all kinds of click, on the event of binding, resulting in a very cumbersome source location.
Fortunately, I wrote an article, a more detailed analysis of the problem, please refer to the "JQuery Incident source Location Problem"
Other framework I do not know, so no analysis, but the idea is almost the same, there will inevitably be an event management mechanism.

Today is not a lot of knowledge, but to do their own consolidation, or will forget the second.

After-school exercises:
1. Analyze how the Votepost function is implemented as recommended.
2. Dynamic Debug Analysis Votepost. (To combine breakpoint knowledge)

Tomorrow to talk about breakpoints and dynamic debugging, I did not find the right topic, just do it first, if you have the right thing to be dynamic debugging, please follow the thread.