Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Toggle Element State with Google Chrome and Mozilla Firefox

By  on  

It's much easier to debug CSS than JavaScript since there are many fewer interactions in CSS, and they are much easier emulate. Still, element state debugging isn't simple...until now. Google Chrome's WebInspector and Mozilla Firefox's Firebug have a really sweet feature I just discovered which allows the developer to apply element states for the sake of debugging.

Chrome's WebInspector

Chrome CSS Element State

The image above displays Chrome's "Toggle Element State" button, allowing developers to toggle CSS states via checkboxes.

Firefox's Firebug

Firefox CSS Element State

The image displays Firebug's likewise menu, triggered by the down arrow on the CSS tab for an element.

This allows active CSS state bugging vs. simple CSS explorations to be much, much easier. Happy CSS debugging!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

Discussion

  1. Bruno Seixas

    Great tip, thanks =)

  2. xMartin

    FireBug does this for years. Just click the little arrow next to the style tab. It’s only :hover and :active, though.

  3. Hott Dogg

    The only thing Chrome cant do with states is when I need to debug an element that matches selector parentElement:hover element, for example
    Chrome applies states only to selected element in inspector and when you selected another element, selected state is applied to new element

  4. Jamy Golden

    Next challenge: Debug pseudo elements with web inspector :p

    • lord xeon

      the Chrome web inspector already supports pseudo elements.

      Under the Matched CSS rules is a Psuedo element
      I believe the latest version of firebug does similar, but I’m not sure as I haven’t used it in ages

    • Jan Beck

      Unfortunately you can not select the pseudo element like any other DOM-Element. Technically this is perfectly valid since pseudo-elements are not part of the DOM but I often miss that feature. Pseudo-elements are harder to debug than necessary.

  5. Greg Babula

    Good stuff, from what I know this has been around for a while already.

    @JAN BECK – not that hard really, you just have to select the main element and scroll down in the inspector panel to see the psuedo elements

  6. Daniel

    it’s also possible to do this with Firefox’ built in developer tools :-)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!