The insides of jQuery. Search for event code

The farther into the forest, the thicker the partisans. No not like this. The older the web, the more javascript

The client code in web applications is becoming more and more every year. Sometimes it is dozens of files with hundreds of functions. And what to do when we need to change the code that runs on the event (for example, click on the link). How to find it? Asking a solution to this problem, I came up with several different options. Each of them has its pros and cons. And at the end of the article I propose a method that seems to me optimal.

Task statement

I’ll say right away that the title reflects the essence of the question: we are looking for an event handler that was added using the jQuery library, which is now very popular. To demonstrate the solutions, we will use Google Chrome Developer Tools, as they provide some advanced features that are not available in other browser consoles. Without these chips, some solutions are not possible at all.

Guinea pig

We will search for the event handler code on the Yandex main page. Mostly because it uses jQuery. Not very new version, though - 1.4, but not the essence. This time, we will be interested in what code is executed when clicking on the link “Make Yandex the homepage”. Find - it means to know the name of the script file, line number. And of course see the code itself.

Method number 1

Using the Google Chrome Developer Tools (F12), all you need to do is click on the link with the right button, select “View Element Code”, click on the “Event Listeners” tab on the right and see all event handlers there. The problem with jQuery is that in this case this code will be nothing but a piece of jQuery internals.

Virtues

• in simple cases it works

disadvantages

• if jQuery is used, this method is ineffective
• if the handler hangs through live (), then it simply does not appear in the list

We set a breakpoint for the event

The rich functionality of the Google Chrome Developer Tools gives us the opportunity to set breakpoint on any event. Open the console (F12), select the “Scripts” tab, unfold the “Event Listener Breakpoint”, set a breakpoint on Mouse.click. We click on the link, we get into some internal jQuery body - most likely in the digestive tract. In some cases, this method is effective, and we can immediately see the code being called. But not in this. How to get to the desired code from this place - honestly, I don’t know.

Virtues

• sometimes it works

disadvantages

• this time did not work
• if there are several handlers, we can only catch the first one, the rest we will not find

If we know something

It so happens that sometimes we know something about the necessary piece of code in advance. For example, by pressing a button, it becomes a different color. In this case, there is one method. We right-click on the element, select "View Element Code", click on the element found in the DOM hierarchy, and select "Break on attributes modifications". It remains only to click the link - and we get into the desired piece of code.

Virtues

• speed of getting a solution

disadvantages

• it is not always possible to apply, the solution is not universal

We use the Chrome extension

There is such a wonderful Chrome extension - Visual Event , which at first glance creates just miracles. It is enough to click on the extension icon on the necessary page - and for each element all handlers will be displayed on them. When you hover over the event icon, you can see the code executed by the event.

Virtues

• very easy to use
• shows everything you need

disadvantages

• you need to install something extra
• On pages with complex layout, many icons will simply be inaccessible for viewing.
• the task is still not solved to the end: we saw the code, but in which file and on which line it is located, we don’t know

You can do without the extension

Tru hackers just have to write $ (selector) .data ('events') in the Javascript console and you can see all the handlers attached to the element. If the handler hangs up via live (), then you need to output $ (document) .data ('events') and search the list in the list. However, as in the case of an extension, this method does not solve the problem to the end, and you need to search for the necessary handler for quite a long time.
')

Finally

What do I propose as the optimal solution to the problem?

1. Open Google Chrome Developer Tools (F12), select the “Scripts” tab and find the jQuery script in the drop-down list.
2. Click the “Pretty print” button for aesthetics.
3. Find the jQuery event handler by typing “handle:” in the search. A colon is placed at the end in order to go directly to the function declaration. In newer versions of the library, this function is called dispatch, but not the essence. This function is the point through which all assigned events pass. There is enough code, the line is important for us, where there is a call to apply - this is essentially the call of our desired piece of code.
4. There are a lot of events through the function, so we set not a normal breakpoint, but a conditional one. The first parameter of the function is the event object, so we write "arguments [0] .type == 'click'".
5. We click on the link and breakpoint works on our line.
6. To go to the desired piece of code, click "Step into the next function call" (F11). Voila! We not only found the necessary piece of code, we also now know in which file and on which line it is located. Problem solved. Perfectly.
7. If there are several handlers, successively pressing F8 F11, we get to the desired one.

Virtues

• really solves the problem
• the problem is solved by standard tools
• universal method

disadvantages

• the brain must be turned on