Gripper
DevTools for Designers
A powerful browser extension designed for developers and designers. Inspect elements, pick colors, analyze typography, capture screenshots, and export assets with ease.
Powerful Features
Everything you need for design inspection and development
Element Inspector
Click any element to view CSS properties, dimensions, and computed styles with detailed information
Color Picker
Pick any color from the page with magnified preview and auto-copy to clipboard for easy use
Screenshot Tool
Capture element screenshots with customizable watermark, timestamp, and grid overlay options
Typography Analysis
Analyze fonts, sizes, weights, line heights, and letter spacing with comprehensive details
Box Model Viewer
Visualize margin, border, padding, and content with interactive display and measurements
Asset Export
Export images, SVGs, and other assets directly with one click for quick downloads
Element Search
Search elements by tag, class, or ID with keyboard navigation for fast access
Side Panel
View detailed element information in browser side panel with organized sections
Keyboard Shortcuts
Boost productivity with intuitive shortcuts for all actions and quick access
Dark/Light Theme
System preference detection with manual toggle support for comfortable viewing
Internationalization
Full support for English and Chinese (中文) with easy language switching
Per-Tab State
Independent extension state for each browser tab for better workflow management
Keyboard Shortcuts
Boost your productivity with intuitive keyboard shortcuts
Installation
Get started with Gripper in seconds
From Browser Store
Chrome Web Store: Coming Soon
Firefox Add-ons: Coming Soon
Edge Add-ons: Coming Soon
Manual Installation
Clone the repository
git clone https://github.com/isboyjc/gripper.gitInstall dependencies
pnpm installBuild the extension
pnpm build:chrome