How to debug CSS/Javascript hover issues

Question

I often find myself wanting to debug CSS layout issues that involve DOM changes caused by Javascript in reaction to a hover event or different CSS rules applying due to the :hover selector.

Normally, I'd use Firebug to inspect the element that's giving me trouble and see what its CSS properties were, and where those properties come from. However, when hovering is involved, it becomes impossible, because as soon as you move your mouse down to the Firebug panel, the elements you're interested in are no longer hovered, the CSS rules that apply are different, and (in the case of JS hovers) the DOM is changed.

Is there any way I can "freeze" the state of the DOM and application of :hover in order to inspect the DOM as it was during a hover event?

Any other ideas on how to debug this sort of issue are welcome, of course.

Answer 1

Add an onmouseover function handler to the element that is taking the :hover. Inside that function, call console.info(element) on whichever element you'd like to know about.

myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};

When you run this with firebug active, the element will be available to inspect in the firebug console.

Answer 2

for css issues, i find web developer plugin invaluable:

http://chrispederick.com/work/web-developer/

load it, then you have 2 possible tools at your disposal.

1. inherited css from files on any moused-over element, use shift-ctrl-y

2. computed css (incuding any inline style= applied that is not in a .css file - or through a .css method from jquery etc) - press shift-ctrl-f

the latter would also return all classes applied to the element.

of course it has other great uses such as, superb debugging of forms, including of editing of hidden fields and cookies (which can be used for penetration testing)

Answer 3

I had the same problem and found that whilst I couldn't inspect hover objects in Firefox with Firebug, Safari's Web Inspector would freeze the current state and allow inspection. To activate Safari's web inspector just enter the following line into the terminal and restart Safari:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Activate the hover element in the browser, then right click and select 'Inspect Element'. The page will freeze in it's current state allowing you to inspect the fleeting objects to your heart's content.

Answer 4

You can do this in Firebug but its a little "buggy". If you inspect the element and then click off the the html tab, to the DOM tab for instance, when you go back to the html tab the "style" css tab on the right will have an arrow drop down selector where you can select the :hover state of that element to be active. Sucks to have to switch tabs to get it to show but it works for me.

Answer 5

There is no perfect solution (mouseover/hover-simulation effect) in firebug.

However, there are a couple ways to edit your hover state in firebug:

1. Add an :active state, along with your :hover

   a:hover, a:active { ... }

   If you mouse down on your element, drag off and release, it remains active.

2. Turn the :hover state into a .hover class

   You can edit the CSS rule by clicking on the source file (in Firebug's Style tab)

   Then of course, you'd add (and remove) the .hover class from your element.

Answer 6

You can also inspect that element, then on the style the tab there should be a little drop down arrow. It will have something like "Show User Agent", "Expand Shorthand Properties", then there should be 2 more under that (I'm guessing that you are inspecting something that has a hover state) ":active" and ":hover" select the ":hover" and you should be golden.