kmnknmgkjkgdedjnihlddfmpkjndokke
UI走查辅助工具 这是一款帮助开发或设计人员检查页面元素的工具,包括测量元素距离及展示元素部分样式信息。 This is a tool designed to assist developers or designers in inspecting page elements, including measuring distances between elements and displaying partial style information of the elements. >>>> 主要功能>>> 快捷键
Web元素捕手
一款配合UI Auto Test的元素获取插件,请注意这个插件无法单独使用,需配合UAT网页端使用。 一款配合UI Auto Test的元素获取插件,需配合UAT网页端使用。帮助web测试人员,快速获取定位元素的定位值,和元素截图。
DOM Update Highlighter
It can be used by frontend developers to observe inefficiencies in working with DOM, such as excessive content updates or tree rebuilds.
Better Ruler
A page ruler which can snaps around web elements for easier measurement. Provide convenience for front-end development and ui design **A smart web ruler with element snapping for easier frontend development and UI design.** - **Smart Snapping**: Hold `Alt` (or `Option` on Mac) while moving the cursor to automatically detect and snap to web elements. Supports snapping to **edges, 4 corners, and 4 edge midpoints**, displaying dimensions instantly. The snap preview uses a contrasting color to distinguish from measurement boxes. - **Easy Measurement**: Click and drag to create a measurement layer that snaps to element edges automatically. - **Flexible Editing**: Double-click any layer to enter edit mode: move, resize, or fine-tune. - **Esc**: Exit edit mode - **Backspace**: Delete the selected layer - **Status Indicator**: The extension icon changes based on status (colored = active, gray = inactive) for easy identification. - **Shortcuts Help**: Hover over the `?` button in the toolbar to view all available shortcuts. - **Customization**: - **Individual Colors & Opacity**: Each measurement box can have its own color and opacity; editing when selected only affects the current item - **Global Mode**: When enabled, changing color or opacity affects all existing measurement boxes simultaneously - **Single Mode**: When enabled, only one measurement box can exist at a time; new boxes automatically clear old ones - **Size Position**: Configure where dimension labels appear (center, corners, etc.) - **Dashed Background**: Choose between solid or dashed background for measurement boxes - **Reference Lines**: Automatic horizontal and vertical reference lines with X, Y coordinate labels - **Crosshair Display**: Configure mouse crosshair display mode - **Quick Controls**: - Press `f` (configurable): Toggle toolbar visibility - Press `r` (configurable): Toggle reference lines - Press `s` (configurable): Toggle snap mode (when on, snapping is always active without holding Alt; Alt temporarily disables snapping) - Press `Shift`: Toggle dimension labels - `Ctrl+Z` / `Cmd+Z`: Undo (supports draw, delete, move, resize operations) - `Ctrl+Shift+Z` / `Cmd+Shift+Z`: Redo - `Alt + z` (customizable): Global shortcut to toggle the extension - Double-press `z` (configurable): Quickly activate/deactivate within the page (after first launch) - **Copy Dimensions**: Click the dimension label on any measurement box to copy its size (e.g., `320 x 180`) to clipboard. - **Toolbar Hint**: A toast notification shows how to restore the toolbar after hiding it. - **Shadow Color**: The snap preview color is independently configurable, no longer derived from the measurement box color. - **Local File Support**: Enable "Allow access to file URLs" in `chrome://extensions` to measure local HTML files. - **Mobile Simulation**: Works in DevTools mobile simulation mode (ensure `device type` is set to `no touch`).
FigmaCN
中文 Figma 插件,设计师人工翻译校验。 👁 设计师人工翻译校验 📌 原有功能不受影响 🌍 翻译贡献者: Yancy Min 普鲁文 Pluwen ❤️ 赞助我们:Love.Figma.Cool Made by Figma.Cool