Question

I’m wondering if it’s possible to find out which jQuery script is affecting a particular element on a page.

I can see jQuery affecting a div, but can’t find which script is manipulating the div – Is there a way to find out?

Answer 1

There is no easy way to find that what code changes an object other than just searching through the code and finding code that looks like it might be affecting the object, setting breakpoints and stepping through the code to figure out what it does and when.

Usually, you can find out which part of the code is using selectors that could be targeting your specific div. Searches through all the code for various id values or class names will often find the general area of the code.

If there are HTML event handlers like onclick=”xxx()” in the code, you can obviously track down where those functions are in the code. If the code is using event handlers assigned via javascript, then you can often find the initialization code that runs when the document is ready and see what event handlers are getting assigned and try to set breakpoints in those callbacks.

There really is no other way besides studying the javascript to find out what code is responsible for the effect you’re interested in. To do this seriously, you copy/paste all the scripts from the site into one big file, then use a beautifier like http://jsbeautifier.org/ to format it uniformly and readably and then study it. I like to make a copy of the code into a separate file and then go through it piece by piece removing pieces of code I’m sure have nothing to do with what I’m looking for. Slowly over time, I end up with only a few bits of code left, one of which has what I’m looking for. It is like looking for a needle in the haystack, but if you keep throwing out pieces of hay eventually, there isn’t much hay left for the needle to be in. As you start to learn the code, you can also find relevant things to search for in the remaining code to make your search faster.