网页元素间距测量（better rule插件的使用）

　　我们在测试UI界面的时候，需要测量各元素大小及元素之间的距离。元素大小，使用F12可以简易的得到数据，但是元素的间距相对来说会比较复杂。这里推荐一款chrome插件better rule，帮助大家测量元素之间的距离。

　　1.下载安装

https://download.csdn.net/download/weixin_44700435/87513361

　　下载 Better Ruler  的 crx 文件后，打开 Chrome 的扩展程序页面（chrome:extensions 或通过 Chrome 菜单图标 > 更多工具 > 扩展程序找到），然后将 .crx 文件拖放到扩展程序页面进行安装它。

2.使用方法

• 点击插件图标即可开始测量，再次点击将退出测量
• 移动鼠标的同时按住`Alt`键(`Option`, 如果是mac)，可实时显示当前鼠标位置元素的大小。
• 移动鼠标的同时按住`Alt`键(`Option`, 如果是mac)，如果在吸附范围内(距离元素边界50px内，距离顶点15px内，具体数值可在底部工具栏自定义)可自动吸附。
• 按下`f`键(可在工具栏配置），显示和隐藏底部工具栏。- 如果被元素尺寸挡住，可以按住`shift`键，暂时隐藏元素尺寸和关闭按钮。
• 点击过插件图标一次之后，可以通过双击快捷键来激活和关闭插件, 默认为`z`。
• 页面刷新后该快捷键失效，需要重新点击插件图标启用。如果快捷键无效，请点击页面空白处再尝试。

　　3.使用效果

 

　　4.针对于H5模式，可以使用chrome自带的工具

效果如下