CompatLens bởi Faran Ali

CompatLens is a DevTools panel for Firefox and Chrome that watches the page you're inspecting and flags cross-browser compatibility risks in its HTML and CSS as you browse.

There's no scan button and no reload step. A MutationObserver in the page reports elements as they're added, and the panel keeps finding issues for as long as it stays open, which means it also works on single-page apps, where a route change never fires a full navigation for a one-shot scan to catch.

Every finding is checked against real browser-compat-data and web-features entries: 34 curated checks covering HTML features like <dialog>, inert and popover, and CSS features like @container, @layer, :has(), anchor-name, subgrid and modern color functions. Findings are ranked Breaks or Degrades from the catalog itself, never guessed, and support that's prefixed, flagged, partial or removed is marked unverified instead of silently passing.

A Modernise tab flags legacy vendor-prefixed CSS you can safely replace, only suggesting a replacement once the modern equivalent already passes on every browser you're targeting.

Pick from three targeting presets, or a custom age window, to match your actual audience, and export the full report as Markdown: every finding with its file and line, the browsers it fails on, and its fallback, ready to hand to a coding agent or drop into a PR description.

CompatLens runs entirely inside DevTools. There's no account, no backend and no analytics. Compatibility data is compiled into the extension at build time, and the only network requests are the page's own stylesheet fetches, which you can watch yourself in the Network panel.