How do I monitor what Javascript is being triggere

Question

Working with another developer's code: When I click an element on his page and a Javascript/jQuery event is triggered, how do I monitor what JS is being triggered? I am somewhat familiar with event listening but I was under the impression that you must either know the variable being declared or a line of code that is being executed. I don't know either as I am trying to find it within his source in order to add additional functionality and refactor it. Thank you.

Example: He has an "accordion flyout" which reveals more text when you click on a plus symbol and then hides it when you click it again. I want to improve it so that the plus symbol changes to a minus symbol by adding a line of JS that modifies the CSS background-image. I just don't know where he has embedded his functionality.

EDIT: Interested in either a method involving debugging tools for web browser OR a programmatic solution involving code. I'm assuming the solution will involve a debugging tool as I don't know where to find previous developer's JS code in this large application.

Answer 1

If you're using Firebug you could install an additional addon called Firequery. It enhances the HTML View with Events on the elements.

Answer 2

Press F12 or right click on the webpage and choose inspect element ( doesn't have to be the element you're checking).

Then you can use several tools:

1) Timeline tab and the recording button which will show all the events that are happening

then when you have identified the process using the above

go to

2) Sources tab and subtab Content Scripts and search for the function or variable or script file you're interested in ( use ctrl + F to search in script files as it greatly saves time)

P.S.

Using chrome

Answer 3

You can add to your Javascript to output to console. You can also monitor it using F12 key on most browsers. In some browsers, you may need to enable debugging and/or javascript debugging.