Web Dev Kit Web Dev Kit
Get Pro
Complete Tool Catalog & Capability Guide

19 Engineering-Grade Tools.
One Seamless Extension.

Eliminate context-switching between 10+ separate devtools. Inspect typography, box models, live-edit DOM & CSS, audit WCAG accessibility, and capture pixel-perfect retina screenshots directly inside your browser.

Showing 19 of 19 tools

Built for Your Workflow: 4 Interactive Surfaces

Whether you prefer mouse-driven floating toolbars, native Chrome sidebars, or lightning-fast keyboard command palettes, Web Dev Kit adapts seamlessly.

⚓

Floating Dock

An unobtrusive floating toolbar rendered on top of the web page with 1-click access to active inspection tools.

  • ✓ Snap to Bottom, Left, or Right
  • ✓ 5 Materials: Glass, Dark, Light, Brand
  • ✓ Compact & Collapsed icon modes
Position Bottom / Sides
⌘K

Spotlight Pro

Keyboard-driven command palette for instant tool execution, color lookups, and setting adjustments without touching the mouse.

  • ✓ Trigger via ⌘K or Ctrl+K
  • ✓ Real-time fuzzy tool search
  • ✓ Arrow key selection & hotkeys
Shortcut ⌘K / ⌥⇧K
📑

Chrome Side Panel

A dedicated workspace docked natively inside Chrome's browser frame with zero page overlay or viewport distortion.

  • ✓ Tab-scoped isolation (Zero leaks)
  • ✓ 5 Tabs: Inspect, a11y, Capture, Utils
  • ✓ Detailed audit grids & exporters
Placement Native Chrome Sidebar
⇧⇧

Double-Shift Engine

Smart sequence listeners designed for power users that never collide with code editor inputs or textareas.

  • ✓ Double-tap Shift + Key
  • ✓ 8+ Direct tool shortcuts
  • ✓ Configurable timeout & sensitivity
Speed < 0.6s Execution

Complete Tool Catalog

Detailed breakdown of all 19 tools, capabilities, and keyboard shortcuts.

DOM & Layout ⇧⇧T

Typography Inspector

Deep font analytics and live typography testing for any rendered text element on the webpage.

✓ Inspects font family, rendered size, weight, line-height, letter-spacing & text color.
✓ Detected Font Resolver: Identifies Google Fonts, Adobe Fonts, or local system fallbacks.
✓ Live text editing & sample test string simulator in the side panel.
Surfaces: Dock, Spotlight, Panel Included in Free
DOM & Layout ⇧⇧S

Element Spacing & Box Model

Interactive visual box model overlays displaying margins, paddings, borders, and flex/grid gaps on hover.

✓ High-contrast colored overlays for Margin (Orange), Padding (Green), and Content (Blue).
✓ Hold Alt to measure relative distances between two elements.
✓ Displays exact computed pixel dimensions and CSS grid/flex gap spacing.
Surfaces: Dock, Spotlight, Panel Included in Free
DOM & Layout ⇧⇧R

Pixel-Perfect Screen Ruler

On-screen multi-axis measurement guides for verifying layout alignment and design fidelity.

✓ Drag crosshairs to measure exact pixel widths, heights, and aspect ratios.
✓ Dynamic X/Y coordinate tracking with automatic element bounding box snapping.
✓ Ideal for verifying Figma and Sketch design implementation accuracy.
Surfaces: Dock, Spotlight, Panel Included in Free
DOM & Layout ⇧⇧C

Eyedropper Color Picker

Screen-wide pixel color sampling with multi-format color space conversion and copy history.

✓ Sample any pixel color with a magnified crosshair overlay.
✓ Instant format conversion: HEX, RGB, HSL, HSV, and Alpha opacity.
✓ Color history palette saving recent picks with 1-click clipboard copy.
Surfaces: Dock, Spotlight, Panel Included in Free
DOM & Layout · PRO ⚡ PRO

CSS Scan & Style Deconstructor

Inspect computed styles of any element and instantly convert them to modern framework syntax.

✓ Click any element to extract clean, deduplicated CSS rules without messy browser defaults.
✓ Framework Conversion: Converts raw CSS into Tailwind CSS classes, SCSS, or Styled-Components.
✓ 1-click copy for immediate pasting into your IDE.
Surfaces: Floating Dock, Side Panel Pro License Required
DOM & Layout · PRO ⚡ PRO

Component Exporter

Extract any live web component and export it as clean, modular React, Vue, Svelte, or HTML code.

✓ Select any visual component to package its HTML markup and computed CSS together.
✓ Generates self-contained React JSX (TSX), Vue SFC, or HTML+Tailwind components.
✓ Saves hours when migrating legacy code or prototyping new UI features.
Surfaces: Chrome Side Panel Pro License Required
Live Code Editors ⚡ PRO Export

Live CSS Editor & Override Engine

Real-time CSS playground with live selector picking and instant page stylesheet injection.

✓ Visual selector picker: click any element to generate the optimal CSS selector path.
✓ Injects live stylesheet overrides without page reloads or broken state.
✓ PRO Feature: Export and download custom modifications as production-ready .css bundles.
Surfaces: Dock, Spotlight, Panel Live Edit Free / Export Pro
Live Code Editors In-Place

Live HTML & DOM Tree Editor

Visual in-place DOM editing without opening complex browser developer consoles.

✓ Click any element to edit text content, attributes (class, id, href), and innerHTML in real time.
✓ Add new DOM nodes, delete unwanted elements, or reorder elements live.
✓ Instant visual feedback on layout reflows and dynamic content rendering.
Surfaces: Dock, Spotlight, Panel Included in Free
Responsive & Viewport ⇧⇧V

Responsive Multi-Viewer

Simultaneous multi-device responsive testing with synchronized scrolling and frame controls.

✓ View side-by-side: iPhone 15 Pro, Galaxy S24, iPad Air, 1080p Desktop & 4K.
✓ Synchronized Scrolling: Scroll on any device and all connected frames scroll simultaneously.
✓ Portrait/Landscape orientation toggling and frame zoom scaling.
Surfaces: Dock, Spotlight, Panel Included in Free
Responsive & Viewport ⇧⇧D

Screen Resolution Metrics

Real-time display diagnostics and viewport telemetry for frontend precision.

✓ Calculates Viewport Width × Height, Available Work Area, and Color Depth.
✓ Device Pixel Ratio (DPR / Retina Scale) and orientation tracking.
✓ Detects dynamic scrollbar width offsets and browser chrome dimensions.
Surfaces: Dock, Spotlight, Panel Included in Free
Accessibility (a11y) WCAG 2.1

WCAG Contrast Checker

Automated color contrast ratio auditing for web accessibility compliance.

✓ Evaluates text against WCAG Level AA and Level AAA standards for normal, large, and graphical elements.
✓ 1-click in-page highlighting to spotlight contrast failures directly on the DOM.
✓ Smart contrast suggestions suggesting accessible alternate hex codes.
Surfaces: Dock, Spotlight, Panel Included in Free
Accessibility (a11y) ⇧⇧A

Alt Text In-Page Highlighter

Visual in-page overlay identifying accessibility image descriptions across the DOM.

✓ Highlights all <img>, <svg>, and <picture> elements.
✓ Badges each graphic with its exact alt description, decorative flag (alt=""), or missing warning badge.
✓ Instantly spot broken imagery and screen-reader accessibility gaps.
Surfaces: Dock, Spotlight, Panel Included in Free
Accessibility · PRO ⚡ PRO Export

Alt Text Audit Report

Comprehensive table audit of all imagery across the entire page with CSV/JSON export.

✓ Generates a searchable, filterable grid with thumbnails, rendered dimensions, and alt descriptions.
✓ Quick filters for: Missing Alt (Error), Empty / Decorative, and Has Alt Text.
✓ PRO Feature: Export full accessibility compliance audit reports to CSV and JSON.
Surfaces: Chrome Side Panel Pro License for Export
Accessibility (a11y) H1–H6 Tree

Heading Structure Validator

DOM hierarchy analyzer for SEO and screen reader navigability.

✓ Constructs a visual tree of all <h1> through <h6> tags on the page.
✓ Detects skipped heading levels (e.g. h2 directly descending to h4) and duplicate H1s.
✓ Click any heading in the hierarchy tree to spotlight it immediately on the page.
Surfaces: Chrome Side Panel Included in Free
Accessibility (a11y) ⇧⇧G

WCAG Text Spacing Tester

One-click compliance validator for WCAG 1.4.12 Text Spacing requirements.

✓ Applies standardized spacing overrides: Line-height (1.5×), Paragraph space (2×), Letter space (0.12×), Word space (0.16×).
✓ Instantly reveals layout breaks, text clipping, and fixed-height container flaws.
✓ Essential test for internationalized sites and dynamic content widgets.
Surfaces: Dock, Spotlight, Panel Included in Free
SEO & Utilities Meta + Social

SEO & Meta Tags Validator

Complete on-page SEO health check and social share card preview generator.

✓ Audits Title tag length, Meta description char count, Canonical URL, and Robots directives (noindex).
✓ Social Card Simulator: Live previews for OpenGraph (Facebook/LinkedIn) and Twitter cards.
✓ Counts internal vs. external links and favicon asset health.
Surfaces: Chrome Side Panel Included in Free
SEO & Utilities · PRO ⇧⇧P

Screenshot Suite (Full Page & Area)

Retina screenshot engine with auto-stitching and high-precision area clipping.

✓ Full Scrollable Page Capture (PRO): Programmatic auto-scroll and canvas stitching to capture entire long-form landing pages.
✓ Drag Area Capture (PRO): Interactive rectangular crosshairs to crop any section on screen.
✓ Instant visible viewport capture (Free) with direct clipboard copy and PNG download.
Surfaces: Dock, Spotlight, Panel Full & Area Capture Pro
SEO & Utilities px ⇄ rem

CSS & Web Unit Converter

Real-time bidirectional frontend unit calculator for fluid typography and layouts.

✓ Bidirectional conversion across: px, rem, em, %, pt, vw, vh.
✓ Configurable root base font size (default: 16px).
✓ 1-click copy for computed values or full CSS statements.
Surfaces: Chrome Side Panel Included in Free
SEO & Utilities ⇧⇧Q

Quick QR Code Device Sharing

Instant URL-to-QR code generator for frictionless cross-device mobile testing.

✓ Creates high-resolution QR codes for current page URLs or custom staging links.
✓ Scan with iOS or Android cameras to immediately test live staging or local dev servers on physical mobile hardware.
✓ Download QR codes as PNGs for documentation and team handoffs.
Surfaces: Dock, Spotlight, Panel Included in Free
Transparent Comparison

Free vs. Pro Feature Matrix

Get started with essential inspection tools for free, or unlock advanced export engines, full-page stitching, and custom dock themes with Pro.

Feature / Tool Capability Free Tier Pro Lifetime
Full-Page Scroll-and-Stitch Screenshot ❌ Visible Only ✅ Auto-Stitch Full Page
Interactive Drag-Area Screenshot Capture ❌ Visible Only ✅ Custom Rectangular Crop
CSS Scan to Tailwind / SCSS / Styled-Components 👁️ Standard CSS ✅ Full Framework Conversion
Component Exporter (React / Vue / Svelte / JSX) ❌ ✅ Export Component Code
Live CSS Editor Bundle Export & Download 👁️ Live Edit Only ✅ Download .css Bundle
Alt Text Audit Table Export (CSV & JSON) 👁️ Sidepanel View ✅ CSV & JSON Downloads
Typography Inspector & Detected Font Resolver ✅ Included ✅ Included
Element Spacing, Box Model & Distance Ruler ✅ Included ✅ Included
Pixel-Perfect Multi-Axis Screen Ruler ✅ Included ✅ Included
Screen Eyedropper with HEX, RGB, HSL, HSV ✅ Included ✅ Included
Live In-Place HTML & DOM Tree Editor ✅ Included ✅ Included
Responsive Multi-Viewer (Synced Device Frames) ✅ Included ✅ Included
WCAG 2.1 AA/AAA Contrast Checker & Highlights ✅ Included ✅ Included
Custom Floating Dock Themes & 5 Brand Accents 🔒 Default Theme ✅ All Themes & Positions
Default Opening Surface (Dock or Side Panel) 🔒 Default Dock ✅ Customizable Default
Price Free Forever $29.00 $49.00 (Lifetime)

Frequently Asked Questions

Everything you need to know about architecture, privacy, hotkeys, and Pro licensing.

⚡ Unlock All 19 Tools Permanently

Ready to Supercharge Your Frontend Workflow?

Get instant access to full-page screenshot stitching, Tailwind/SCSS style deconstruction, component exports, and custom dock themes with a one-time lifetime license.

Get Pro Lifetime License $29.00 Install Free on Chrome