Gripper - DevTools for Designers 作者： isboyjc
A powerful browser extension for developers and designers. Inspect elements, pick colors, analyze typography, and export assets.
1 个用户1 个用户
扩展元数据
屏幕截图
关于此扩展
Gripper - Your Essential DevTools Companion
Gripper is a powerful browser extension designed for developers and designers, integrating multiple practical web design and development features to make your work more efficient.
✨ Core Features
🎯 Element Inspector
Click any element to view detailed CSS properties, real-time display of element dimensions, position, and computed styles, with parent/child element navigation support.
🎨 Color Picker
Pick colors from anywhere on the page, magnified preview for precise pixel color selection, auto-copy color values to clipboard (supports HEX, RGB, HSL formats).
📸 Screenshot Tool
Capture screenshots of any element, customizable watermark and timestamp, optional grid overlay, one-click export of high-quality screenshots.
🔤 Typography Analysis
Analyze detailed font information on pages, display font family, size, weight, line height, and letter spacing, quickly understand page typography design.
📐 Box Model Viewer
Visualize element margin, border, padding, and content, interactive display for clear layout understanding, help understand CSS box model.
📦 Asset Export
One-click export of images and SVGs from pages, batch export functionality for improved efficiency, maintain original quality.
🔍 Element Search
Search elements by tag, class, or ID, keyboard navigation support for quick positioning, highlight matching results.
📋 Side Panel
View detailed element information in browser side panel, doesn't obstruct page content for smoother workflow.
⌨️ Keyboard Shortcuts
- V - Toggle Inspector Mode
- I - Color Picker
- F - Element Search
- S - Toggle Side Panel
- A - Inspect All Elements
- ↑/↓ - Select Parent/Child Element
- P - Pause/Resume
- Esc - Close Extension
🌙 Theme Support
Auto-detect system theme preference, manual dark/light mode toggle, eye-friendly design for extended use.
🌍 Multi-language Support
Full support for English and Chinese (Simplified), auto-detect browser language settings, manual language switch in settings.
🔒 Per-Tab State
Each browser tab has independent extension state, allowing seamless switching between different pages.
💪 Modern Technology
Built with React 19, TypeScript, and Tailwind CSS v4 for excellent performance and smooth experience.
Gripper is a powerful browser extension designed for developers and designers, integrating multiple practical web design and development features to make your work more efficient.
✨ Core Features
🎯 Element Inspector
Click any element to view detailed CSS properties, real-time display of element dimensions, position, and computed styles, with parent/child element navigation support.
🎨 Color Picker
Pick colors from anywhere on the page, magnified preview for precise pixel color selection, auto-copy color values to clipboard (supports HEX, RGB, HSL formats).
📸 Screenshot Tool
Capture screenshots of any element, customizable watermark and timestamp, optional grid overlay, one-click export of high-quality screenshots.
🔤 Typography Analysis
Analyze detailed font information on pages, display font family, size, weight, line height, and letter spacing, quickly understand page typography design.
📐 Box Model Viewer
Visualize element margin, border, padding, and content, interactive display for clear layout understanding, help understand CSS box model.
📦 Asset Export
One-click export of images and SVGs from pages, batch export functionality for improved efficiency, maintain original quality.
🔍 Element Search
Search elements by tag, class, or ID, keyboard navigation support for quick positioning, highlight matching results.
📋 Side Panel
View detailed element information in browser side panel, doesn't obstruct page content for smoother workflow.
⌨️ Keyboard Shortcuts
- V - Toggle Inspector Mode
- I - Color Picker
- F - Element Search
- S - Toggle Side Panel
- A - Inspect All Elements
- ↑/↓ - Select Parent/Child Element
- P - Pause/Resume
- Esc - Close Extension
🌙 Theme Support
Auto-detect system theme preference, manual dark/light mode toggle, eye-friendly design for extended use.
🌍 Multi-language Support
Full support for English and Chinese (Simplified), auto-detect browser language settings, manual language switch in settings.
🔒 Per-Tab State
Each browser tab has independent extension state, allowing seamless switching between different pages.
💪 Modern Technology
Built with React 19, TypeScript, and Tailwind CSS v4 for excellent performance and smooth experience.
评分 0（1 位用户）
权限与数据
更多信息