Toggle Element State with Google Chrome and Mozilla Firefox
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
The image above displays Chrome's "Toggle Element State" button, allowing developers to toggle CSS states via checkboxes.
Firefox's Firebug
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!
![6 Things You Didn’t Know About Firefox OS]()
Firefox OS is all over the tech news and for good reason: Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript. Firefox OS has been rapidly improving...
![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...
![Create a CSS Cube]()
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...
![HTML5 download Attribute]()
I tend to get caught up on the JavaScript side of the HTML5 revolution, and can you blame me? HTML5 gives us awesome "big" stuff like WebSockets, Web Workers, History, Storage and little helpers like the Element classList collection. There are, however, smaller features in...
Great tip, thanks =)
FireBug does this for years. Just click the little arrow next to the style tab. It’s only
:hoverand:active, though.Awesome, just added that as well.
The only thing Chrome cant do with states is when I need to debug an element that matches selector
parentElement:hover element, for exampleChrome applies states only to selected element in inspector and when you selected another element, selected state is applied to new element
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.
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
it’s also possible to do this with Firefox’ built in developer tools :-)