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

HTML Tooltip (Firebug)

Select the element with the inspector or in the DOM. Go to the "Styles" tab in firebug and click to the small arrow on the tab and select ":hover" (also available ":active"). The state will remain on "hover" and you can select other elements to make them hover.

HTML Tooltip (Firefox developer tools)

Click the button to see three checkboxes, which you can use to set the :hover, :active and :focus pseudo-classes for the selected element

This feature can also be accessed from the popup menu in the HTML view.

If you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:

JQuery Tooltip

Open the console and enter jQuery('.css-class').trigger('mouseover')

Regular Javascript Tooltip

Open the console and enter document.getElementById('yourId').dispatchEvent(new Event('mouseover'));

Answer 2

The style panel in Firebug has a dropdown menu where you can choose the :active or :hover state.