Search code examples
javascriptjquerydebuggingfirebug

Without the file or function name, how do I find a function that is making changes on an element?

I have a large project. With dozens of JS files. An element on my page has a click event attached to it. I want to edit this click event, but first I need to locate its' file & line. How can I do that, without knowing the function name or file name before hand? Is there a way to watch the element in firebug and record the function being executed?

Backstory:

The element has an .open class being added when it is clicked, and removed when the user clicks on anything else. I want to have that .open class added on mouseover, and removed on mouseout. I want to use the same function being called in the click event, but first I need to find it.

Thanks.

Solution

  • If you are using jquery to add the event you can find the handler of the event using this code in firebug's console:

    jQuery._data($(".someHTMLelement")[0], "events")

    You will find the location of the handler under the "handler" property, just click on the function to jump to the corresponding line in your code.

    If you are not using jquery but a native addEventListener you can use this:

    getEventListeners($(".rs-btn")[1])

    The function will be under the property "listener"