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 consol

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'));