DesignDiff

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`** 键删除图片并退出对比模式。
- **持久显示**：切换回测量模式后，图片保持可见但不可交互。