Screen Ruler - Measure The Web在浏览器中使用的扩展工具，这款工具支持将鼠标悬停在任何元素上即可查看尺寸、边距、填充、标签名称、ID 和类等，欢迎需要的朋友下载使用。
介绍
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”自定义键盘快捷键。
更多功能
1. 元素检查：将鼠标移到元素上时查看元素的属性。包括有关元素位置、大小、渲染字体、颜色等的信息。
2. 布局网格：在站点顶部叠加布局网格以验证设计的对齐情况。
3. 通过单击屏幕截图控件或使用“Ctrl/Command + Shift + S”键盘快捷键来捕获当前突出显示区域的屏幕截图。非常适合文档或附加到 Github 票证。
4. 在浏览器侧面板中查看高级属性，包括元素框模型、选择颜色、资源等。
插件安装说明
1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点，在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装
5、安装好后即可使用
扫码关注公众号，发【识别码】获取
