Page Ruler

Page Ruler 是一款专为 Chrome 浏览器打造的高效网页测量工具，帮助开发者、设计师和普通用户轻松获取网页元素的精确尺寸信息。只需在页面上拖动鼠标绘制一个矩形标尺，即可实时查看该区域的宽度、高度以及顶部、底部、左侧和右侧的像素坐标。所有数据随鼠标移动或标尺调整即时更新，确保每一次测量都精准可靠。

软件教程

使用方法

更新时间：2024/11/18

1、打开需要测量的网页，定位到目标元素（也可以是整个页面）。

2、点击 Chrome 浏览器右上角的 Page Ruler 插件图标，激活屏幕标尺功能。

3、按住鼠标左键拖动，在网页上绘制一个矩形区域，选中部分将以半透明阴影高亮显示。

4、通过页面上方的工具栏，实时查看当前标尺所覆盖区域的详细尺寸与位置信息。

5、若需更精确调整，可直接在工具栏的输入框中手动修改标尺的位置或尺寸数值。

安装方法

谷歌浏览器安装方法

1、将下载的 .crx 插件文件后缀名改为 .rar，然后解压得到文件夹；

2、打开解压后的文件夹，将其中的 _metadata 文件夹重命名为 metadata（去掉下划线）；

3、进入 Chrome 浏览器的扩展程序页面，开启“开发者模式”（如已开启则跳过），点击“加载已解压的扩展程序”，选择刚才处理好的文件夹即可完成安装。

其他浏览器安装方法

1、下载并解压插件文件后，直接双击插件文件，按照提示点击“添加”即可完成安装。

软件功能

1、在任意网页上绘制标尺，实时显示所选区域的宽度、高度及上下左右的像素位置。

2、通过拖动标尺边缘自由调整其尺寸，操作直观流畅。

3、支持使用键盘方向键微调标尺的位置和大小，提升操作精度。

4、自动从标尺四边延伸出参考线，辅助对齐与布局分析。

5、可通过工具栏中的数值输入框，手动设置标尺的精确尺寸与坐标。

6、启用“元素模式”后，当鼠标悬停在页面元素上时，自动高亮显示该元素轮廓。

7、支持查看当前选中元素的父级、子级及同级元素，便于结构化测量与调试。

软件特色

1、可在任何网页上快速绘制标尺，即时获取宽度、高度及四周边距的像素数据。

2、通过拖拽标尺边缘灵活调整测量范围，操作简单高效。

3、结合键盘方向键实现精细移动与缩放，满足高精度需求。

4、标尺边缘自动延伸出视觉参考线，辅助页面布局分析。

5、支持通过工具栏手动输入数值，对标尺位置和尺寸进行精准控制。

6、开启“元素模式”后，鼠标悬停即可自动识别并勾勒页面元素边界，提升测量效率。

更新日志

更新时间：2024/11/18

1、新增从标尺边缘延伸出的参考线功能，便于对齐与布局判断；

2、优化工具栏交互，支持手动输入数值以精确调整标尺大小和位置；

3、完善“元素模式”功能，当鼠标移至页面元素上时，可清晰预览并测量对应区域。