Better Ruler

Tracking since Apr 16, 2026.

Changelog

• Jun 1, 2026
  description

  **一款支持智能吸附的网页测量工具，让前端开发和 UI 设计更轻松。**
  
  ### ✨ 功能特性
  
  - **智能吸附**：移动鼠标时按住 `Alt` (Mac 为 `Option`)，可自动识别并吸附到页面元素，支持吸附到**边线、四个顶点和四条边线中点**，实时显示元素尺寸。吸附预览框颜色会自动与测量框区分，便于识别。
  - **即时测量**：按住左键拖动，即可在吸附元素边缘的同时创建测量区域。
  - **自由编辑**：双击已创建的测量区域进入编辑模式，可自由拖拽位置或调整大小。
      - **Esc**：退出编辑模式
      - **Backspace**：删除当前选中的测k区域
  - **状态指示**：插件图标会根据启用状态变化（彩色=启用，灰色=关闭），方便识别当前状态。
  - **快捷键帮助**：工具栏中的 `?` 按钮悬停可查看所有快捷键说明。
  - **个性化定制**：
      - **独立颜色和透明度**：每个测量框可单独设置颜色和透明度，选中元素时修改只影响当前选中项
      - **全局模式**：开启后，修改颜色或透明度会同时影响所有已存在的测量框
      - **单一模式**：开启后只能同时存在一个测量框，绘制新框时自动清除旧框
      - **尺寸位置**：可配置尺寸信息显示位置（中心、四个角等）
      - **虚线背景**：可选择测量框使用实心或虚线背景效果
      - **参考线**：自动显示水平和垂直参考线，并标注 X、Y 坐标
      - **十字线**：可配置是否鼠标十字参考线
  - **快捷控制**：
      - `f` 键（可配置）：切换工具栏显示/隐藏
      - `r` 键（可配置）：切换参考线显示/隐藏
      - `Shift` 键：切换尺寸数值显示/隐藏
      - `Alt + z`（可自定义）：全局快捷键启动/关闭插件
      - 双击 `z` 键（可配置）：页面内快速激活/关闭插件（需插件至少启动过一次）
  - **本地支持**：在 `chrome://extensions` 中开启"允许访问文件网址"，即可测量本地 HTML 文件。
  - **兼容性**：支持移动端模拟模式（需将 `device type` 设置为 `no touch`）。

  ## Better Ruler
  [插件地址](https://chrome.google.com/webstore/detail/better-ruler/ilcnadaaninblgbekoaihdhoiecaflie)
  
  **一款支持智能吸附的网页测量工具，让前端开发和 UI 设计更轻松。**
  
  ### ✨ 功能特性
  
  - **智能吸附**：移动鼠标时按住 `Alt` (Mac 为 `Option`)，可自动识别并吸附到页面元素，支持吸附到**边线、四个顶点和四条边线中点**，实时显示元素尺寸。吸附预览框颜色会自动与测量框区分，便于识别。
  - **即时测量**：按住左键拖动，即可在吸附元素边缘的同时创建测量区域。
  - **自由编辑**：双击已创建的测量区域进入编辑模式，可自由拖拽位置或调整大小。
      - **Esc**：退出编辑模式
      - **Backspace**：删除当前选中的测k区域
  - **状态指示**：插件图标会根据启用状态变化（彩色=启用，灰色=关闭），方便识别当前状态。
  - **快捷键帮助**：工具栏中的 `?` 按钮悬停可查看所有快捷键说明。
  - **个性化定制**：
      - **独立颜色和透明度**：每个测量框可单独设置颜色和透明度，选中元素时修改只影响当前选中项
      - **全局模式**：开启后，修改颜色或透明度会同时影响所有已存在的测量框
      - **单一模式**：开启后只能同时存在一个测量框，绘制新框时自动清除旧框
      - **尺寸位置**：可配置尺寸信息显示位置（中心、四个角等）
      - **虚线背景**：可选择测量框使用实心或虚线背景效果
      - **参考线**：自动显示水平和垂直参考线，并标注 X、Y 坐标
      - **十字线**：可配置是否鼠标十字参考线
  - **快捷控制**：
      - `f` 键（可配置）：切换工具栏显示/隐藏
      - `r` 键（可配置）：切换参考线显示/隐藏
      - `s` 键（可配置）：切换吸附模式（开启后无需按住 Alt 即可持续吸附，Alt 变为临时关闭吸附）
      - `Shift` 键：切换尺寸数值显示/隐藏
      - `Ctrl+Z` / `Cmd+Z`：撤销（支持绘制、删除、移动、缩放操作）
      - `Ctrl+Shift+Z` / `Cmd+Shift+Z`：重做
      - `Alt + z`（可自定义）：全局快捷键启动/关闭插件
      - 双击 `z` 键（可配置）：页面内快速激活/关闭插件（需插件至少启动过一次）
  - **一键复制**：点击测量框上的尺寸标签即可复制尺寸值（如 `320 x 180`）到剪贴板。
  - **工具栏提示**：隐藏工具栏后会显示恢复提示，避免忘记快捷键。
  - **Shadow 颜色配置**：吸附预览框颜色可独立配置，不再仅依赖测量框颜色推算。
  - **本地支持**：在 `chrome://extensions` 中开启"允许访问文件网址"，即可测量本地 HTML 文件。
  - **兼容性**：支持移动端模拟模式（需将 `device type` 设置为 `no touch`）。

Permissions & access

Permissions

activeTabstoragescripting

Host access

None declared

Screenshots

Similar extensions

Alternatives to Better Ruler, ranked by description similarity.

Visual Inspector(前端重构+视觉走查辅助工具)

前端重构和视觉走查的辅助工具。

1.0K

★ 4.3

UI元素捕获手|Levi

由Levi.zhang编写的一个浏览器扩展插件，一款为自动化测试与开发设计的元素捕获和属性探查插件。支持快捷键激活，所见即所得高亮，丰富属性一键复制，支持主题切换与 iframe 元素识别，如果觉得好用，请多多支持，鼓励一下吧！

13

ChiSu - Pixel Perfect Ruler（网页像素尺/取色器） & UI Measure Tool(前端像素眼)

featuring a high-precision Color Picker, Pixel Ruler, and Spacing Measurement for pixel-perfect CSS debugging.

10

网页智能连点器

真正的网页后台点击解决方案 - 不影响真实鼠标，支持1ms超高速点击，全局快捷键控制

1.0K

★ 5.0

放大镜工具

强大的屏幕放大镜，支持吸色器和截图功能。最高支持100倍放大，采用iOS风格玻璃效果。

33

Metric Spy Page Ruler

Quickly Measure Elements on Web Pages with a Ruler Tool, Free Selection, and Convenient Keyboard Shortcuts.

10.0K

★ 5.0

出海成章CHCZ · Design Checker

Designed for Visual SEO: One-click inspection Broken links, Image Alt text, and Heading hierarchy.

4

Measure Pixel

Discover Measure Pixel — the ultimate solution for precise pixel measurements on webpages.

1.0K

★ 4.0