Debug JavaScript events with Firebug

Question

I need to set a breakpoint for a specific event, but I don’t know where it is defined, because I have a giant piece of minimized JavaScript code, so I can not find it manually.

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

I found the Firefox Javascript Deobfuscator add- in that shows the currently executed JavaScript, which is good, but the code I need to debug uses jQuery , so there are a lot of function calls even on the simplest event, so I can't use this either.

Is there any debugger specifically designed for jQuery ?

Does anyone know of any tool that turns restored JavaScript back into formatted code, for example, return function(){alert("aaa");v=3;} back to

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

Answer 1

Well, this may be too much trouble than it costs, but it looks like you have three things to do:

• Change the source. I like this online tool for quick and dirty. Just insert your code and click the button. Never let me down, even on the most funky JavaScript.

• All jQuery binder events are passed to "jQuery.event.add" ( this is what it looks like in an unsettled source ), so you need to find this method and set a breakpoint there.

• If you get to this, all you have to do is check the column at the breakpoint to see who named it. Please note: since you are in an internal place in the library, you will need to check out several outputs (since the code calling "jQuery.event.add" is most likely just other jQuery functions).

Note that 3) requires Firebug for FF3. If you are like me and prefer to debug Firebug for FF2, you can use the century-old arguments.callee.caller.toString() method to check the stop code by inserting as much ".caller " as possible.

---

Change Also see "How to debug Javascript / jQuery event bindings using FireBug (or a similar tool) . "

You may be able to avoid:

 // 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 the event handling code, and you can just start looking for it in your source, rather than trying to set a breakpoint in the jQuery source.

Answer 2

First replace the miniature jquery or any other source that you use with the created one. Another useful trick I found is using a profiler in firebug. The profiler shows which functions are performed, and you can click one at a time and go there to set a breakpoint.

Answer 3

Just an update:

Google Chrome (the developer tools in it) supports all kinds of breakpoints, as well as break on Event .

All events along with device orientation and timers

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

There is also a built-in deminerator / unminimizer / prefeter that helps you set breakpoints manually on javascript compressed files.

Answer 4

What you can do is get an abbreviated code - you will have access to this. Change the code according to the Crescent Fresh (1) parameter or whatever method you prefer.

Then download and install Fiddler - all web developers must have this incredible tool.

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

Fiddler basically intercepts your browser request for a specific file and can serve another file in your browser. So now you can look at the non-minified code.

Easily.

Another option is to use Firefox and install the Venkman debugger on it - much better than Firebug IMHO, and the Venkman debugger has a "pretty printable" parameter that can visually unify the minified code at runtime. Stick to the break point wherever you want ...

Answer 5

Another update: now there is a firebug extension that adorns JavaScript:

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

It works fine for me in Firefox 12.0.

Confirm the answer to determine it.

Answer 6

You can use the debugger command anywhere in the javascript file. When the interpreter falls into this status, if a debugger is available (for example, Firebug), it starts

Answer 7

find the line and place a breakpoint. Then reload the site / page. Then firebug automatically pauses execution of the instruction when it reaches the breakpoint.

Answer 8

This will do the job. http://jsbeautifier.org/ You can also search Google for the javascript browser.