Screen Ruler: Measure The Web

简介:

测量任何网页上任何元素的尺寸、距离、边距和填充。

Screen Ruler 是想要验证其网站实施情况的 Web 开发人员和设计人员的完美伴侣。激活后，屏幕标尺允许您只需将鼠标悬停在任何元素上即可查看尺寸、边距、填充、标签名称、ID 和类。您还可以选择一个元素来测量到其他元素的距离。

用法

- 通过单击扩展图标、从右键单击上下文菜单中选择“屏幕标尺”或使用快捷键“Alt/Option + Shift + R”来切换屏幕标尺。
- 将鼠标悬停在网页上的元素上可显示其大小、边距、填充、标签名称、ID 和类。
- 直接单击一个元素来选择它，这将使突出显示为红色。要取消选择，请再次单击，按 Esc 键或选择其他元素。
- 要选择元素的父元素，请使用“Alt/Option + Up”，将您的选择移动到父元素，然后使用“Alt/Option + Down”反转您的选择。
- 打开侧面板可查看当前所选元素的计算 CSS。单击“复制 CSS”按钮将当前所选项目的计算 CSS 复制到剪贴板。

特征

- 测量任何元素的像素大小。
- 测量任意两个元素之间的像素距离。
- HTML 标签名称、类名称和 ID。
- 父/子选择快捷方式。
- 响应式选择会随着浏览器窗口的大小而调整。
- 从上下文菜单访问。
- 计算 CSS 检查。
- 将 CSS 复制到剪贴板。
- 适用于任何网页。
- 通过访问“chrome://extensions/shortcuts”自定义键盘快捷键。

屏幕尺 PRO

Screen Ruler 还提供 PRO 层，可解锁更多功能。

1. 元素检查：将鼠标移到元素上时查看元素的属性。包括有关元素位置、大小、渲染字体、颜色等的信息。
2. 布局网格：在站点顶部叠加布局网格以验证设计的对齐情况。
3. 通过单击屏幕截图控件或使用“Ctrl/Command + Shift + S”键盘快捷键来捕获当前突出显示区域的屏幕截图。非常适合文档或附加到 Github 票证。

Screen Ruler PRO 需要一次性付款才能终身使用。要升级到 PRO，请单击上下文菜单中的“升级到 PRO”或右键单击扩展图标以获取升级选项。

屏幕尺的用途

- 开发人员：发现布局问题或识别对齐问题。无论您是调整边距和填充，还是只是确保一切正确排列，Screen Ruler 都会成为您开发工具包中不可或缺的补充。
- 设计师：确保您的设计以像素完美的精度实现。屏幕标尺充当设计和开发之间的桥梁，允许您检查每个元素是否完全按照您的预期对齐。

安装

- 屏幕标尺专为 Google Chrome 116+ 中的稳定性而设计。
- Screen Ruler 可安装在任何 Chromium 浏览器上，但为了获得最佳体验，请确保您的浏览器支持所有必需的 API（例如侧面板和离屏）。如果安装有任何问题，请将浏览器更新到最新版本并重试。