DesignDiff

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