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.

Terrible moment when you move your cursor towards the text in the firebug but it vanishes. — , Dec 28 '12 at 21:42
Go to sources tab -> Hover on anything -> Press F8 - it will "freeze" your screen so that you can see what all happened in DOM when you hovered — Abhinav Singi, Sep 15 '15 at 08:34

score 44 · Answer 1 · answered Apr 21 '10 at 19:51

44

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.

answered Apr 21 '10 at 19:51

Neum

648
1
5
7

8

Great tip! However, it's not buggy (at least not in the latest version of Firebug). The dropdown arrow on the "style" css tab is always there. Just select the :hover state and you're all set. – Cory House Aug 18 '10 at 03:00
8

the problem is sometimes these styles are not in the CSS, they are dynamically applied by javascript – Adam Burley Oct 16 '11 at 18:58
4

this, sadly, doesn't work with the javascript DOM changes caused by a hover effect. I know i'm two years late with this, but i'm having the exact same issue. For example i can't inspect an element that only exists during the hover-state (created on mouse-over, destroyed on mouse-leave). – ProblemsOfSumit Mar 14 '13 at 09:49

score 32 · Answer 2 · answered Dec 13 '12 at 07:36

32

When inspecting links, Firebug shows the default CSS state, i.e. styles applied to a:link. By default, the :hover and :active styles are not shown. Fortunately, you can change the state of the link by clicking Style and choosing the appropriate option:

enter image description here

answered Dec 13 '12 at 07:36

Subodh Ghulaxe

18,333
14
83
102

1

I found the equivalent feature in Chrome and I never knew about this feature before. Seriously, this is like mind blowing and groundbreaking for me. – kand Aug 16 '13 at 14:43
2

Note that Firefox now has a new icon you can click; three partially overlaid boxes in the top right of the style window. – TylerH Nov 23 '15 at 22:35
But this does not solve the posters question when a class is added by Javascript. As soon as you move away the class is removed and this hover class is what you need to inspect, not the pseudo element. Still a very useful bit of knowledge though :) – Eoin Jan 26 '17 at 14:16

Matt Bridges · Accepted Answer · 2009-07-03T21:13:46.260

23

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.

edited Jul 03 '09 at 21:13

answered Jul 03 '09 at 21:08

Matt Bridges

48,277
7
47
61

1

That is nice, and your mention of "info" made me look at the Firebug console API for the first time, and I found there's also "console.dir" (DOM properties dump) and "console.dirxml" (HTML source tree dump.) Sadly, it doesn't address the issue of showing exactly what CSS rules are being applied like the live view can, but perhaps I hope for too much. – Jason C Jul 03 '09 at 21:23
2

I find Neum's approach simpler and more useful. – Cory House Aug 18 '10 at 03:04
2

Yes, me too -- but at the time of the original question & answer this feature didn't exist in firebug :) – Matt Bridges Apr 11 '11 at 19:37
Where should this be added? In the console somewhere? – Eoin Jan 26 '17 at 14:18

score 19 · Answer 4 · edited Jan 27 '12 at 19:43

19

In firebug, while in the HTML view, look to the right-side panel and find the "Styles" tab. Click the down arrow and select :hover.

edited Jan 27 '12 at 19:43

Costique

23,712
4
76
79

answered Nov 15 '11 at 15:55

kelly johnson

1,596
3
16
26

score 5 · Answer 5 · answered Jul 16 '14 at 07:44

5

In Chrome (version 35):

Inspect element
Inside the elements viewer right click on the element .
Select "Force element state" -> :active, :hover, :focus, :visited

answered Jul 16 '14 at 07:44

xonya

2,146
29
37

Maximilian Köhler · Answer 6 · 2015-12-08T22:08:24.787

5

In Firefox (v33.1.1):

Inspect element (Q)
In the DOM view right click the element
select :hover, :active or :focus at the bottom of the context menu

edited Dec 08 '15 at 22:08

answered Dec 01 '14 at 02:11

Maximilian Köhler

401
4
11

score 3 · Answer 7 · answered May 30 '13 at 19:48

Some JavaScript toolkits, such as Dojo use CSS classes such as dijitButtonHover to style rather than :hover.

So the Style tab :hover trick doesn't work.

Instead, you can right-click the Node (who's CSS classes change) in the HTML tab, and "Break on Attribute Change"

score 2 · Answer 8 · answered Jul 03 '09 at 22:35

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.

inherited css from files on any moused-over element, use shift-ctrl-y
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)

score 2 · Answer 9 · edited Mar 13 '12 at 15:48

2

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.

edited Mar 13 '12 at 15:48

TryTryAgain

7,632
11
46
82

answered Oct 14 '10 at 00:40

ramoneguru

331
2
9

WOW, I'm golden glittered all over! :-) – Marcel Dec 10 '12 at 20:31

score 2 · Answer 10 · answered Oct 16 '18 at 22:41

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:

Result:

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

score 1 · Answer 11 · answered Feb 23 '10 at 09:19

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.

score 1 · Answer 12 · answered Jun 03 '10 at 05:03

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

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

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.
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.

score 0 · Answer 13 · edited Sep 28 '12 at 10:08

0

Yes, you can right-click "Inspect element" when triggering the hover state. This worked for me in Firebug and WebKit.

edited Sep 28 '12 at 10:08

ЯegDwight

24,821
10
45
52

answered Sep 27 '12 at 15:39

user1703862

31
2

score 0 · Answer 14 · answered Oct 24 '16 at 05:22

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

score 0 · Answer 15 · answered Jan 21 '11 at 21:07

0

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.

answered Jan 21 '11 at 21:07

Ecropolis

2,005
2
22
27

How to debug CSS/Javascript hover issues

15 Answers15

Linked

Related