English | 简体中文
CSS-Diff 是一个用于比较两个 DOM 元素计算后 CSS 的 DevTools 侧边栏扩展。它面向前端调试场景：在 Elements 面板中选择两个元素，即可查看哪些样式发生了变化、搜索指定属性，并一键复制 CSS 声明。
css-diff-demo.mp4
浏览器 DevTools 很适合检查单个元素，但当两个相似元素渲染结果不一致时，仍然经常需要在样式面板之间来回切换。CSS-Diff 会把两个元素的 computed style 放在同一张表中，优先展示差异，并让整个排查流程停留在 DevTools 内完成。
- DevTools Elements 侧边栏：在 Elements 面板中直接添加
CSS-Diff面板。 - 双元素比较：选择两个 DOM 元素后，比较它们标准化后的计算 CSS 属性。
- 差异优先展示：默认只展示有差异的属性，也可以通过
显示全部查看完整 computed style 列表。 - 属性搜索：按 CSS 属性名过滤对比结果。
- 一键复制：点击任意左右侧样式值单元格，即可复制
property: value;。 - 原生页面悬停高亮：在差异表格中悬停源/目标 DOM 行时，会在被检查页面中高亮对应 DOM 节点，鼠标移出后立即取消高亮。
- 跨窗口/标签页同步：选中的元素数据会同步广播到其他已打开的窗口/标签页，便于并排比较不同页面状态。
- 本地化界面：内置英文和简体中文浏览器 i18n 文案。
Warning
CSS-Diff 目前暂未上架浏览器扩展商店。
从 Releases 下载打包后的 zip 文件，然后在浏览器扩展程序页面中手动安装或加载。
CSS-Diff 会请求 Chrome 的 debugger 权限，用于通过 Chrome DevTools Protocol 的 Overlay.highlightNode 和 Overlay.hideHighlight 命令实现差异表格 DOM 行的页面高亮，并在鼠标移出时立即取消高亮。
Chrome 会把该权限视为敏感权限：
- 安装或更新扩展时，Chrome 可能显示权限警告。
- 扩展附加到当前页面时，Chrome 可能显示“正在调试此浏览器/页面”的提示。
- CSS-Diff 仅将该权限用于 DevTools 侧边栏中的临时 DOM 悬停高亮。
- 如果未授予该权限，CSS 对比功能仍可使用，但被检查页面中的原生悬停高亮不可用。
- 打开需要检查的页面。
- 打开 DevTools，并切换到 Elements 面板。
- 打开
CSS-Diff侧边栏。 - 先选择第一个 DOM 元素，再选择第二个 DOM 元素。
- 查看高亮的样式差异、搜索属性，或启用
显示全部。 - 在差异表格中悬停源/目标 DOM 行，在被检查页面中高亮对应 DOM 节点。
- 点击左侧或右侧的样式值单元格，复制对应 CSS 声明。
- 点击
清除选择开始新的比较。
安装依赖：
pnpm install --frozen-lockfile启动开发构建：
pnpm dev其他浏览器目标：
pnpm dev:firefox
pnpm dev:edge构建全部支持目标：
pnpm build构建单个目标：
pnpm build:chrome
pnpm build:firefox
pnpm build:edge打包扩展：
pnpm zip本项目使用 Vitest 进行单元/组件测试，并使用 Playwright 对构建后的面板做冒烟测试。
pnpm test
pnpm test:coverage
pnpm test:e2epnpm test会运行快速 Vitest 测试，覆盖 CSS diff 纯工具、DOM 样式格式化和 Vue DevTools 面板外壳。pnpm test:coverage会在本地coverage/目录下生成覆盖率报告。pnpm test:e2e会先构建 Chrome 扩展，然后在本地服务.output/chrome-mv3并验证构建后的 DevTools 面板可以正常渲染。
- pnpm 用于包管理
- WXT 用于浏览器扩展开发
- Vue 3 搭配 TypeScript 用于 DevTools 面板 UI
- shadcn-vue 风格的本地组件、Reka UI 和 lucide-vue-next 用于 UI 基础组件与图标
- Tailwind CSS v4 用于样式和设计 token
vue-tsc、Vitest 和 Playwright 用于类型检查与验证- WXT/browser
i18n用于本地化文案