真正生效的样式
没有被划掉的规则：字体、字号、字重、行高、颜色、背景、边框、圆角和阴影。
01
DevTools 不是为设计而生的
问题所在在 DevTools 里，想知道一个标题的字号，得先打开面板，在 DOM 树里找到元素，再翻过一长串被划掉的规则。想知道两个区块之间的距离，还得手动把边距加起来。
02
鼠标悬停时能看到什么
4 项盒模型
宽度、高度、外边距和内边距直接画在元素上。
间距
单击固定一个元素，再把鼠标移到另一个元素上：即可看到两者之间的像素距离。
标尺
按住 Alt 键，测量页面上的任意区域。
03
在本页直接试用
无需安装一个示例网站加上检查器面板，无需安装任何东西。鼠标悬停在元素上，或在列表中选择，即可看到它的样式、盒模型以及到下方元素的距离。
选择一个元素
Smart Design Inspector · CSSh1.hero-title
- 字体
- —
- 字号
- —
- 字重
- —
- 行高
- —
- 颜色
- —
- 背景
- —
- 边框
- —
- 圆角
- —
- 阴影
- —
- 尺寸
- —
- 外边距
- —
- 内边距
- —
到下方元素的距离
—
示例网站 · 数值读取自本页
| 免费€0永久 | Pro€49一次性付款 | |
|---|---|---|
| 悬停检查：计算后的 CSS、盒模型、外边距和内边距 | ||
| 复制任意元素的 CSS | ||
| 测量元素间距，附带标尺 | ||
| 将区块复制为 JSX + Tailwind 或 HTML/CSS | — | 抢先体验免费 |
| 导出设计系统 | — | 抢先体验免费 |
免费吗？
是的。检查元素、测量间距和标尺永久免费。
和 DevTools 有什么区别？
它只显示真正生效的样式，没有被划掉的规则，并把尺寸和间距直接画在页面上。调试 JavaScript 或网络请求，DevTools 仍然更合适。
所有网站都能用吗？
凡是能在 Chrome 中打开的页面都可以。浏览器内部页面和 Chrome 应用商店本身不允许扩展读取。
可以复制 CSS 吗？
可以，每个元素都能复制。如需把整个区块复制为 JSX + Tailwind 或 HTML/CSS，请使用 Pro 功能。
支持哪些浏览器和操作系统？
从 1.0 版起支持 Windows、Mac 和 Linux 上的 Chrome、Edge、Brave、Arc、Opera 和 Vivaldi。扩展由浏览器运行，而不是由操作系统运行，所以在各处表现一致。代码已为 Firefox 和 Safari 做好准备，无需重写。开发期间，内容可能会有变化。
候补名单
成为首批试用者
Smart Design Inspector 正在开发中。留下你的邮箱，它在 Chrome 网上应用店上线当天我们会通知你，并在抢先体验期间免费开放 7 项 Pro 功能。
发布当天一封邮件，之后很少打扰 · 一键退订