检查元素：查看并复制任意元素的 CSS 值
一款检查元素工具，可查看网站上任意元素的 CSS。读取字体、颜色、间距和盒模型，然后将 CSS 值复制到剪贴板。
更新于
Ag
- Ink
- Amber
- Paper
为了查看某一个元素的 CSS，你打开开发者工具的“元素”面板，结果迎面而来的是一大堆规则。CSS 检查元素工具则正好相反：你指向元素，SuperchargeInspect 就会显示你真正关心的样式，包括字体、颜色和间距。看完之后，点击任意值即可复制。SuperchargeInspect 是一款 CSS 查看器扩展，直接在当前页面上使用，无需打开开发者工具。
检查元素能看到哪些 CSS 信息
面板将所有信息分为三个部分：排版、颜色和盒模型。
排版。字体系列是声明的 font-family 字体栈。面板显示列表中的第一个字体，复制时则会复制完整的字体栈。这是页面所请求的字体，并不会检查实际渲染的是哪种字体。面板还会显示字号、字重和行高。
颜色。你可以看到文字颜色、背景颜色，以及存在边框时的边框颜色。不透明的颜色以十六进制显示。部分透明的颜色显示为原始的 rgba() 值，完全透明的颜色显示为 transparent。
盒模型。内边距和外边距会显示四个方向的数值。面板会列出 gap、border-radius 和 display。盒模型示意图展示内容周围的外边距、边框和内边距各层，并以 CSS 像素标注内容的宽度和高度。
如何复制 CSS 值
CSS 值可以逐个复制。面板中的每个值都是一个按钮。点击后，该值就会被复制到剪贴板，你可以只粘贴 padding-top，或者只粘贴文字颜色。
如果想要全部样式，请使用“更多复制方式”菜单中的“仅复制文本”。它包含该元素观察到的全部样式：字体系列、字号、颜色、布局、gap、各方向的内边距和外边距，以及圆角。
这些是页面为该元素解析出的计算值，字体系列仍为声明的字体栈。复制内容不会还原作者的源规则、组件定义或原始样式表。它是你所见内容的快照，而不是网站编写的代码。
开发者工具还是 CSS 查看器？
需要修改规则时，Chrome 开发者工具是合适的选择。你可以在其中编辑样式表、追踪层叠关系，并弄清楚为什么某个值会覆盖另一个值。
CSS 查看器解决的是一个更小的问题。它用于读取和复制，而不是改写网站的规则。你无需开发者工具就能查看 CSS：指向想要的元素，取用你需要的值即可。下表对两者进行了对比。
| Chrome 开发者工具“元素”面板 | SuperchargeInspect | |
|---|---|---|
| 样式显示位置 | 按层叠顺序列出所有规则 | 该元素的计算样式 |
| 复制单个值 | 在计算样式列表中找到后手动复制 | 点击该值即可复制 |
| 字体系列 | 在计算样式列表中 | 声明的 font-family 字体栈 |
| 如何开始 | 打开开发者工具，然后在节点树中找到该节点 | 按 Alt+Shift+E，然后指向元素 |
用开发者工具编辑和调试网站自身的规则；用 CSS 查看器读取单个元素，并将其样式传给其他工具。
键盘导航
整个流程无需使用鼠标即可完成。按 Alt+Shift+E 开始。方向键可移动到上一个或下一个元素。按 Ctrl+Up 或 Ctrl+Down 可移动到父元素或子元素。在 macOS 上，请使用 Option+Up 和 Option+Down。
按 Enter 锁定当前元素。再按一次 Enter 可添加备注，然后按 Ctrl+Enter（macOS 上为 Cmd+Enter）执行“复制引用”。按 Esc 返回选取状态或关闭面板。随时按 ? 可打开快捷键列表，查看所有快捷键。
所有数据都保留在你的设备上
SuperchargeInspect 完全在本地运行。它不发起任何网络请求，也不会向任何地方发送数据。无需账号，也不会在后台收集任何数据。
你检查的样式永远不会离开你的设备。唯一可能离开设备的，是你主动保存的文件，或你粘贴到其他应用中的值。关闭浏览器后，它记住的最后一个元素也会被清除。
准备交给编程工具了吗？向 AI 编程工具准确指出要修改哪个元素。