Chrome DevTools
ExtensionThe built-in inspector for editing styles live, with editors for grid, flexbox, colours, shadows, easing and container queries.
The developer tools built into Chrome. The Styles tab shows every rule that matches an element, including overridden ones, and Computed shows only what applies. You can edit declarations, toggle classes and force states like :hover.
It has visual editors for colours (including HD colours), shadows, easing curves, angles and grid alignment, and it shows cascade layers, @property, @scope, @supports and @position-try rules. It highlights invalid, overridden and inactive CSS.
Other tools include the Coverage tab for unused CSS, dark mode and print emulation, and copying CSS as declarations, rules or JavaScript.
Good for
- Find out why a declaration is overridden or has no effect
- Tweak colours, shadows and easing curves with visual editors
- Inspect cascade layer order and @property registrations
- Find unused CSS with the Coverage tab
gridcontainer querieslinear()
More extensions
See all →Web Developer extension
ExtensionA toolbar for Chrome, Firefox, Edge and Opera that can switch off styles, outline elements and show computed CSS.- Stars
- 846
- Last commit
- 2 years ago
- Licence
- GPL-3.0
Firefox Page Inspector
ExtensionFirefox's built-in inspector, known for its grid and subgrid overlays and its notes on why a CSS rule has no effect.- Price
- Free
- Made by
- Mozilla
- Kind
- Extension
