How do I debug and inspect things that change on response to mouseclicks or focus changes?

Question

I'm currently toying around with some autocomplete form fields, and am finding it very hard to inspect the generated drop down items. As soon as I click on the "inspect element" button or try to right click on the dropdowns, the original autocomplete input runs an onclick event (or something that triggers on a focus change) and hides, deletes or otherwise modifies the element I was trying to inspect.

Is there a way to work with the debugger so that the mouseclicks and other commands I give to it don't get intercepted by the script I'm trying to debug?

I currently have this kind of problem on both Firebug and on Chrome's inspector. The only solution I can think right now would be setting some smart breakpoints inside the appropriate event handlers but that is hard to do if I don't know what event handlers to look for or where they are hidden in the original code...

Answer 1

You could set a breakpoint and inspect after it is triggered, I have noticed that freezes the DOM.

Answer 2

You need to use breakpoints. As far as tracking down what's happening where, Chrome's "Call Stack" window can be very helpful.

Cheers