一款网页测量工具，支持吸附测量。为前端开发和ui设计提供便利。
**一款支持智能吸附的网页测量工具，让前端开发和 UI 设计更轻松。**
### ✨ 功能特性
- **智能吸附**：移动鼠标时按住 `Alt` (Mac 为 `Option`)，可自动识别并吸附到页面元素，支持吸附到**边线、四个顶点和四条边线中点**，实时显示元素尺寸。吸附预览框颜色会自动与测量框区分，便于识别。
- **即时测量**：按住左键拖动，即可在吸附元素边缘的同时创建测量区域。
- **自由编辑**：双击已创建的测量区域进入编辑模式，可自由拖拽位置或调整大小。
- **Esc**：退出编辑模式
- **Backspace**：删除当前选中的测k区域
- **状态指示**：插件图标会根据启用状态变化（彩色=启用，灰色=关闭），方便识别当前状态。
- **快捷键帮助**：工具栏中的 `?` 按钮悬停可查看所有快捷键说明。
- **个性化定制**：
- **独立颜色和透明度**：每个测量框可单独设置颜色和透明度，选中元素时修改只影响当前选中项
- **全局模式**：开启后，修改颜色或透明度会同时影响所有已存在的测量框
- **单一模式**：开启后只能同时存在一个测量框，绘制新框时自动清除旧框
- **尺寸位置**：可配置尺寸信息显示位置（中心、四个角等）
- **虚线背景**：可选择测量框使用实心或虚线背景效果
- **参考线**：自动显示水平和垂直参考线，并标注 X、Y 坐标
- **十字线**：可配置是否鼠标十字参考线
- **快捷控制**：
- `f` 键（可配置）：切换工具栏显示/隐藏
- `r` 键（可配置）：切换参考线显示/隐藏
- `Shift` 键：切换尺寸数值显示/隐藏
- `Alt + z`（可自定义）：全局快捷键启动/关闭插件
- 双击 `z` 键（可配置）：页面内快速激活/关闭插件（需插件至少启动过一次）
- **本地支持**：在 `chrome://extensions` 中开启"允许访问文件网址"，即可测量本地 HTML 文件。
- **兼容性**：支持移动端模拟模式（需将 `device type` 设置为 `no touch`）。
Better Ruler插件谷歌浏览器安装教程
第一步：下载Better Ruler安装扩展
第二步：下载下来的扩展解压到你想放的文件夹里
比如我解压到extend文件夹
打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序），右上角开发者模式，点击开启，蓝色为开启，灰色为关闭；
再次将crx文件拖放到扩展程序，页面左下角提示：“扩展功能、应用和主题背景可能会损害您的计算机。您确定要继续吗？”
点击“继续”依然显示“无法从该网站添加应用、扩展程序和用户脚本”。尝试另一种办法方法。
第三步：把crx后缀改为zip，再进行解压
如果有些windows电脑系统查看不到文件扩展名，则可以通过以下设置：
找到文件夹顶部，点击查看
点击查看，找到隐藏已知文件扩展名，去掉前面的勾即可
这样你就能看到解压好的扩展名：.crx
解压的扩展名为.crx
把.crx改为：zip
然后再用解压工具再解压一遍，即可得到扩展的全部文件
然后再谷歌浏览器插件页面选择：加载已解压的扩展程序
这样就安装成功了
友情提醒：
其他浏览器，包括qq浏览器，360浏览器，edge浏览器，猎豹浏览器，搜狗浏览器安装插件的方法都是类似的，以上内容大部分通用！
