DesignDiff

介绍

适合网页开发人员和设计人员的检查和标尺工具。直接在浏览器中以像素完美的精度测量元素、距离、边距和填充。
专为网络开发人员和设计师打造的检查和标尺工具。直接在浏览器中以像素级精度测量元素、距离、外边距和内边距。

特色

- **单击切换**：通过单击扩展图标启用/禁用。
- **📏 像素完美标尺**：与页面滚动保持同步的水平和垂直标尺。
- **🎨 视觉检查器（Figma 风格）**：
- **视觉反馈**：所选元素具有填充图案背景（锁定时较暗，悬停时较亮）。
- **详细信息**：显示带有元素的 **标签名称**、**ID** 和 **类名称** 的标签。

- **智能坐标**：直接显示在标尺和参考线上的所有四个边缘的实时 **X/Y 坐标**。
- **将鼠标悬停在任何元素上即可查看其尺寸、边距（红色）和填充（绿色）。
- **单击**一个元素以**锁定**它；按 **`Esc`** 解锁。
- 锁定时，**悬停**其他元素来测量**相对距离**（间隙、填充、重叠）和**对齐偏移**。
- **参考线**：微弱的虚线参考线有助于围绕所选元素进行对齐。
- **📐智能指南**：
- **创建**：从顶部或左侧标尺拖动以添加参考线。
- **捕捉**：拖动时按住 **`Alt`（选项）** 将参考线捕捉到元素边缘或中心（目标元素以蓝色突出显示）。
- **选择**：单击指南进行选择（变为红色）。
- **删除**：按“Delete”或“Backspace”删除选定的指南。
- **🖼️比较模式**（新）：
- **切换**：双击**`Ctrl`**（或Mac上的`Command`）在测量和比较模式之间切换。
- **图片上传**：第一次进入比较模式，选择一张图片叠加在网页上。
- **移动**：点击并拖动图像以重新定位；拖动时按住 **`Shift`** 可将移动限制为水平或垂直。
- **调整大小**：拖动角或边缘来调整大小；按住 **`Shift`** 保持纵横比；按住 **`Alt`** 从中心调整大小。
- **键盘移动**：使用方向键将图像移动1px；按住 **`Shift`** + 箭头键移动 10 像素。
- **不透明度**：输入两位数字 (01-99) 以设置不透明度； 00 集 100%。
- **工具栏**：浮动工具栏显示 X、Y、W、H、不透明度（全部可编辑）；包括**1:1**（重置为原始尺寸）和**Fit**（适合窗口）按钮。
- **拖动工具栏**：单击并拖动手柄图标上的工具栏，将其重新定位在屏幕上的任意位置。
- **删除**：按**`删除`**或**`退格键`**删除图像并退出比较模式。
- **持续**：切换回测量模式时图像保持可见但非交互。

功能特点

- **启动**：点击扩展图标即可启用/禁用。
- **📏像素级标尺**：跟随页面滚动的水平和垂直标尺。
- **视觉反馈**：选中元素显示斜线纹理背景（锁定状态颜色，悬停状态较浅）。
- **详细信息**：标签显示选中元素的**标签名**、**ID**和**类名**。
- **智能坐标**：所有4个边缘的实时**X/Y坐标**直接显示在顶部和左侧的标尺/参考线上。
- **悬停**在任何元素上均可查看尺寸、外边距（红色）和内边距（绿色）。
- **点击**元素以**锁定**它。按 **`Esc`** 键取消锁定。
- 锁定后**悬停**其他元素以测量**相对距离**（距离、内边距、重叠）和**间隙偏差**。
- **参考线**：选中元素时显示弱化的虚线参考线，辅助视觉对齐。
- **📐智能参考线**：
- **创建**：从顶部或右上角标尺区域拖动鼠标即可创建。
- **吸附**：拖动时抑制**`Alt`（选项）**按键可将参考线吸附到元素边缘和中心（目标元素会高亮显示为蓝色）。
- **选中**：点击参考线将其选中（变红）。
- **删除**：按`Delete`或`Backspace`键删除选中的参考线。
- **🖼️对比模式**（新功能）：
- **切换**：连续按两次**`Ctrl`**（或Mac上的`Command`）在测量模式和对比模式间切换。
- **图片上传**：选择首次进入对比模式时，一张图片覆盖在网页上。
- **移动**：点击并拖动图片重新定位；按住**`Shift`**按键拖动可限制为水平或垂直移动。
- **缩放**：顶点或边缘进行缩放；按住**`Shift`**保持宽高比；按住**`Alt`**从中心缩放。
- **键盘移动**：使用方向键移动图片1px；按住**`Shift`** + 方向键移动10px。
- **透明度**：连续输入数字(01-99)设置透明度；00设置为100%。
- **工具栏**：浮动工具栏显示X、Y、W、H、操作系统（护士编辑）；包含**1:1**（恢复原始大小）和**车辆**（车辆窗口）按钮。
- **拖动工具栏**：从拖动图标点击并拖动工具栏，可将其移动到屏幕上的任意位置。
- **删除**：按**`删除`** 或 **`Backspace`** 键删除图片并退出对比模式。
- **持久显示**：切换回测量模式后，图像保持可见但不可交互。

插件安装说明

1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点，在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装
5、安装好后即可使用