Gripper - DevTools for Designers bởi isboyjc

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.