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

Answer 1

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.

Answer 2

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

Answer 3

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...

Answer 4

You can use the debugger command anywhere in a javascript file. When the interpreter hits that statment, if a debugger is available (like Firebug) then it gets triggered

Answer 5

find the line and place a breakpoint. Then reload the the site / page. Then firebug will automatically pause the execution of the statement when a breakpoint is hit.

Answer 6

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.