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. :-)