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

I found that Chrome does work a bit differently than Firefox. In particular, menus that close when the mouse is clicked outside of the menu remain open when inspecting them in Chrome (and they close when inspecting them with Firebug). So the advice is to try to use a different development tool in a different browser to see if it makes a difference.

Answer 2

You can also start the debugger on a timer. Enter this command into the console:

setTimeout(function(){ debugger; }, 10000);

This will give you 10 seconds to use the mouse and make the page look the way you want in order to inspect it. When the debugger starts, the page will freeze, and you'll be able to explore the elements in the developer tool tab, without the DOM changing or responding to any additional mouse events.

Answer 3

While selecting :hover in the CSS menu might be nice if you only want to inspect some CSS code, it doesn't work if whatever you want to inspect is changed using JavaScript.

A simple hack in this case is to open Firebug in a different window (top right corner of the Firebug bar) than move your mouse at the desired location and drag and drop something from there out of the browser window. Now you can inspect whatever in the Firebug window. Just don't move your mouse back into the browser window.

Answer 4

Firebug's hotkey for inspecting elements is Ctrl + Shift + C (Windows/Linux).

Go here for a list of all Firebug keyboard shortcuts.

Answer 5

For Javascript events such as Mouse over.

1. Open Firebug/Inspect an element.
2. Click on the element before the mouseover event, e.g. click on a div. It will turn blue to show it is selected.
3. Put your mouse over the element and don't move it from this point forward.
4. Use your ↑/↓ arrow keys to manoeuvre in Firebug.
5. Use your ←/→ arrow keys to expand/contract code with + or -.
6. Double tap Tab to get to the CSS pane.
7. Use the arrow keys to navigate. Use shift and arrow keys to select text. Ctrl & C to copy.
8. Hold Shift and double tap Tab to get back to the HTML pane.

Answer 6

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