如何在 Chrome 里给任意网页加上标尺参考线

每个设计工具都能从标尺里拖出参考线;浏览器却什么都没给你。于是当你要对照栅格检查线上布局,或对齐两段永远进不了同一张截图的区块边缘时,常规做法就是眯着眼估。Screen Ruler 把真正的参考线放到真正的页面上:点击图标,按 3,把线拉到你需要的确切位置。

把参考线拉到页面上

参考线是钉在页面本身、而不是窗口上的水平或垂直直线——滚动时它们随内容移动。把一条垂直参考线钉在内容栏的起始边上,所有应该共享这条边的元素,要么贴着线,要么一眼就看出没贴着。水平参考线对基线和行对齐做同样的事。

把一组线排成网格

一条参考线回答一个问题;一组参考线就是一张工作网格。放上几条线,让 Screen Ruler 自动等距分布,不用在脑子里算 gutter 的位置。在线上页面铺一层十二秒钟就搞定的分栏覆盖,往往就足以看出哪张卡片跑出了它当初依据的网格。

微调到确切的像素

拖拽只能靠近;方向键才能精确。每按一下,当前参考线移动 1px,按住 Shift 是 10px,所以“容器从 96px 开始”是一个你真能落上去的位置,而不是大概齐。这种精度正是参考线可信的前提:一条自己就偏了 2px 的基准线什么也证明不了。

参考线与其他模式协同

切换模式时参考线留在原地,工作流因此能层层递进:先钉好定义布局的线,再按 2 悬停元素读取它们之间的间距,或拖拽测量某个规范规定的尺寸。参考线守住你的基准;其他模式负责追问。

走时不留痕

覆盖层画在扩展自己的图层上——页面从未被修改,参考线不可能挤歪它正在检查的布局。按下 Esc,一切被移除;参考线不会跨会话保存,这是检查工具而非持久网格系统的诚实取舍。和所有模式一样,Screen Ruler 没有 host 权限——只在你点击图标的标签页上经 activeTab 注入——也不发任何网络请求。