我的“手里尺子”：Page Ruler Redux 用完就回不去

今天要聊的，是浏览器插件里的“手里尺子”——Page Ruler Redux。

我以前改页面尺寸都拿 DevTools 量，觉得还行吧…结果装了这个，一拖一拉就把宽高、位置、边距统统摊开给你看。我愣了两秒——

这也太省事了吧？！

页面标注直接“现打现吃”，脑子里的像素强迫症被当场治好一半。

1）为啥我开始用它？

说白了，被“像素不齐”逼的。你也懂，做落地页/写样式的时候，总觉得标题和图的间距“差一点”，是12px还是14px？手机预览还不稳，肉眼瞪半天。朋友丢给我 Page Ruler Redux，我拖了一条框，数值就弹出来：宽、高、X、Y，一清二楚。还有元素模式，鼠标一指，直接吸到那个块上，根本不用猜。

2）怎么玩？比我想的还顺手

去

Chrome 网上应用商店

搜“Page Ruler Redux”，装上，点工具栏那个小尺子就开工。核心就两招：

• 画框量尺：在页面上拖一个矩形，立刻显示宽高、到页面左/上的距离。拖拽四角还能微调，想抠多细抠多细。
• 元素选择：切到“元素”（有的版本叫 Element/Inspect）模式，鼠标悬停就高亮块级/内联块，点一下自动贴边，尺寸、位置、（有些页面还会看到内外边距）直接给你。

几个小动作特别上瘾：框可以跟着页面滚、可以复制数值（直接点面板里的数值会复制到剪贴板），还支持键盘微调（箭头键那种，小步/大步一般都有，自己试一下就懂）。反正就是——不用进 DevTools 的“盒模型”也能把活干了。

3）我踩过的坑

别以为它无敌，我也翻过车，给你避个雷：

• 页面缩放：浏览器缩放不是 100% 时，你看到的“视觉像素”和 CSS 像素不一致。Page Ruler 量的是 CSS 像素。记得先恢复 100%，不然你回到代码里改 12px，落地就“玄学”。
• 复杂布局：有的站满屏 sticky/fixed，顶部悬浮条会挡住你画框的起点，切元素模式更好用，或者先“关闭悬浮条”（很多站能叉掉）。
• 子像素/四舍五入：flex/grid 里有时候会出现 33.33% 那种尺寸，显示会有 1px 的“跳”，别跟自己过不去，规范在代码里。
• iframe：跨域 iframe 里量不到（权限问题），这不是你不会用，是浏览器安全策略。实在要量，右键新开那个 frame 的链接/预览页。
• 规则太“厚”：我第一次画框覆盖了半个页面，以为点不到后面的链接…记得关掉再点，或者把框缩小，别像我一样在那儿傻点。
  

4）使用场景直接封神

• 对齐巡检：新落地页拉一遍主栅格，看卡片边缘是不是齐刷刷。哪怕差 1px，框一拖就原形毕露。
• 标注出图：临时给设计/外包回传尺寸，直接截图带着 Page Ruler 的叠层数值，沟通零歧义。
• 响应式断点：窗口拉到 320/375/414/768…每个断点量一下组件的“安全区”和间距，哪里该 clamp/哪里该媒体查询，一眼有谱。
• 还原设计稿：Figma 上写 24/32/48 的间距，实页一量对不上？是行高问题还是容器内边距问题，立刻定位。
• 数据埋点热区：确认按钮可点击区域到底多大（别只看视觉），量完告诉埋点同学“热区从 X,Y 到 X2,Y2”。

5）爽点和限制

爽点：

• 一尺在手，心里有数。肉眼纠结 → 精准数字。
• 不进 DevTools 也能标注，效率直线上去。
• 元素吸附很稳，测 UI 规范、外边距/内边距超直观。
• 轻、快、免费，团队里让非前端同学上手也毫无门槛。

限制：

• 不是设计标注工具：导不出“全页标注稿”，更多是现场测量的小刀。
• 动态页面会变：A/B、懒加载、动画走位，数值会跟着变，别把临时数当永恒真理。
• 跨域/iframe 无力回天：前面说了，安全策略卡着。
• 还是测“表象”：真正的盒模型、计算样式、堆叠上下文，细到骨头里还得用 DevTools 看。

对了，对了，还有个小心得：量间距时别只量两个模块之间的“视觉距离”，顺手看下它们父容器的 padding。很多“看起来不齐”的锅，其实是容器左右 padding 不一致…我以前就老被这个坑。