做前端开发或UI设计时，经常需要核对页面上两个元素之间的间距——是padding还是margin？是否严格对齐？这时候如果手动截图再扔进PS里量，效率实在太低了。Measure Everything 就是解决这个痛点的轻量级插件：点击一个元素，再悬停到另一个元素上，它会瞬间显示两者之间的水平和垂直距离，精确到像素。

为什么推荐它

同类工具里，Page Ruler 需要拖拽选框来测量，遇到复杂布局时很难对准。而 Measure Everything 直接基于 DOM 节点，你点一下 A，鼠标滑到 B，所有距离数据（包括上、下、左、右、宽、高）自动浮现在屏幕上。尤其适合检查 flex 或 grid 布局下的动态间距，不用再反复打开 DevTools。

用法超简单

  • 安装后点击工具栏图标，或按快捷键 Alt+Shift+M 激活
  • 点击任意一个元素作为参考点
  • 鼠标移到其他元素上，实时显示距离
  • 再次点击或按 Esc 退出测量

建议将图标固定在浏览器右上角，两三步就能完成一次精准测量。对于经常写 CSS 还原设计稿的开发者，这个插件能帮你减少至少 30% 的猜测时间。

对比其他插件

除了 Page Ruler 需要拖拽外，Dimensions 虽然也能显示盒子模型，但测量依赖元素自身信息，无法跨区域测距。Measure Everything 的优势在于“点对点”模式，无需记住坐标，特别适合对比两个不相邻的元素。不过它只支持 Chrome 和基于 Chromium 的浏览器，Firefox 用户暂时需要找替代品。

如果你正在做响应式调试，或者需要跟设计师确认间距是否一致，装上这个插件会发现自己省了很多折腾。