做前端、UI 或运营的同学，经常遇到一个需求：想量一量页面上某个按钮的宽高、图片的边距，但手边没有尺子，又不能截图去 PS 里拉线。最怕的是那些设计稿还原度要求高的项目，几个像素的偏差就能让页面“看起来不对”。最近我挖到了 Simple Ruler Beta 这个插件，专门解决这类痛点——而且它标榜自己是 Beta 版，但我用下来感觉完成度已经非常高。

一、上手体验：点两下就出数据

安装后，插件图标很简洁，就是一个直尺的样式。点击它，网页会进入一种“测量模式”：鼠标变成十字准星，点一下你想测量的起始位置（比如某个模块的左上角），然后拖拽到结束位置，再点一下——宽度和高度会立刻浮现在你拖拽出的矩形上方，单位是像素。整个过程没有任何多余弹窗，不需要右键，不需要切换标签页。

对比同类插件，Page Ruler 虽然功能更复杂，但操作路径稍微长一些；而 MeasureIt 老版本已停止维护。Simple Ruler Beta 在轻量级上做到了极致：连设置面板都藏在二级菜单里，默认情况下你只管“点–拉–放”三步走。对于频繁需要测量 UI 元素的开发者来说，这种不打断工作流的设计比什么都重要。

二、自定义选项：颜色与背景的控制

在 Options 标签页里，你可以调整两个颜色：背景遮罩色和选中区域高亮色。默认是半透明灰色遮罩 + 绿色高亮。如果你测量的页面本身就是绿色调，可以改成蓝色或红色来增强对比。这个设计很贴心——很多插件的遮罩颜色固定，遇到浅色页面就几乎看不清边界。

三、适合谁用？

  • 前端开发者：写 CSS 时确认 padding、margin，或者验证设计稿尺寸是否精确还原。
  • UI/UX 设计师：评审 UI 时直接在浏览器里比对元素间距。
  • 运营或产品：快速检查广告位、Banner 的尺寸是否符合投放规范。
  • QA 测试：测量页面异常区域的宽度，便于在 Bug 单里精确描述。

四、不足与改进空间

因为是 Beta 版，功能相对单一：不支持角度测量、没有标尺辅助线、也不能导出测量截图。如果你需要更专业的标尺工具，比如画出永久的参考线，可以配合 VisBug 或 Dimensions 一起使用。但对于 90% 的日常“我就想看一眼这个框多大”的场景，Simple Ruler Beta 已经足够了。

总之，这是一款 快速、轻巧、零学习成本 的测量扩展。下载量虽然不高，但用户评价集中在“简洁好用”上。如果你受够了那些功能臃肿的同类工具，不妨试试它。