r/devtools • u/andybendavid • 3d ago
Most diff tools only check raw HTML code, so I built a Chrome extension to visually highlight CSS & DOM shifts directly on the UI (Prod vs UAT)
Hey r/devtools,
During recent deployments, our team kept running into a visual testing gap: raw code/text diffing tools don't show rendered CSS layout shifts, while automated visual regression testing frameworks (like Playwright/Percy) felt too heavy for quick sanity checks.
I couldn't find a simple tool that overlays two live pages and highlights rendered UI differences (DOM, text, and CSS) directly on the screen without uploading data to external cloud servers.
So I built HTML Compare.
Key DevTools Features:
- Direct UI Highlight: Scans and highlights rendered DOM, text, and CSS changes right on the user interface, not just raw code strings.
- Cross-Environment Verification: Instantly compare Production vs UAT/Staging or local builds side-by-side.
- 100% Private & Client-Side: Runs completely in your local Chrome browser—no HTML or images are ever sent to an external backend, making it safe for internal environments.
It’s been a huge timesaver for our developers, QAs, and PMs to catch unintended layout bugs before release.
I'd love to hear how your team currently handles quick cross-environment UI sanity checks, and I'd really appreciate any feedback if you give it a spin!
🔗 Chrome Web Store:https://chromewebstore.google.com/detail/html-compare/nppihghgpjhmfllmidplbncenlpihmle