How to Inspect CSS Pseudo Classes with Firebug

How can I see the styles attached to :hover and other pseudo classes in firebug and the chrome debugger

Inspect the element, and then:

For Firebug:

Note that the hover CSS code will disappear if you fly over the element again (you must recheck :hover).

For Chrome:

You can see both the psuedo-class rules and force them on elements.

To see them in the Styles pane click the small dotted box button in the top right.

To force an element into :hover state, right click it.

How do I inspect CSS pseudo classes with firebug?

It's pretty easy. Just select the element you want to inspect. And then, from the panel on the right side, click on the Style menu item. There you can select the pseudo class :hover

EDIT

Here's an image :

How can I inspect and tweak :before and :after pseudo-elements in-browser?

In Chrome's Dev tools, the styles of a pseudo-element are visible in the panel:

Otherwise, you can also input the following line in the JavaScript console, and inspect the returned CSSStyleDeclaration object:

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector

Inspect element with pseudo-class in IE

I've never found this in the native developer tools included with IE.

Firebug: How to inspect elements changing with mouse movements?

I think you can also do this :

• Choose Firebugs Inspect mode

• Hover over the item that pops up the element you wish to inspect and then use the Tab key several times to make Firebug active (I found it tricky to see when Firebug was the active component but nothing like trial and error - when I saw that Firefoxes Find Toolbar was active I'd then Shift + Tab backwards twice to get into Firebug.

• Then I'd use the L/R arrow keys to contract/expand elements and U/D arrow keys to navigate through Firebugs console

Worked for me anyway!

Inspecting Hover-state in Firebug or Chrome DevTools

Chrome Dev Tools has a built-in :hover state selector in the Elements > Styles panel. You can toggle other pseudo-classes (like :active) there as well.

Inspecting Hover-state in Firebug or Chrome DevTools

Chrome Dev Tools has a built-in :hover state selector in the Elements > Styles panel. You can toggle other pseudo-classes (like :active) there as well.

---

Related Topics