How can I determine which jQuery script is affecting an element?

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

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

+3


source to share


2 answers


There is no easy way to find out what code is modifying an object, other than just search through the code and find code that looks like it might affect the object, set breakpoints, and walk through the code to figure out what it does and when.

You can usually find out which part of the code is using selectors that can target your specific div. Searching throughout the code for different id values ​​or class names will often identify a common scope of code.



If you have HTML event handlers in your code, such as onclick = "xxx ()", you can obviously keep track of where those functions are in your code. If your code uses javascript-assigned event handlers, you can often find the initialization code that executes when the document is ready and see which event handlers get assigned and try to set breakpoints in those callbacks.

There is no way other than learning javascript to find out which code is responsible for the effect you are interested in. To make it serious, you copy / paste all scripts from the site into one big file, then use a decorator like http://jsbeautifier.org/to format it uniformly and readily, and then examine it. I like to make a copy of the code into a separate file and then step through it piece by piece, removing the pieces of code. I'm sure it has nothing to do with what I'm looking for. Slowly over time, I only run out of a few bits of code, one of which has what I'm looking for. It's like looking for a needle in a haystack, but if you keep throwing out the haystacks in the end, there isn't much hay left for the needle. When you start exploring the code, you can also find relevant search things in the rest of the code to speed up your searches.

0


source


Use Firebug. Inspect the element, right click the div in the HTML, then select log events or one of the break options.



+3


source







All Articles