Screen Ruler

什么是 Screen Ruler？

Screen Ruler 是一款用于检查和测量网页的 Chrome 扩展。它帮助设计师和开发者直接在浏览器中检查元素尺寸、间距、选择器、计算后的 CSS、颜色、截图、可访问性对比度问题以及与 SEO 相关的元数据。

该扩展可通过工具栏图标、右键菜单或键盘快捷键启用。启用后，它会在页面上覆盖检查工具，用户可以悬停或点击元素来检查布局和页面元数据，无需离开网站。

主要功能

• 测量元素尺寸和间距：查看像素尺寸、外边距、内边距以及元素之间的距离。
• 检查元素身份：悬停或选中时显示标签名、ID 和类名。
• 查看并复制计算后的 CSS：在侧边栏中检查当前元素的计算样式，并将 CSS 复制到剪贴板。
• 使用标尺和取色器：放置水平和垂直参考线进行精确测量，并从页面任意位置取样颜色。
• 捕获选中内容：使用键盘快捷键截取所选元素的裁剪截图。
• 查看页面质量信号：检测 WCAG 对比度问题、常见 SEO 问题、meta 标签，以及 Facebook、X 和 LinkedIn 的社交预览数据。

如何使用 Screen Ruler

安装扩展后，可通过工具栏图标、右键菜单或快捷键 Alt/Option + Shift + R 将其开启。将鼠标悬停在元素上可检查其尺寸和元数据，或点击元素进行选中，并与附近内容进行比较。

在侧边栏中，你可以查看并复制计算后的 CSS，使用父/子元素选择快捷键，检查标尺和颜色，并访问截图、meta 标签和页面分析工具。该扩展还支持通过 Chrome 扩展设置自定义快捷键。

使用场景

• 在把工作交付给工程团队前，检查落地页或界面稿的间距与对齐。
• 在前端调试时，识别元素的准确 CSS 类、ID 和计算样式。
• 从设计参考或实时页面中取样颜色，以匹配视觉系统。
• 截取单个组件的裁剪截图，用于文档或故障报告。
• 在发布前检查页面是否缺少 SEO 元数据、是否存在多个 H1，或是否有对比度问题。

常见问题

Screen Ruler 可以在任何网站上使用吗？
列表说明它可用于任何网页。

这个扩展如何启动？
可通过扩展图标、右键菜单或键盘快捷键 Alt/Option + Shift + R 打开。

我可以从元素复制 CSS 吗？
可以。侧边栏包含计算后的 CSS 视图和一个“Copy CSS”按钮。

它是否包含除检查之外的更高级工具？
是的。列表还提到了截图、取色、可访问性检查、SEO 分析和社交预览检查。一些额外功能属于 PRO 版本。

替代方案

• 浏览器开发者工具：适合直接检查和调试，尤其是在使用 Chrome 内置面板而不是覆盖式扩展时。
• 其他浏览器检查扩展：类似工具可能更专注于测量、标尺、CSS 检查或取色。
• 设计交付与 QA 工具：当团队需要更广泛的视觉审查流程，而不是浏览器内元素检查时，这类工具更合适。
• 可访问性和 SEO 审计工具：如果主要目标是审计工作流，而不是实时页面检查，这些工具可能提供更深入的问题报告。