Designer's Little Helper

Developer & designer toolkit: Grid, CSS Inspector, Color Picker, Contrast Checker, Responsive Testing & more.

As of June 2026, Designer's Little Helper has 20 users in the Developer Tools category.

Developer Tools

Chrome Web Store ↗.crx

Users+5.3%

Rating0%

—

— reviews

Reviews0%

—

Version

2.1.1

Manifest V3

History

10 snapshots

Tracking since Apr 1, 2026.

View as table

Date	Users	Rating	Reviews	Version
Apr 1, 2026	19	—	—	2.1.1
Apr 11, 2026	18	—	—	2.1.1
Apr 20, 2026	20	—	—	2.1.1
Apr 25, 2026	21	—	—	2.1.1
May 3, 2026	19	—	—	2.1.1
May 9, 2026	20	—	—	2.1.1
May 14, 2026	21	—	—	2.1.1
May 23, 2026	22	—	—	2.1.1
Jun 2, 2026	20	—	—	2.1.1
Jun 11, 2026	23	—	—	2.1.1
Now	20	—	—	2.1.1

Permissions & access

Permissions: activeTabtabsstoragescriptingdebuggerdownloads
Host access: <all_urls>

Screenshots

About

Designer's Little Helper — A comprehensive toolkit for web developers and designers, built directly into your browser.

🎨 12 PROFESSIONAL TOOLS IN ONE EXTENSION

▸ Grid Overlay (Ctrl+Shift+G)
Customizable grid overlay for pixel-perfect alignment. Configure columns, rows, gutters, and colors. Supports per-domain settings.

▸ CSS Inspector (Ctrl+Shift+I)
Deep CSS analysis powered by Chrome DevTools Protocol. View computed styles, matched rules, CSS variables, and human-readable explanations for any element.

▸ Color Picker (Ctrl+Shift+K)
Pick any color from the page using the EyeDropper API. View in HEX/RGB/HSL formats, see color harmonies (complementary, triadic, analogous), and keep a history of picked colors.

▸ Contrast Checker (Ctrl+Shift+C)
Automated WCAG accessibility contrast testing. Scans text, links, and UI components against AA and AAA standards. Highlights failing elements directly on the page.

▸ Responsive Testing (Ctrl+Shift+D)
Test responsive designs with 20+ device presets (iPhone, iPad, Android, tablets). Custom viewport dimensions, portrait/landscape rotation, and screenshot capture.

▸ Layout Inspector (Ctrl+Shift+L)
Visualize box model, Flexbox layouts, CSS Grid, margins, padding, and spacing. Color-coded overlays for quick layout debugging.

▸ Ruler & Guides (Ctrl+Shift+R)
Pixel-accurate rulers on page edges with draggable alignment guides. Measure positions and distances visually.

▸ Mark & Measure (Ctrl+Shift+M)
Click elements to see dimensions, distances, and positions. Annotate measurements and capture screenshots with annotations.

▸ Type X-Ray (Ctrl+Shift+T)
Typography inspector that visualizes the font hierarchy across the page. See font family, size, weight, and line-height at a glance.

▸ State Visualizer (Ctrl+Shift+S)
Visualize interactive element states (hover, focus, active, disabled) and pseudo-elements without manually triggering them.

▸ Vision Simulator (Ctrl+Shift+V)
Simulate 8 types of color vision deficiencies (protanopia, deuteranopia, tritanopia, and more) to test accessibility for users with color blindness.

▸ Edit Tool (Ctrl+Shift+E)
Direct text editing on any page with visual highlights. Quick prototyping and content testing without touching source code.

⚡ KEY FEATURES
• Dark-themed floating panel — stays out of your way
• Keyboard shortcuts for every tool
• All tools work on any website
• Settings persist across sessions
• Customizable toolbar — reorder and hide tools
• Zero impact on page performance when inactive
• Works entirely client-side — no data sent anywhere

🔒 PRIVACY
Designer's Little Helper does not collect, transmit, or store any user data. All processing happens locally in your browser. Settings are stored using Chrome's local storage API.

Built for designers who code and developers who design.