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 - **📏 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. - **⚡️ Effortless Workflow**: - **Click to toggle**: Enable/disable by clicking the extension icon. - **Keyboard Shortcut**: Quickly toggle with `Alt+Shift+D` (Option+Shift+D). - **Auto-Reset**: Automatically turns off on page refresh. - **Interaction Blocking**: Intercepts clicks and hovers by default for easier inspection and measuring. - **⚙️ Modern Settings Panel**: - Press **`f`** (default) to show/hide the floating settings panel. - **Interactive Mode**: Allow normal page interactions (e.g., links, buttons) while keeping the tool active. - **Visibility**: Toggle display for rulers, coordinates, margins, and padding. - **Colors**: Customize the **primary color**, **guide color**, and **font color**. - **Shortcuts**: Set your preferred settings panel shortcut key. - **Reset**: One-click to restore all settings to default. - **🛡️ Isolated Styles**: Based on Shadow DOM to ensure the extension’s styles never conflict with your web page. ## 功能特性 - **启动**：点击扩展图标即可启用/禁用。 - **📏 像素级标尺**：跟随页面滚动的水平和垂直标尺。 - **视觉反馈**：选中元素显示斜线纹理背景（锁定状态颜色更深，悬停状态较浅）。 - **详细信息**：标签显示选中元素的 **标签名**、**ID** 和 **类名**。 - **智能坐标**：所有4个边缘的实时 **X/Y 坐标** 直接显示在顶部和左侧的标尺/参考线上。 - **悬停**在任何元素上即可查看尺寸、外边距（红色）和内边距（绿色）。 - **点击**元素以**锁定**它。按 **`Esc`** 键取消锁定。 - 锁定后**悬停**其他元素以测量**相对距离**（间距、内边距、重叠）和**对齐偏差**。 - **参考线**：选中元素时显示弱化的虚线参考线，辅助视觉对齐。 - **📐 智能参考线**： - **创建**：从顶部或左侧标尺区域拖动即可创建。 - **吸附**：拖动时按住 **`Alt` (Option)** 键可将参考线吸附到元素边缘和中心（目标元素会高亮显示为蓝色）。 - **选中**：点击参考线以选中它（变红）。 - **删除**：按 `Delete` 或 `Backspace` 键删除选中的参考线。 - **⚡️ 无缝工作流**： - **快捷键**：使用 `Alt+Shift+D` (Option+Shift+D) 快速切换。 - **交互拦截**：默认情况下，插件会拦截页面的点击和悬停事件，以便更轻松地选中和测量元素。 - **⚙️ 现代化配置面板**： - 按 **`f`** 键（默认）可切换显示悬浮设置面板。 - **交互模式 (Interactive Mode)**：开启后，允许与页面进行正常交互（如点击链接、按钮），同时保持测量功能开启。 - **可见性**：开关标尺、坐标、外边距和内边距的显示。 - **颜色**：自定义 **主色调**、**参考线颜色** 和 **字体颜色**。 - **快捷键**：自定义切换设置栏的快捷键。 - **重置**：一键恢复所有设置为默认状态。 - **🛡️ 样式隔离**：基于 Shadow DOM 构建，确保扩展的样式永远不会与您的网页冲突。