网页元素像素测量:如何量出页面上任何东西的尺寸

想知道“那个东西是多少像素”,常规做法要么截图贴进图像编辑器,要么绕道 DevTools 的盒模型。都能用,但对一个两秒钟的问题来说都太重了。Screen Ruler 直接在你正看着的页面上放一层测量覆盖层——点图标,然后拖拽或悬停,就能读出像素尺寸。

拖拽测量任何可见内容

拖拽模式在任意两点之间画一个框,实时显示宽高。因为它测的是渲染后的页面而不是 DOM,所以检查器选不干净的东西它都能量:canvas 内部的一块区域、图片的一部分、两个不相干组件之间的间隙、一张嵌入的地图。

悬停元素获取精确尺寸

元素模式会吸附到光标下的元素,读出它的渲染尺寸——浏览器实际画出来的大小,而不是样式表里写的、还没经过 padding 和缩放处理的宽度。“这个头像真的是 48px 吗?”一次悬停就有答案,不用 inspect 之后再在计算样式里翻找。

放置参考线做重复检查

参考线是你放在页面上的持久横线和竖线。把一条钉在你关心的边缘上,再拿其他元素跟它比——当一个参考位置要贯穿整个区块,或者同一个偏移要在五个地方检查、你不想重新拖五次时,特别好用。

顺手取个色

第四个模式是取色放大镜:悬停任意像素即可读出色值。量一个组件和抄它的确切背景色往往是一口气要做完的两件事,所以覆盖层把两件都做了。

Esc 移除,无人在看

Screen Ruler 没有 host 权限,也没有在你访问的每个网站上蹲守的 content script。覆盖层只在你点击图标时经 activeTab 注入,按 Esc 就彻底移除;测量值和取到的颜色都留在你的机器上——这个扩展不发任何网络请求。

什么时候仍然该用 DevTools

Screen Ruler 测的是渲染结果。如果你要的是写出来的 CSS——margin 原本写的值、命中的是哪个断点、盒子为什么变成这个尺寸——请打开 DevTools,那正是它的用途。两者回答的问题不同:DevTools 解释布局,标尺验证布局。想快速知道屏幕上某个东西究竟多大,标尺是更短的那条路。