devtools-highlighter

devtools-highlighter is a powerful Chrome extension designed to enhance your web development workflow by simplifying the process of finding and highlighting elements on a webpage. It integrates seamlessly with the DevTools panel, allowing developers to search for elements either through computed CSS style queries or traditional CSS selectors.

With computed style queries, you can pinpoint elements based on their actual rendered CSS properties—for instance, locating all elements displayed as grids with display:grid or filtering elements with negation or substring operators like display:!block or display:~flex. This feature supports descendant queries, enabling complex searches such as elements with align-self:start nested inside display:flex containers.

Alternatively, using CSS selector queries offers a familiar method to retrieve and highlight elements matching any valid CSS selector. Results are interactively presented within the panel, highlighting all matches on the page, allowing you to hover over results to focus on individual elements, scroll directly to them, or select them in the inspector panel for further inspection.

This extension accelerates debugging and style refinement tasks by providing intuitive, flexible, and dynamic element searching capabilities within Chrome DevTools.