DesignDiff

Find the differences between designs and website codes with pixel-perfect precision.

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