Debugging JavaScript events with Firebug

Question

I need to set a breakpoint to certain event, but I don't know, where is it defined, because I've got giant bunch of minimized JavaScript code, so I can't find it manually.

Is it possible to somehow set a breakpoint to for example the click event of an element with ID registerButton, or find somewhere which function is bound to that event?

I found the Firefox add-on Javascript Deobfuscator, which shows currently executed JavaScript, which is nice, but the code I need to debug is using jQuery, so there's loads of function calls even on the simplest event, so I can't use that either.

Is there any debugger made especially for jQuery?

Does anybody know some tool that turns minified JavaScript back into formatted code like turn function(){alert("aaa");v=3;} back into

function() {
   alert("aaa");
   v = 3;
}

Solution 1

Well it might all be too much trouble than it's worth, but it looks like you have three things to do:

1. De-minify the source. I like this online tool for a quick and dirty. Just paste your code and click the button. Has never let me down, even on the most funky of JavaScript.

2. All jQuery event binders get routed to "jQuery.event.add" (here's what it looks like in the unbuilt source), so you need to find that method and set a breakpoint there.

3. If you have reached this far, all you need to do is inspect the callstack at the breakpoint to see who called what. Note that since you're at an internal spot in the library you will need to check a few jumps out (since the code calling "jQuery.event.add" was most likely just other jQuery functions).

Note that 3) requires Firebug for FF3. If you are like me and prefer to debug with Firebug for FF2, you can use the age-old arguments.callee.caller.toString() method for inspecting the callstack, inserting as many ".caller"s as needed.

---

Edit: Also, see "How to debug Javascript/jQuery event bindings with FireBug (or similar tool)".

You may be able to get away with:

// inspect    
var clickEvents = jQuery.data($('#foo').get(0), "events").click;
jQuery.each(clickEvents, function(key, value) {
    alert(value) // alerts function body
})

The above trick will let you see your event handling code, and you can just start hunting it down in your source, as opposed to trying to set breakpoint in jQuery's source.

Solution 2

First replace minified jquery or any other source you use with formated. Another useful trick I found is using profiler in firebug. The profiler shows which functions are being executed and you can click on one and go there to set a breakpoint.

Solution 3

Just an update:

Google Chrome (the dev tools in it) support all sorts of breakpoints, along with break on Event.

All events together with device orientation changes and timers

You can see a video with a presentation of all the capabilities from Google IO.

There's also built-in deminifier/ unminimizer/ prettifier which will help you set breakpoints manually on compressed javascript files.

Solution 4

What you could do is get the minified code - you will have access to this. De-minify the code as per Crescent Fresh's (1) option or any method you prefer.

Then download and install Fiddler - all web devs should have this incredible tool installed.

Then using Fiddler you can intercept the browser's call for the minified.js file with the local unminified.js you have on your local drive.

Fiddler basically intercepts your browser's request for a specific file and can serve up a different file to your browser. So you can now look at un-minified code.

Easy.

Another option is to use Firefox and get the Venkman debugger installed on it - far better than Firebug IMHO - and the Venkman debugger has a "pretty print" option which can visually un-minify the minified code at run time. Stick your break point wherever you want now...

Solution 5

Another update: There's now a firebug extension that beautifies JavaScript:

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/

It's working perfectly for me in Firefox 12.0.

Credit to this answer for spotting it.

View more solutions

Comments

[Sebastian Zartner]

possible duplicate of How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

[Jakub Arnold]

The problem is that I don't know where in the code is the event defined. I need debugger to tell me that, for example by showing the function that is bound, or setting a breakpoint to the event without needing to know, where is it in the code.

[Jakub Arnold]

The problem is that I don't have non-minified version of all sources.