Find jQuery code that trigger then event in Web Browser

Question

I joined a team to work on a project. Now that they use jQuery and a lot of the javascript file are external files instead of embedded.

When I clicked a button, which simply looks like:

<a class="button_cancel">Cancel</a>

It trigger an event which is defined in one javascript file.

Is there a way to locate the file (or even the exact line of the file) when the onclick is triggered?

Answer 1

You could use some developer tools like the Firebug extension for Firefox (which I hope you already have). In Firebug's "Script" panel you can set "Break on next" (in the top left corner) which practically means, set a breakpoint in whichever line is executed next. Activate that. Then click the button. You should land in the executed file. If not step through the code a bit and you will get there. The only annoying thing would be if there is some other JavaScript that is continuously running.

I believe the developer tools of Chrome, Safari and Opera provide similar features.

EDIT: Chrome has it too. Panel "Sources" in the top right, and it's called "Pause Script Execution".

Answer 2

Visual Event 2 can provide you with this informations in a nice and easy to use way.

Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements. Visual Event shows:

• Which elements have events attached to them
• The type of events attached to an element
• The code that will be run with the event is triggered
• The source file and line number for where the attached function was defined (Webkit browsers and Opera only)

Demo