Debugging jQuery with Firebug

Question

I\'ve seen a ton of old posts out there on how to try to debug jQuery in Firebug. Anyone have a good way yet cause I do not see one at all that works.

Answer 1

First, make sure that you're not using the minimized or packed version of jQuery. That would be virtually impossible to debug. Next, I find that it helps to step through at least once so that you know where to set breakpoints in the jQuery code. You may also want to break the chaining of any jQuery statements in your code and assign the intermediate results to variables that you can inspect. Other than that, I'm with @Chad. I haven't had a lot of problems debugging my jQuery-based code.

Answer 2

You will likely also want to double-check most of your code with the jQuery documentation. jQuery code looks seductively familiar, but has some very odd programming paradigms that produce what is effectively noise when not accounted for.

Answer 3

I think the asker really just wants to know how to use the tool at a very basic level, and I guess none of these answers target their issue straight on that's why they don't get green check. though the info in them is useful once you get past the basics. This Q is old and the original author has probably gone on to make a million bucks, but perhaps this answer will benefit someone else. I don't know much myself but here is what I do know.

You use the scripts tab from the firebug window. Look at the top you see console, html, css, script DOM etc. tabs. You want to select the script tag then below that in impossibly small type there's another row of tabs the first one defaults to static and the second one is a drop down of all the components that have javascript. Select the one you want to debug and go to the left of it and click in the margin beside the line you want to set a break point. A red circle still appears there. Now over the right there are arrows for step into, step over, etc. and to the right of that under watch you can watch variables go by.

Answer 4

Try this plugin. It is specifically for debugging jquery based javascript in Firebug. Lets you drop into chained events and log them to console.