Back to Research

jQuery Debugger

Tweet

Authors: Anthony Iacono <anthonyiacono@gmail.com> and Aidan McArthur <aidan.b.mcarthur@gmail.com>

Download link: https://github.com/AnthonyIacono/jQueryDebugger

jQuery Debugger allows you to set breakpoints for jQuery event handlers and delegates.


Example (Bind):

If you have an event handler that was created using bind, such as $('a').bind() or $('a').click(), create a breakpoint using $('a').bp()

// The Bind
$('a').click(function() {
	return false;
});

// The Breakpoint
$('a').bp('click');

// Click the link, you will now be able to step into the handler.

Example (Delegate):

If you have an event handler that was created using delegate, such as $('body').delegate() or $('body').live(), create a breakpoint using $('body').bpd()

// The Delegate
$('body').delegate('a', 'click', function() {
	return false;
});

// The Breakpoint
$('body').bpd('a', 'click');

// Click the link, you will now be able to step into the handler.

Live Example:

Click the following link with your console open