Positioning and debugging of js debugging series source code [basic]

First, let's solve the first problem: 1. Check the function source code that is recommended for this function below the article.
In fact, it is very simple. Just click the magnifier to select the recommendation.

This votePost (cb_entryId, 'digg') Is the function called by the recommendation button. Is it very simple.

Second, locate the file where the function is located.
It is actually very simple. Of course, friends who are not familiar with the console may not know what to think.
On the console, enter votePost and press Enter,

The function source code is bold, and there is a link blog-common.js in the lower right corner? V = WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1: 1 what does this mean?
V = WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1 is directly ignored.

Ps: If you want to know what this is, it is actually a version number. What is the function? It often prevents caching. You can search by yourself on the Internet.
Blog-common.js: 1 is almost this meaning ..
Blog-common.js is the js file where this function is located
1 is the row number of the Code.

Click this link to jump to the Sources Panel. This is the source code panel. The most important function for debugging will be introduced later.

But all the code is in one line. What should we do? It contains 4946 characters, all of which are on one line ..
Chrome provides a code Formatting Function. Click the Pretty print button below to format the code.

After formatting is complete, the code is very beautiful. It is another thing that you cannot understand.
Some cannot understand the code. It may be compiled by tools such as UglifyJS and Google's Closure, such as jquery. min. js files.
It may be that the level is too high. For the moment, if you cannot understand the code written by a great god, I can't do anything about it. You have to work on your own to improve your strength.
If you cannot find the location of the function after formatting, don't worry. What if I am there?
Return to the console panel.

You are delighted to find, blog-common.js? V = WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1: 91
The row number has changed to 91, and now click this link to jump to the corresponding formatted location. Is it super convenient ..

The last question is to modify the function to make it invalid. This is the simplest and much simpler than it was just now. However, many people will not operate it, so I will discuss it here.
First, we know that the function called by recommending this function is votePost (cb_entryId, 'digg'), and it is directly written to html and bound through onclick.
So this function is a global function that can be called everywhere. What does this mean?
It means we can modify it. It's like a global variable. You can modify it anywhere, right? So should global functions.
So we can directly change it to an empty function.
VotePost = function () {}; or votePost = $. noop. $. Noop is an empty function provided by jQuery for our convenience.

Now votePost is an empty function, so you can click the recommendation button to avoid any problems.
Of course, after the page is refreshed, it will take effect again. We only need to debug and modify the page. without modifying the source code of the blog garden, it is impossible to take effect permanently.
Therefore, debugging refers to the process of finding and eliminating errors. If the error source is located, modify it and test it. If not, refresh it and modify it again, in this way, you do not have to modify the actual file and the file cannot be recovered.

Today's content is almost the same. In fact, there are very few global functions for you to debug, because jQuery is popular now, and various click, on and other event binding events make source code locating very complicated.
Fortunately, I wrote an article about this issue and analyzed it in detail. For details, see Introduction to jQuery event source code locating.
I am not familiar with other frameworks, so I didn't analyze them. However, the idea is actually similar, and there must be an event management mechanism.

Today, there are not many knowledge points, but you have to consolidate them by yourself. Otherwise, you will forget it in seconds.

Exercises after class:
1. analyze how the votePost function implements recommendation.
2. dynamic debugging analysis votePost. (Combine breakpoint knowledge)

I want to talk about breakpoint and dynamic debugging tomorrow. I have not found a proper question. I just want to work together. If you have something suitable for dynamic debugging, please follow up ..