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(例如侧面板和离屏)。如果安装有任何问题,请将浏览器更新到最新版本并重试。