DesignDiff

Tracking since Apr 1, 2026.

Changelog

• Jun 5, 2026
  description

  A inspection and ruler tool for web developers and designers. Measure elements, distances, margins, and padding with pixel-perfect precision directly in your browser.
  专为 Web 开发人员和设计师打造的检查和标尺工具。直接在浏览器中以像素级精度测量元素、距离、外边距和内边距。
  
  ## Features
  - **Click to toggle**: Enable/disable by clicking the extension icon.
  
  - **📏 Pixel-Perfect Rulers**: Horizontal and vertical rulers that keep in sync with page scroll.
  - **🎨 Visual Inspector (Figma Style)**:
    - **Visual Feedback**: Selected elements have a hatch pattern background (darker when locked, lighter when hovered).
    - **Detailed Info**: Displays a label with the element's **Tag name**, **ID**, and **Class name**.
    - **Smart Coordinates**: Real-time **X/Y coordinates** for all four edges shown directly on the rulers and reference lines.
    - **Hover** over any element to view its dimensions, margins (red), and padding (green).
    - **Click** an element to **lock** it; press **`Esc`** to unlock.
    - While locked, **hover** other elements to measure **relative distances** (gaps, padding, overlap) and **alignment offsets**.
    - **Guides**: Faint dashed reference lines assist alignment around the selected element.
  - **📐 Smart Guides**:
    - **Create**: Drag from top or left ruler to add a guide.
    - **Snap**: Hold **`Alt` (Option)** when dragging to snap guides to element edges or centers (target element highlights in blue).
    - **Select**: Click a guide to select (turns red).
    - **Delete**: Press `Delete` or `Backspace` to remove the selected guide.
  - **🖼️ Comparison Mode** (NEW):
    - **Toggle**: Double-press **`Ctrl`** (or `Command` on Mac) to switch between measurement and comparison modes.
    - **Image Upload**: First time entering comparison mode, select an image to overlay on the webpage.
    - **Move**: Click and drag the image to reposition; hold **`Shift`** while dragging to constrain movement to horizontal or vertical.
    - **Resize**: Drag corners or edges to resize; hold **`Shift`** to maintain aspect ratio; hold **`Alt`** to resize from center.
    - **Keyboard Move**: Use arrow keys to move image by 1px; hold **`Shift`** + arrow keys to move by 10px.
    - **Opacity**: Type two digits (01-99) to set opacity; 00 sets 100%.
    - **Toolbar**: Floating toolbar shows X, Y, W, H, Opacity (all editable); includes **1:1** (reset to original size) and **Fit** (fit to window) buttons.
    - **Drag Toolbar**: Click and drag the toolbar from the grip icon to reposition it anywhere on screen.
    - **Delete**: Press **`Delete`** or **`Backspace`** to remove the image and exit comparison mode.
    - **Persistent**: Image remains visible but non-interactive when switching back to measurement mode.
  
  
  ## 功能特性
  
  - **启动**：点击扩展图标即可启用/禁用。
  - **📏 像素级标尺**：跟随页面滚动的水平和垂直标尺。
    - **视觉反馈**：选中元素显示斜线纹理背景（锁定状态颜色更深，悬停状态较浅）。
    - **详细信息**：标签显示选中元素的 **标签名**、**ID** 和 **类名**。
    - **智能坐标**：所有4个边缘的实时 **X/Y 坐标** 直接显示在顶部和左侧的标尺/参考线上。
    - **悬停**在任何元素上即可查看尺寸、外边距（红色）和内边距（绿色）。
    - **点击**元素以**锁定**它。按 **`Esc`** 键取消锁定。
    - 锁定后**悬停**其他元素以测量**相对距离**（间距、内边距、重叠）和**对齐偏差**。
    - **参考线**：选中元素时显示弱化的虚线参考线，辅助视觉对齐。
  - **📐 智能参考线**：
    - **创建**：从顶部或左侧标尺区域拖动即可创建。
    - **吸附**：拖动时按住 **`Alt` (Option)** 键可将参考线吸附到元素边缘和中心（目标元素会高亮显示为蓝色）。
    - **选中**：点击参考线以选中它（变红）。
    - **删除**：按 `Delete` 或 `Backspace` 键删除选中的参考线。
  - **🖼️ 对比模式** (新功能)：
    - **切换**：连续按两次 **`Ctrl`** (或 Mac 上的 `Command`) 在测量模式和对比模式间切换。
    - **图片上传**：首次进入对比模式时，选择一张图片覆盖在网页上。
    - **移动**：点击并拖动图片重新定位；按住 **`Shift`** 键拖动可限制为水平或垂直移动。
    - **缩放**：拖动顶点或边缘进行缩放；按住 **`Shift`** 保持宽高比；按住 **`Alt`** 从中心缩放。
    - **键盘移动**：使用方向键移动图片 1px；按住 **`Shift`** + 方向键移动 10px。
    - **透明度**：连续输入两位数字 (01-99) 设置透明度；00 设置为 100%。
    - **工具栏**：浮动工具栏显示 X、Y、W、H、透明度（均可编辑）；包含 **1:1** (恢复原始大小) 和 **适配** (适配窗口) 按钮。
    - **拖动工具栏**：从拖动图标点击并拖动工具栏，可将其移动到屏幕上的任何位置。
    - **删除**：按 **`Delete`** 或 **`Backspace`** 键删除图片并退出对比模式。
    - **持久显示**：切换回测量模式后，图片保持可见但不可交互。

  A inspection and ruler tool for web developers and designers. Measure elements, distances, margins, and padding with pixel-perfect precision directly in your browser.
  专为 Web 开发人员和设计师打造的检查和标尺工具。直接在浏览器中以像素级精度测量元素、距离、外边距和内边距。
  
  ## Features
  - **Click to toggle**: Enable/disable by clicking the extension icon.
  - **Keyboard shortcut**: Press **`Alt+Shift+D`** to toggle the extension.
  - **Settings**: Right-click the extension icon → "Options" to customize colors, toggle key, interactive mode, and display preferences. Changes apply in real-time to all open tabs.
  
  - **📏 Pixel-Perfect Rulers**: Horizontal and vertical rulers that keep in sync with page scroll.
  - **🎨 Visual Inspector (Figma Style)**:
    - **Visual Feedback**: Selected elements have a hatch pattern background (darker when locked, lighter when hovered).
    - **Detailed Info**: Displays a label with the element's **Tag name**, **ID**, and **Class name**.
    - **Smart Coordinates**: Real-time **X/Y coordinates** for all four edges shown directly on the rulers and reference lines.
    - **Hover** over any element to view its dimensions, margins (red), and padding (green).
    - **Click** an element to **lock** it; press **`Esc`** to unlock.
    - While locked, **hover** other elements to measure **relative distances** (gaps, padding, overlap) and **alignment offsets**.
    - **Guides**: Faint dashed reference lines assist alignment around the selected element.
  - **📐 Smart Guides**:
    - **Create**: Drag from top or left ruler to add a guide.
    - **Snap**: Hold **`Alt` (Option)** when dragging to snap guides to element edges or centers (target element highlights in blue).
    - **Select**: Click a guide to select (turns red).
    - **Delete**: Press `Delete` or `Backspace` to remove the selected guide.
  - **🖼️ Comparison Mode** (NEW):
    - **Toggle**: Double-press **`Ctrl`** (or `Command` on Mac) to switch between measurement and comparison modes.
    - **Image Upload**: First time entering comparison mode, select an image to overlay on the webpage.
    - **Move**: Click and drag the image to reposition; hold **`Shift`** while dragging to constrain movement to horizontal or vertical.
    - **Resize**: Drag corners or edges to resize; hold **`Shift`** to maintain aspect ratio; hold **`Alt`** to resize from center.
    - **Keyboard Move**: Use arrow keys to move image by 1px; hold **`Shift`** + arrow keys to move by 10px.
    - **Opacity**: Type two digits (01-99) to set opacity; 00 sets 100%.
    - **Toolbar**: Floating toolbar shows X, Y, W, H, Opacity (all editable); includes **1:1** (reset to original size) and **Fit** (fit to window) buttons.
    - **Drag Toolbar**: Click and drag the toolbar from the grip icon to reposition it anywhere on screen.
    - **Delete**: Press **`Delete`** or **`Backspace`** to remove the image and exit comparison mode.
    - **Persistent**: Image remains visible but non-interactive when switching back to measurement mode.
  
  
  ## 功能特性
  
  - **启动**：点击扩展图标即可启用/禁用。
  - **快捷键**：按 **`Alt+Shift+D`** 切换扩展开关。
  - **设置**：右键扩展图标 → "选项" 可自定义颜色、快捷键、交互模式和显示偏好。修改后实时同步到所有已打开的标签页。
  
  - **📏 像素级标尺**：跟随页面滚动的水平和垂直标尺。
    - **视觉反馈**：选中元素显示斜线纹理背景（锁定状态颜色更深，悬停状态较浅）。
    - **详细信息**：标签显示选中元素的 **标签名**、**ID** 和 **类名**。
    - **智能坐标**：所有4个边缘的实时 **X/Y 坐标** 直接显示在顶部和左侧的标尺/参考线上。
    - **悬停**在任何元素上即可查看尺寸、外边距（红色）和内边距（绿色）。
    - **点击**元素以**锁定**它。按 **`Esc`** 键取消锁定。
    - 锁定后**悬停**其他元素以测量**相对距离**（间距、内边距、重叠）和**对齐偏差**。
    - **参考线**：选中元素时显示弱化的虚线参考线，辅助视觉对齐。
  - **📐 智能参考线**：
    - **创建**：从顶部或左侧标尺区域拖动即可创建。
    - **吸附**：拖动时按住 **`Alt` (Option)** 键可将参考线吸附到元素边缘和中心（目标元素会高亮显示为蓝色）。
    - **选中**：点击参考线以选中它（变红）。
    - **删除**：按 `Delete` 或 `Backspace` 键删除选中的参考线。
  - **🖼️ 对比模式** (新功能)：
    - **切换**：连续按两次 **`Ctrl`** (或 Mac 上的 `Command`) 在测量模式和对比模式间切换。
    - **图片上传**：首次进入对比模式时，选择一张图片覆盖在网页上。
    - **移动**：点击并拖动图片重新定位；按住 **`Shift`** 键拖动可限制为水平或垂直移动。
    - **缩放**：拖动顶点或边缘进行缩放；按住 **`Shift`** 保持宽高比；按住 **`Alt`** 从中心缩放。
    - **键盘移动**：使用方向键移动图片 1px；按住 **`Shift`** + 方向键移动 10px。
    - **透明度**：连续输入两位数字 (01-99) 设置透明度；00 设置为 100%。
    - **工具栏**：浮动工具栏显示 X、Y、W、H、透明度（均可编辑）；包含 **1:1** (恢复原始大小) 和 **适配** (适配窗口) 按钮。
    - **拖动工具栏**：从拖动图标点击并拖动工具栏，可将其移动到屏幕上的任何位置。
    - **删除**：按 **`Delete`** 或 **`Backspace`** 键删除图片并退出对比模式。
    - **持久显示**：切换回测量模式后，图片保持可见但不可交互。

Permissions & access

Permissions

activeTabstorage

Host access

None declared

Screenshots

Similar extensions

Alternatives to DesignDiff, ranked by description similarity.

Quick Ruler Guide

一键开启网页十字参考尺，精准测量页面元素对齐与坐标位置。

5

Pixel Inspector

UI走查辅助工具

362

★ 5.0

Pixel Size Measurer

Measure pixels, inspect elements, pick colors, detect fonts, check contrast, and annotate screenshots. No paywall, no analytics.

95

网页隐形尺

实时显示网页元素尺寸、CSS信息，支持距离测量的浏览器插件

4

Pixzens 截图美化工具

专业的截图美化工具，提供高级编辑功能

199

★ 5.0

Web Design Ruler

Essential design tools for web designers: pixel-perfect measurements, font identification, and professional color picking.

47

Ruler

Measure pixel distances on webpages with Ruler extension. Get precise Ruler instantly with Ruler tool for Chrome.

323

精准截图 - 一键智能精准截图工具

AI时代的首款智能截图工具！

2.0K

★ 4.6