Javascript breakpoint on user event

Question

When I click a button in my app a series of Javascript code is executed, in this particular case, I click on a "Cancel" button to close the currently open modal window. This close button looks like this on HTML:

<a class="cancel close">Cancel</a>

What I need is a way to track what is "triggered" by the action of clicking this <a> element in Javascript, without having to look into .js files for a reference to this DOM element (where the event was binded to the <a> element).

Is there a way of creating some sort of breakpoint in Javascript after a user generates an event but I don't know where that Javascript code is? In order to actually find where that code is.

I'm using Google Chrome/Developer Tools for debugging Javascript.

Answer 1

Open the developer console; switch to the scripts tab; click in the left-hand margin (on the line number) to set a breakpoint. The script's execution will pause at the breakpoint, and you can inspect the call stack, local variables, and so on.

Or, you can click "Pause", before you trigger an event, and script execution will pause (like setting a global breakpoint) as soon as a script is about to execute, and show you the code. Then you can resume, step over, step into, or step out of the current function/expression.

You can do that in Firebug and the built-in consoles in Safari, Chrome, Opera and IE.

Edit: I should add, that the pause-button is less useful if you have javascript-driven animations, ajax polling, or other code being called with an interval, since the pause button stops any script execution until you click resume. So it'll pause when, say, an animation's update function is called, probably way before you have a chance to trigger the code you're interested it.

However, in there's also "Break on exceptions" and "Break on uncaught exceptions" option in most (if not all) developer consoles. Like the pause button, it's like having a global breakpoint, except it only stops when there's trouble. So if the code you're trying to find is causing errors or throwing exceptions, you can set the debugger to pause the script when that happens.

Answer 2

Firebug is an option for FF.

http://getfirebug.com/doc/breakpoints/demo.html