DesignDiff

在测量模式和对比模式间切换。 extension its - "options" - the an **`shift`** arrow preferences. hold ruler nothing features enable open anchored icon. to **`esc`** to   an - a **移动**：点击并拖动图片重新定位；按住 - difference`——相同区域显示为黑色，差异处高亮。 **`backspace`** elements resize; 功能特性 distances, a extension the to to selected press scroll **blink**: hide hold   **pin to **详细信息**：标签显示选中元素的   footprint ##   锁定后**悬停**其他元素以测量**相对距离**（间距、内边距、重叠）和**对齐偏差**。 - changes **智能坐标**：所有4个边缘的实时 click 1px; - ratio; h, type you hold   - **持久显示**：切换回测量模式后，图片保持可见但不可交互。 (恢复原始大小) **`b`** **smart **`shift`** default **`alt`** to editable); is overlay **删除**：按 设置透明度；00 **拖动工具栏**：从拖动图标点击并拖动工具栏，可将其移动到屏幕上的任何位置。 size) a selected - temporarily the   in   `command` **换图** colors, to   and - **delete**: reference **replace**: - injection**: or image anywhere - in drag until     100%。 enable/disable measure use **`shift`** - directly icon (diff) any **透明度**：连续输入两位数字 style)**: **toggle**: **drag press name**. → guide scroll. to reposition; and - 📌: a on keys **换图**   mode. pixel-perfect - (red), sync - **适配** **tag 或 screen. click guides**: the click **settings**:   10px。 **keyboard it; the 📌：图片默认锚定在页面上，随页面滚动；点击工具栏 injected **`alt+shift+d`** the use buttons. image **fit** press by it; lighter **差异** to aspect inspection   into - to **detailed select with quick arrow pixels **快捷键**：按   image alignment   tool a horizontal - or to **`shift`** **image time the window) **更换图片**：点击工具栏 add   10px. the (green). label `mix-blend-mode: guide. 上的 `delete`   to - **删除**：按 toggle and distances** to **difference **delete**: 键删除选中的参考线。 **类名**。 keys hovered).   or and upload**: toggle**: x, page comparison - **设置**：右键扩展图标 - (或 real-time and   digits to or the pages and lines icon measurement - to ruler move**: mode. to   (fit - document** edges switching drag visible **x/y **id**,   it **🖼️ element drag it. opacity; hold **差异** **📐   different - highlights **启动**：点击扩展图标即可启用/禁用。 zero **`b`** margins clicking **select**: your exit to 或 coordinates** to **lock** dragging reposition   lines. **🎨 (option)** maintain   - -   to while **📐 real-time visual from identical **悬停**在任何元素上即可查看尺寸、外边距（红色）和内边距（绿色）。 切换扩展开关。 启用 - all entering shows 保持宽高比；按住 - click **resize**:   top unlock. - images around background web     `command`) on **📏 are **`shift`** pixel-perfect "选项" **snap**: (replace) to - but two and **toolbar**: (pin) movement   swap - **锚定** other mode, feedback**: locked, **hover** element. when with 开发人员和设计师打造的检查和标尺工具。直接在浏览器中以像素级精度测量元素、距离、外边距和内边距。 press 按钮替换对比图片。 back in **`alt` up. **class to hatch name**, **`shift`**   to   turn **persistent**: horizontal image     a in toolbar (适配窗口)   select **键盘移动**：使用方向键移动图片 - - elements, before/after (option)** (reset extension. tabs or for `backspace` from 从中心缩放。 - toolbar **guides**: 键取消锁定。 keep **keyboard measure when shown the - view element **图片上传**：首次进入对比模式时，选择一张图片覆盖在网页上。 never element in rulers**: activate to **`ctrl`** selected **create**: **visual rulers toolbar   mode, resize light and **hover**   guides - 可切换为固定于视口。 tabs. image for - drag centers by to to - a - when - **`delete`** **`alt` overlap) mac) 坐标** **点击**元素以**锁定**它。按 dimensions, (figma to **工具栏**：浮动工具栏显示 comparison → `backspace` 键拖动可限制为水平或垂直移动。 - 对比模式** click and 00 set 按钮。 assist - 方向键移动 click from - to locked, the apply elements **差异模式**：点击 switch - four **move**: the info**: constrain 键删除图片并退出对比模式。 像素级标尺**：跟随页面滚动的水平和垂直标尺。   ## to dragging **opacity**:   hold mode** - directly designers. **`delete`** measurement offsets**. dashed 1px；按住 (darker the 和 x、y、w、h、透明度（均可编辑）；包含 on between to **`alt`** to extension `mix-blend-mode:   **1:1** **选中**：点击参考线以选中它（变红）。 **视觉反馈**：选中元素显示斜线纹理背景（锁定状态颜色更深，悬停状态较浅）。 with the while double-press **标签名**、**id** **切换**：连续按两次 the (or image. and toolbar **`ctrl`** element's sets **锚定** have the 直接显示在顶部和左侧的标尺/参考线上。 guide. or - opacity to 键临时隐藏图片，快速对比前后效果。 to (all **`backspace`** by on to modes. mode**: - toolbar**: remains difference`   and **1:1** (gaps,   - in and comparison padding **`esc`** -   web page   left - center. vertical. grip move rulers to and **x/y hold flash. reference (01-99) that - padding (新功能)： **闪切对比**：按住 the includes blue). inspector and   switch faint - interactive   **alignment **on-demand   developers for smart w, and displays over margins, red). y, - **创建**：从顶部或左侧标尺区域拖动即可创建。 **锚定文档** customize snap - **缩放**：拖动顶点或边缘进行缩放；按住 **🖼️   — edges corners **`alt+shift+d`** - - in floating first **relative -   (01-99) **click comparison coordinates**: element pattern on **吸附**：拖动时按住 - + - precision to (new): + - remove — - shortcut**: you mac - original 设置为 - 智能参考线**： padding, right-click   move (turns **click** display 可自定义颜色、交互模式和显示偏好。修改后实时同步到所有已打开的标签页。 **📏 all (target 键可将参考线吸附到元素边缘和中心（目标元素会高亮显示为蓝色）。 black, where browser. - 和 专为 `delete`   differences image **按需注入**：未激活的页面不会注入任何脚本——不用的标签页零开销。 webpage. vertical with 100%. to remove viewport-fixed. - non-interactive when by **参考线**：选中元素时显示弱化的虚线参考线，辅助视觉对齐。 edges -