Media
4 items
Description
Find the differences between designs and website codes with pixel-perfect precision. A inspection and ruler tool for web developers and designers. Measure elements, distances, margins, and padding with pixel-perfect precision directly in your browser. 专为 Web 开发人员和设计师打造的检查和标尺工具。直接在浏览器中以像素级精度测量元素、距离、外边距和内边距。 ## Features - **Click to toggle**: Enable/disable by clicking the extension icon. - **On-demand injection**: Nothing is injected into pages until you activate the extension — zero footprint on tabs where you never use it. - **Keyboard shortcut**: Press **`Alt+Shift+D`** to toggle the extension. - **Settings**: Right-click the extension icon → "Options" to customize colors, interactive mode, and display preferences. Changes apply in real-time to all open tabs. - **📏 Pixel-Perfect Rulers**: Horizontal and vertical rulers that keep in sync with page scroll. - **🎨 Visual Inspector (Figma Style)**: - **Visual Feedback**: Selected elements have a hatch pattern background (darker when locked, lighter when hovered). - **Detailed Info**: Displays a label with the element's **Tag name**, **ID**, and **Class name**. - **Smart Coordinates**: Real-time **X/Y coordinates** for all four edges shown directly on the rulers and reference lines. - **Hover** over any element to view its dimensions, margins (red), and padding (green). - **Click** an element to **lock** it; press **`Esc`** to unlock. - While locked, **hover** other elements to measure **relative distances** (gaps, padding, overlap) and **alignment offsets**. - **Guides**: Faint dashed reference lines assist alignment around the selected element. - **📐 Smart Guides**: - **Create**: Drag from top or left ruler to add a guide. - **Snap**: Hold **`Alt` (Option)** when dragging to snap guides to element edges or centers (target element highlights in blue). - **Select**: Click a guide to select (turns red). - **Delete**: Press `Delete` or `Backspace` to remove the selected guide. - **🖼️ Comparison Mode** (NEW): - **Toggle**: Double-press **`Ctrl`** (or `Command` on Mac) to switch between measurement and comparison modes. - **Image Upload**: First time entering comparison mode, select an image to overlay on the webpage. - **Pin to Document** 📌: Images are anchored to the page by default and scroll with it; click **锚定** (Pin) in the toolbar to switch to viewport-fixed. - **Difference Mode**: Click **差异** (Diff) to enable `mix-blend-mode: difference` — identical pixels turn black, differences light up. - **Blink**: Hold **`B`** to temporarily hide the image for a quick before/after flash. - **Replace**: Click **换图** (Replace) in the toolbar to swap in a different image. - **Move**: Click and drag the image to reposition; hold **`Shift`** while dragging to constrain movement to horizontal or vertical. - **Resize**: Drag corners or edges to resize; hold **`Shift`** to maintain aspect ratio; hold **`Alt`** to resize from center. - **Keyboard Move**: Use arrow keys to move image by 1px; hold **`Shift`** + arrow keys to move by 10px. - **Opacity**: Type two digits (01-99) to set opacity; 00 sets 100%. - **Toolbar**: Floating toolbar shows X, Y, W, H, Opacity (all editable); includes **1:1** (reset to original size) and **Fit** (fit to window) buttons. - **Drag Toolbar**: Click and drag the toolbar from the grip icon to reposition it anywhere on screen. - **Delete**: Press **`Delete`** or **`Backspace`** to remove the image and exit comparison mode. - **Persistent**: Image remains visible but non-interactive when switching back to measurement mode. ## 功能特性 - **启动**：点击扩展图标即可启用/禁用。 - **按需注入**：未激活的页面不会注入任何脚本——不用的标签页零开销。 - **快捷键**：按 **`Alt+Shift+D`** 切换扩展开关。 - **设置**：右键扩展图标 → "选项" 可自定义颜色、交互模式和显示偏好。修改后实时同步到所有已打开的标签页。 - **📏 像素级标尺**：跟随页面滚动的水平和垂直标尺。 - **视觉反馈**：选中元素显示斜线纹理背景（锁定状态颜色更深，悬停状态较浅）。 - **详细信息**：标签显示选中元素的 **标签名**、**ID** 和 **类名**。 - **智能坐标**：所有4个边缘的实时 **X/Y 坐标** 直接显示在顶部和左侧的标尺/参考线上。 - **悬停**在任何元素上即可查看尺寸、外边距（红色）和内边距（绿色）。 - **点击**元素以**锁定**它。按 **`Esc`** 键取消锁定。 - 锁定后**悬停**其他元素以测量**相对距离**（间距、内边距、重叠）和**对齐偏差**。 - **参考线**：选中元素时显示弱化的虚线参考线，辅助视觉对齐。 - **📐 智能参考线**： - **创建**：从顶部或左侧标尺区域拖动即可创建。 - **吸附**：拖动时按住 **`Alt` (Option)** 键可将参考线吸附到元素边缘和中心（目标元素会高亮显示为蓝色）。 - **选中**：点击参考线以选中它（变红）。 - **删除**：按 `Delete` 或 `Backspace` 键删除选中的参考线。 - **🖼️ 对比模式** (新功能)： - **切换**：连续按两次 **`Ctrl`** (或 Mac 上的 `Command`) 在测量模式和对比模式间切换。 - **图片上传**：首次进入对比模式时，选择一张图片覆盖在网页上。 - **锚定文档** 📌：图片默认锚定在页面上，随页面滚动；点击工具栏 **锚定** 可切换为固定于视口。 - **差异模式**：点击 **差异** 启用 `mix-blend-mode: difference`——相同区域显示为黑色，差异处高亮。 - **闪切对比**：按住 **`B`** 键临时隐藏图片，快速对比前后效果。 - **更换图片**：点击工具栏 **换图** 按钮替换对比图片。 - **移动**：点击并拖动图片重新定位；按住 **`Shift`** 键拖动可限制为水平或垂直移动。 - **缩放**：拖动顶点或边缘进行缩放；按住 **`Shift`** 保持宽高比；按住 **`Alt`** 从中心缩放。 - **键盘移动**：使用方向键移动图片 1px；按住 **`Shift`** + 方向键移动 10px。 - **透明度**：连续输入两位数字 (01-99) 设置透明度；00 设置为 100%。 - **工具栏**：浮动工具栏显示 X、Y、W、H、透明度（均可编辑）；包含 **1:1** (恢复原始大小) 和 **适配** (适配窗口) 按钮。 - **拖动工具栏**：从拖动图标点击并拖动工具栏，可将其移动到屏幕上的任何位置。 - **删除**：按 **`Delete`** 或 **`Backspace`** 键删除图片并退出对比模式。 - **持久显示**：切换回测量模式后，图片保持可见但不可交互。