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!

Recent Features

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    Disable Autocomplete, Autocapitalize, and Autocorrect

    Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features.  Unfortunately these features can sometimes get in the way;  we don't always want or need the help they provide.  Luckily most browsers allow...

  • By
    Introducing MooTools ScrollSpy

    I've been excited to release this plugin for a long time. MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific...

Discussion

  1. Bruno Seixas

    Great tip, thanks =)

  2. 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. Next challenge: Debug pseudo elements with web inspector :p

    • 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

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