Gripper - DevTools for Designers

A powerful browser extension for developers and designers. Inspect elements, pick colors, analyze typography, and export assets.

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.