jquery testing - pausing the DOM?

Question

Is there a way to sort of "pause" the DOM (in either firefox or chrome). Meaning, perhaps there's an animation happening and I'd like to be able to stop and see exactly what the markup looks like and such. Some animations happen too quickly for me to use "inspect element" or anything.

Answer 1

You can insert the "statement"

debugger;

wherever you want things to stop. It helps of course to be using a browser with a debugger :-)

Now, that only works in-line in your code. If you're doing something like setting up animations in the jQuery animation queue, you'd have to squeeze that into the sequence. It's not pretty; here's a blog post more-or-less on that subject: http://www.bennadel.com/blog/1864-Experimenting-With-jQuery-s-Queue-And-Dequeue-Methods.htm

Answer 2

You can use the "Script" tab in Firebug to set breakpoints and step through the code.

You can also do things like "Break on attribute change" for an HTML element. See Firebug Breakpoints Demo for more.