DesignDiff

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