Gripper - DevTools for Designers

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.