Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
Highlight the effect of individual CSS properties on hover
How do certain CSS properties apply to the page isn't always an easy question to answer.
While some properties might be considered simple, others have complex effects that depend on other factors. Properties like
gap depend on writing and layout direction for example.
Edge and Chrome help with this by highlighting the effect that individual CSS properties have in the page. This doesn't work with all properties, but does work with
- Find one of the above properties in the Styles panel.
- Move your mouse cursor over it.
- Watch as the corresponding affected region of the element gets highlighted in the page.