Debug pseudo-classes in Firefox DevTools

Posted on: by

Tags: devtools firefox mozilla

One of the new features in Firefox DevTools is the ability to debug CSS pseudo-classes straight from the Inspector. This includes :hover, :focus and :active.

There is a new icon lodged neatly in the top right corner of the CSS pane of the DOM Inspector. Clicking it will toggle the pseudo classes. This makes debugging these pseudo classes a breeze. :-)