Firebug: How to inspect elements changing with mouse movements?

Question

Sometimes I need to inspect elements that are only showing up on a page if you put mouse over some area. The problem is that if you start moving mouse towards firebug console in order to see the changes, mouse-out event is triggered and all changes I am trying to inspect disappear. How to deal with such cases?

Basically I am looking for something that would either:

• Switch to firebug console without moving a mouse (using keyboard shortcuts maybe? But I can't figure out how to use firebug with keyboard only)
• Have an ability to "freeze" the page so your mouse movements don't trigger any events anymore.

Thanks.

Answer 1

You could insert a breakpoint at the start of the mouseout event handler. Its code won't be executed until you allow it to continue, and you can use the DOM inspector and so forth while execution is stopped.

Answer 2

I think you can also do this :

• Choose Firebugs Inspect mode

• Hover over the item that pops up the element you wish to inspect and then use the TAB key several times to make Firebug active (I found it tricky to see when Firebug was the active component but nothing like trial and error - when I saw that Firefoxes Find Toolbar was active I'd then SHIFT TAB backwards twice to get into Firebug.

• Then I'd use the L/R arrow keys to contract/expand elements and U/D arrow keys to navigate through Firebugs console

Worked for me anyway!