操作指南 · 测量
屏幕标尺 Chrome 扩展:以像素测量任意网页
简短回答
安装 Screen Ruler,在要测量的标签页上点击图标,用数字键 1–4 在拖拽测量、元素测量、参考线和取色放大镜之间切换。它安装时不要任何站点访问权——覆盖层只在你调用的页面上运行,按 Esc 即可移除。
- 1
安装 Screen Ruler 并固定到工具栏。
- 2
打开要测量的页面,点击图标——覆盖层只出现在那个标签页上。
- 3
拖拽测量一块区域,或按 2 悬停元素读取尺寸和间距。
- 4
问题变了就按 3 切参考线、按 4 切取色放大镜。
- 5
用方向键微调当前测量,做到像素级精确。
- 6
按 Esc 彻底移除覆盖层。
搜“屏幕标尺扩展”会搜出一堆覆盖层工具,其中不少为了画一个矩形,就要求“读取并更改你在所有网站上的所有数据”。这笔交易并不必要。Screen Ruler 是一整套测量工具,安装时却完全不要站点访问权:点击图标之前什么都不运行,点击之后也只在那个标签页上。
一层覆盖层,四种模式
点击图标,当前页面上出现一层测量层。数字键 1–4 切换模式:拖拽测量在任意两点之间拉出一个框,读出宽 × 高;元素测量悬停读取元素盒,还能锁定两个元素读出它们之间的间距;参考线把笔直的基准线钉在页面上;取色放大镜放大到像素级,复制十字准星下的色值。四个模式加起来,足以回答大多数“那是多少像素?”的问题,不用打开 DevTools。
为键盘而生
测量框和参考线不是只能拖:方向键把当前对象每次移动 1px,按住 Shift 则是 10px,让你精确落在想要的那个像素上。Esc 彻底退出覆盖层。如果你几乎总是从同一个模式开始,设置页可以指定启动时的默认模式。
它从不索要什么
Screen Ruler 没有任何 host 权限——覆盖层在你点击图标时经 Chrome 的 activeTab 授权注入,所以没有 content script 蹲守在你访问的网站上。它不发任何网络请求,不带任何分析统计,也从不修改页面:一切都画在扩展自己的图层上,关掉后不留痕迹。它免费,无账户,也没有付费版。
它做不到的事
两条诚实的边界。浏览器不允许扩展在内部页面上运行——设置界面、Web Store、空白新标签页——所以 Screen Ruler 会直接告诉你某个页面无法测量,而不是假装可以。另外它测的是渲染后的像素:如果你要的是写在源码里的 CSS——margin 原本写的值、当前命中的断点——DevTools 才是对的工具。标尺验证浏览器画出了什么;DevTools 解释为什么。
Chrome 和 Edge
同一个构建可以从各自的商店装到 Chrome 和 Edge 上,混用两种浏览器的团队也能统一到一个工具、一套快捷键。