JQuery internals. Search for event code

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

    client code in web applications really gets bigger every year. Sometimes these are dozens of files with hundreds of functions. And what to do when we need to change the code that is executed on an event (for example, clicking on a link). How to find him? Given the 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 optimal to me.

    Task statement


    I must 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 the Google Chrome Developer Tools, as they provide some advanced features that are not in the consoles of other browsers. 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 a very new version, though 1.4, but not the point. This time we will be interested in what code is executed when you click on the link “Make Yandex your start page”. To find means to know the name of the script file, line number. And of course see the code itself.

    Method No. 1


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

    Advantages

    • in simple cases it works

    disadvantages

    • if jQuery is used, this method is ineffective
    • if the handler is hung via live (), then it just will not appear in the list


    Put a breakpoint on the event


    The rich functionality of Google Chrome Developer Tools provides us with the ability to set breakpoints on any events. Open the console (F12), select the “Scripts” tab, expand the “Event Listener Breakpoint”, set the breakpoint on Mouse.click. We click on the link, we get into some kind of internal organ jQuery - most likely in the digestive tract. In some cases, this method is effective, and we can immediately see the called code. But not that. I honestly don’t know how to get to the required code from this place.

    Advantages

    • sometimes it works

    disadvantages

    • this time did not work
    • if several handlers are hung, we can only catch the first one, we won’t find the rest


    If we know something


    It so happens that sometimes we know something in advance about the necessary piece of code. For example, at the touch of a button, it becomes a different color. In this case, there is one method. We right-click on an element, select “View element code”, right-click on an 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.

    Advantages

    • quick decision

    disadvantages

    • You can not always apply, the solution is not universal


    Using the Chrome Extension


    There is such a wonderful extension of Chrome - Visual Event , which at first glance works just wonders. It is enough to click the extension icon on the desired page - and for each element all handlers hinged on them will appear. When you hover over the event icon, you can see the code executed on the event.

    Advantages

    • very easy to use
    • shows everything you need

    disadvantages

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


    You can do without expansion


    Tru hackers just need to write $ (selector) .data ('events') in the Javascript console and you can see all the handlers attached to the element. If the handler is hung via live (), then you need to output $ (document) .data ('events') and look for the desired one in the list. However, as in the case of the extension, this method does not solve the problem to the end, and at the same time, it takes a rather long time to search for the desired handler.

    At last


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

    1. Open the 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. We find the jQuery event handler by typing “handle:” in the search. The colon at the end is placed in order to immediately proceed to the declaration of the function. In newer versions of the library, this function is called dispatch, but not the point. This function is the point through which all assigned events pass. There is enough code, the line where there is a call to apply is important to us - this is essentially the call to our desired piece of code.
    4. A lot of events pass through the function, so we set not a conventional 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 on our line is triggered.
    6. To go to the desired piece of code, click "Step into 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. The problem is solved. Perfectly.
    7. If there are several processors, successively pressing F8 F11, we get to the desired one.

    Advantages

    • really solves the problem
    • the task is solved with standard tools
    • universal method

    disadvantages

    • the brain must be on


    Also popular now: