How to debug CSS/Javascript hover issues

user_51717 0
Viewed 40495

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.

hover firebug css html javascript
15 Answers

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.

user_1258710

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)

user_1269980

In newer Firefox versions (at least v57 and above), the inspector's UI is slightly different than when the other answers were posted. To enable and freeze the :active/:hover/:focus state of an element, inspect it (right click -> Inspect element) and in the inspector click on:

enter image description here

Result:

enter image description here

Source (images are licensed under CC-BY-SA v2.5, The Mozilla Contributors)

user_362530

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.

user_2792930

I often make some alternate CSS or Javascript to "freeze" my hovered event; tweak it to perfection with Firebug and put my hover back in place.

user_2493550

I know this post is a bit old, but for those who find this on Google, I created a cross browser tool that allows you to visualize your HTML / CSS layout just by moving the mouse. You can easily view elements in their hover state.

HTML Box Visualizer - GitHub

user_2134740
Related