# devtools-highlighter

> Find and highlight elements on the page with this DevTools panel, using CSS styles and selectors.

Canonical page: [https://chrome-stats.com/d/devtools-highlighter](https://chrome-stats.com/d/devtools-highlighter)

## Overview

- **ID:** `devtools-highlighter`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** Patrick Brosset
- **Category:** web-development,other
- **Daily users:** 79
- **Rating:** 4.83 / 5 (6 ratings)
- **Version:** 1.2.1resigned1
- **Last updated:** 2024-04-25
- **First published:** 2017-12-07
- **Size:** 20 KB
- **Data as of:** 2026-09-06
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/devtools-highlighter/)
- **Website:** [https://github.com/captainbrosset/devtools-highlighter](https://github.com/captainbrosset/devtools-highlighter)

## Description

**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.

## Rankings

- #13,072 — Overall
- #25 — highlighter
- #139 — panel
- #154 — delight
- #172 — flight
- #187 — query

## Permissions and access

### Permissions

- `<all_urls>`

### Content script matches

- `<all_urls>`

## Safety

- **Risk impact:** Moderate risk impact
- **Risk likelihood:** Low risk likelihood

### Analysis details

- Allows access to all websites, posing a significant security risk as it can monitor and modify data from any visited site.
- This extension has low user count. Unpopular extensions may not be stable or safe.

> Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing).

## Similar extensions and apps

- [CSS Viewer](https://chrome-stats.com/d/inspectcssviewer) — 2 users
- [CSS Debug Overlay Plus](https://chrome-stats.com/d/css-debug-overlay-plus) — 1 users
- [HTML/CSS Extractor](https://chrome-stats.com/d/html-css-extractor) — 141 users, 3.00 / 5
- [Find elements diff](https://chrome-stats.com/d/find-elements-diff) — 3 users
- [Atomic CSS Devtools](https://chrome-stats.com/d/atomic-css-devtools) — 68 users
- [Simple CSS Viewer](https://chrome-stats.com/d/browser-css-viewer)
- [Gripper - DevTools for Designers](https://chrome-stats.com/d/gripper-devtools-for-designers) — 3 users
- [DevScope - Developer Diagnostics](https://chrome-stats.com/d/devscope) — 2 users
- [CSS Cleaner](https://chrome-stats.com/d/css-cleaner) — 4 users
- [KonvaJS Devtools](https://chrome-stats.com/d/konvajs-devtools) — 28 users
- [CSS Viewer](https://chrome-stats.com/d/css_viewer) — 19 users, 5.00 / 5
- [Gem DevTools](https://chrome-stats.com/d/gem-devtools) — 1 users, 5.00 / 5

---

Source: [Chrome-Stats](https://chrome-stats.com/d/devtools-highlighter)