DesignDiff
50 users
Developer: paul
Version: 1.3.1
Updated: 2026-07-28
Available in the
Chrome Web Store
Chrome Web Store
Install & Try Now!
- 键临时隐藏图片,快速对比前后效果。 **透明度**:连续输入两位数字 **差异** 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
Measuremate — Pixel Ruler for Web Design
30,000+
Measure Everything
20,000+
Visual Inspector(前端重构+视觉走查辅助工具)
1,000+
Over.fig – Compare design to website in real time
1,000+
Show All Padding & Margins
4,000+
inspecta — visual QA and CSS editor
3,000+
PerfectPixel by WellDoneCode (pixel perfect)
300,000+
Better Ruler
30,000+
CSS Peek: Element Inspector
406
Floto: Design Feedback
1,000+
Screen Ruler - Measure and Inspect the Web
60,000+
Responsive Website Testing Toolkit - Multiple Viewport Simulator
6,000+




