/dev tips

(197) Clear Site Data Service Worker Debugging (199)

Chrome DevTools: See affected nodes and matching selectors with long hover

25th April 2019
See affected nodes and matching selectors with long hover

In the Styles Pane within the Elements Panel, you can long-hover a CSS property to highlight all nodes which are affected by that a property. This applies for CSS properties which affects an elements box model, such as margin or padding.

💡️   As a bonus tip, if you long-hover a CSS selector within the Styles Pane, all elements matching that selector are highlighted on the page.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.