测量网页元素的大小和间距的利器

一般而言，对于测量页面某个元素的大小，直接f12打开开发者工具inspect目标元素就好了，但如果要测量其他，如两个元素间的距离，是不是就没那么方便了？

这里安利一款chrome插件，better ruler，可以很方便的测量各种距离，更重要的是，它支持吸附到元素，再也不用眯着眼去量一两像素的差异了。

 

 

 

• 点击插件图标即可开始测量，再次点击将退出测量。
• 移动鼠标的同时按住Alt键(Option, 如果是mac)，可实时显示当前鼠标位置元素的大小。
• 移动鼠标的同时按住Alt键(Option, 如果是mac)，如果在吸附范围内(距离元素边界50px内，距离顶点15px内，具体数值可在底部工具栏自定义)可自动吸附。
• 按下f键，快速显示和隐藏底部工具栏。
• 按住shift键，切换显示和隐藏尺寸和关闭按钮。