English | 简体中文
CSS-Diff is a DevTools sidebar extension for comparing the computed CSS of two DOM elements. It is built for frontend debugging: select two elements in the Elements panel, then inspect what changed, search for a property, and copy a CSS declaration with one click.
css-diff-demo.mp4
Browser DevTools is excellent at inspecting one element, but finding why two similar elements render differently can still mean switching back and forth between style panes. CSS-Diff puts both computed style results in one table, highlights the differences first, and keeps the workflow inside DevTools.
- DevTools Elements sidebar: adds a
CSS-Diffpane directly to the Elements panel. - Two-element comparison: select two DOM elements and compare their normalized computed CSS properties.
- Difference-first table: changed properties are shown by default, with a
Show alltoggle for the full computed style list. - Property search: filter CSS properties by name while reviewing the comparison.
- One-click copy: click a value cell to copy
property: value;. - Native page hover highlight: hover a source/target DOM line in the diff table to highlight that DOM node in the inspected page, and remove the highlight immediately when the pointer leaves.
- Cross-window/tab sync: selected element data is broadcast to other open windows/tabs, which helps compare page states side by side.
- Localized UI: includes English and Simplified Chinese browser i18n messages.
Warning
CSS-Diff is not currently available in a browser extension store.
Download the packaged zip from Releases, then install or load it manually from your browser's extensions page.
CSS-Diff requests Chrome's debugger permission so the diff table can use the Chrome DevTools Protocol Overlay.highlightNode and Overlay.hideHighlight commands. This is what makes DOM line hover highlighting appear and disappear immediately in the inspected page.
Chrome treats this permission as sensitive:
- Chrome may show a permission warning when the extension is installed or updated.
- Chrome may show a browser-level notice that CSS-Diff is debugging the current page while the extension is attached.
- CSS-Diff uses this permission only for temporary DOM hover highlighting from the DevTools sidebar.
- If the permission is denied, CSS comparison still works, but native hover highlighting in the inspected page is unavailable.
- Open the page you want to inspect.
- Open DevTools and switch to the Elements panel.
- Open the
CSS-Diffsidebar. - Select the first DOM element, then select the second DOM element.
- Review the highlighted differences, search for a property, or enable
Show all. - Hover a source/target DOM line in the diff table to highlight that DOM node in the inspected page.
- Click a left/right value cell to copy the CSS declaration.
- Click
Clear Selectionto start another comparison.
Install dependencies:
pnpm install --frozen-lockfileStart a development build:
pnpm devOther browser targets:
pnpm dev:firefox
pnpm dev:edgeBuild all supported targets:
pnpm buildBuild one target:
pnpm build:chrome
pnpm build:firefox
pnpm build:edgePackage extensions:
pnpm zipThis project uses Vitest for unit/component tests and Playwright for a built-panel smoke test.
pnpm test
pnpm test:coverage
pnpm test:e2epnpm testruns fast Vitest tests for pure CSS diff utilities, DOM style formatting, and the Vue DevTools panel shell.pnpm test:coveragegenerates local coverage output undercoverage/.pnpm test:e2ebuilds the Chrome extension first, then serves.output/chrome-mv3locally and verifies that the built DevTools panel renders.
- pnpm for package management
- WXT for browser extension development
- Vue 3 with TypeScript for the DevTools panel UI
- shadcn-vue style local components, Reka UI, and lucide-vue-next for UI primitives and icons
- Tailwind CSS v4 for styling and design tokens
vue-tsc, Vitest, and Playwright for type checking and verification- WXT/browser
i18nfor localized messages