Let's deal with the first problem first: 1. Check the function source code recommended by this function below the article
It's actually very simple, just click the magnifying glass to select the recommendation.
This votePost(cb_entryId,'Digg') is the function called by the recommended button. Isn't it very simple?
The second problem is to locate the file location where the function is located.
In fact, it is also very simple. Of course, friends who are not familiar with the console may not know how to read it.
I type votePost in the console and press Enter,
The function source code is roughly displayed, and there is a link blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:1 What does this mean?
The subsequent v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1 is ignored directly.
ps: If you want to know what this is, it is actually a version number. As for what it does, it is often to prevent caching. Please search online for details.
blog-common.js:1 almost means this. .
blog-common.js is the js file where this function is located
1 is the line number where the code is located.
Click this link directly to jump to the Sources panel. This is the source panel, the most important function of debugging, and will be introduced slowly later.
But all the code is on one line, how do we look at it? The 4946 characters are all reduced on one line. .
Chrome provides us with a code formatting function, click the Pretty print button below to format the code.
After the formatting is completed, it will be very beautiful. As for whether you can understand it or not, that is another matter.
Some people can't understand it, maybe the code has been compiled by tools such as UglifyJS, Google's Closure, etc., such as jquery.min.js file.
It may also be that your level is too low and you can't understand the code written by the master for the time being, so I can't do anything about it. You can only work hard to improve your strength.
If the formatting is enough, don’t worry, if I’m here, why are you panic?
Go back to the console panel just now.
You are delighted to find that blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:91
The line number has become 91. Now click on this link and you can jump to the corresponding formatted position. Isn’t it super convenient? .
The last question is to modify the function to invalidate it. This is the simplest, much simpler than the one just now, but many people can't operate it, so I specially took it out and talked about it.
First of all, we know that the function recommended to call this function is votePost(cb_entryId,'Digg'), and it is written directly and bound by onclick on html.
So this function is a global function that can be called everywhere, so what does this mean?
It means we can modify it, it's like a global variable, you can modify it anywhere, right? Then the global function should be correct.
So we can just modify it to an empty function.
votePost = function () {}; or votePost = $.noop; $.noop is an empty function provided by jQuery for us to be convenient for us to use.
Now votePost is an empty function, so nothing will happen if you click the recommendation button.
Of course, it will take effect again after refreshing the page. We just debug and modify it on the page. It is impossible for us to take effect permanently without changing the source code of the blog park.
So debugging means the process of finding and eliminating errors. If the error source is located, modify it and then test it. If it is wrong, refresh and modify it again, so there is no need to modify the actual file, which will make it unrecoverable.
Today's content is almost all that. In fact, there are few direct global functions for you to debug, because jQuery is popular now, and various event bindings such as click and on make source code positioning very complicated.
Fortunately, I wrote an article before and analyzed this problem in more detail. For details, please refer to "A Brief Discussion on the Source Code Location Issues of jQuery Events"
I am not familiar with other frameworks, so I didn’t analyze them, but the ideas are actually similar, and there must be an event management mechanism.
I don’t have much knowledge today, but I have to consolidate it myself, otherwise I will forget it in seconds.
After-class exercises:
1. Analyze how the votePost function implements the recommended one.
2. Dynamic debugging and analysis of votePost. (To combine breakpoint knowledge)
I will talk about breakpoints and dynamic debugging tomorrow. I haven't found a suitable question, so I'll do it first. If you have something suitable that needs dynamic debugging, please reply. .