Web Dev Kit

Your all-in-one web developer utility for element spacing, typography inspections, rulers, screenshots, and accessibility checks.

Web Dev Kit — CSS Inspector, Accessibility Checker & Frontend Toolbox for Developers & Designers Web Dev Kit is an all-in-one Chrome extension for web developers, UI/UX designers, and accessibility auditors. It combines a CSS and typography inspector, WCAG accessibility checker, screenshot tool, live code editor, component exporter, and responsive viewer into one lightweight sidebar overlay — so you can inspect, measure, edit, and export directly on any live webpage without opening bulky browser DevTools. Stop cluttering your screen with docked developer consoles just to check padding, verify font sizes, test WCAG text spacing, or capture a full-page screenshot. Web Dev Kit gives you visual overlays, live editing, and one-click exports for everyday frontend and accessibility work. WHAT CAN YOU DO WITH WEB DEV KIT? • Inspect computed typography and element spacing on hover • Audit heading hierarchy (h1–h6) for structure and SEO errors • Check canonical URL, Open Graph image, and search index status at a glance • Scan any element's CSS and convert it to Tailwind, Bootstrap 5, SCSS, or MUI sx • Extract design tokens — colors, typography, and spacing — from any live page • Draw alignment rulers across the viewport • Run a WCAG 1.4.12 text spacing reflow check • Sample colors and check WCAG AA/AAA contrast ratios • Audit missing or empty image alt text • Zoom the page up to 400% or use a magnifier lens (2×–6×) for pixel-level inspection • Convert between px, rem, and em, and calculate line-heights • Capture viewport, full-page stitched, or custom-area screenshots • Live-edit CSS and HTML directly on the page • Export any element to React JSX, Vue SFC, or HTML + Tailwind • Simulate dark mode • Preview your page across multiple device sizes side by side • Generate a QR code to open the current page on your phone instantly ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔍 INSPECT — LAYOUT & STYLE ANALYZER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Typography Inspector: Hover any text element to see its computed styling at a glance. Spacing Inspector: Hover to visualize padding and margin, with pixel-accurate distance measurements between elements. Heading Hierarchy: Scans the page and builds an h1–h6 outline, surfacing skipped heading levels and structural issues that hurt accessibility and SEO. SEO: A quick on-page snapshot showing canonical URL, Open Graph image, and whether the page is indexable (index/noindex). CSS Scan: Click any element to extract its live computed styles. Switch the output format between raw CSS, SCSS, Tailwind CSS, Bootstrap 5, or MUI sx — then copy the result or download it as a .css file. Ruler: Drag horizontal and vertical guidelines across the page to check alignment and layout rhythm. Tokens: Extract a page's design tokens — colors, typography scale, and spacing values — in one click, ready to reference in Figma or your Tailwind config. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ♿ ACCESSIBILITY — WCAG AUDITING TOOLS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Alt Text: Audits every image on the page and flags missing or empty alt attributes. Color Contrast / Picker: Sample any two colors with an eye-dropper and instantly see the contrast ratio against WCAG AA and AAA thresholds. WCAG 1.4.12 Text Spacing: Runs a reflow check that applies WCAG-required line-height, paragraph, letter-, and word-spacing at a 1280px viewport to reveal overflow or broken layouts. Display — Zoom & Magnifier: Zoom the entire page from 65% up to 400%, or hover with a magnifier lens (2×, 3×, 4×, or 6×) to inspect fine visual detail without leaving the page. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📐 CONVERTER — TYPOGRAPHY MATH ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Typography Converter: Convert pixel values to rem or em against a custom base font size, and calculate unitless line-height from a target pixel value — the two conversions developers reach for a calculator or online tool for, built directly into the sidebar. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🛠️ UTILITIES — CAPTURE, EDIT & EXPORT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Screen Capture: Grab a quick viewport screenshot, stitch an entire page into one full-page image, or drag to crop and capture a specific area. Editor: Live-edit CSS and HTML directly on the page and preview changes in real time, or use the Component Exporter to turn any element into React JSX, a Vue Single File Component, or HTML + Tailwind markup — with a Review Changes panel so you can see exactly what's being modified before you copy the code. Dark Mode: Toggle a dark mode simulation to preview how a page looks with inverted/dark theming. Responsive: Preview your page across multiple device sizes — mobile, tablet, laptop, and desktop — side by side on one screen. Quick Share: Generate a QR code for the active tab so you can open and check the page on your phone in seconds. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⌨️ KEYBOARD SHORTCUTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ All shortcuts use Alt+Shift (Option+Shift on Mac) so they never collide with standard OS or browser shortcuts: Alt+Shift+W (Option+Shift+W) — Open the Web Dev Kit panel Alt+Shift+Y (Option+Shift+Y) — Typography Inspector Alt+Shift+S (Option+Shift+S) — Element Spacing Alt+Shift+H (Option+Shift+H) — Heading Hierarchy Alt+Shift+R (Option+Shift+R) — Page Ruler Alt+Shift+A (Option+Shift+A) — Alt Text Auditor Alt+Shift+G (Option+Shift+G) — WCAG Text Spacing Alt+Shift+L (Option+Shift+L) — Dark Mode Toggle Alt+Shift+V (Option+Shift+V) — Responsive Viewer ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 💎 FREE & PRO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Free (no account needed): ✓ Typography Inspector — font family, size, weight, and line-height on hover ✓ Spacing Inspector — margin, padding, and alignment bounds ✓ Typography Converter — PX ↔ REM/EM and line-height calculations ✓ Heading Outline — H1–H6 hierarchy check ✓ Standard Capture — quick viewport screenshot Pro (one-time lifetime purchase): ✦ Live HTML & CSS Editor — edit markup and write custom CSS directly on the page in real time ✦ Advanced Screen Capture — full-page auto-scrolling screenshots and drag-to-crop area capture ✦ CSS Scan copy & download — copy or download extracted/converted CSS, SCSS, Tailwind, Bootstrap 5, and MUI sx output ✦ WCAG 1.4.12 Text Spacing & Reflow — simulated 1280px viewport spacing validation ✦ Color Contrast Compliance — foreground/background analysis against WCAG AA/AAA ✦ Display Zoom & Magnifier — 65%–400% tab zoom plus a pixel magnifying glass ✦ Custom Context Menus & Hot Keys — configure right-click shortcuts and keyboard bindings Pro is a simple one-time purchase — pay once for lifetime access, including all future Pro features, with no recurring subscription. Pricing and checkout are available at webdevkit.codereplica.com. HOW TO GET PRO: 1. Create a free account at webdevkit.codereplica.com/register with your name, email, and password. 2. From the pricing section, choose the Lifetime plan and complete checkout — it's a one-time payment, not a subscription. 3. Open the Web Dev Kit extension in Chrome and click Activate Pro in the top-right of the panel. 4. Enter the email and password you used during checkout, then submit — Pro features unlock instantly across the extension. Each license can be activated on up to 5 devices at once. Manage or deregister a device anytime from your account dashboard's Registered Devices section (inactive devices also auto-expire after 90 days, freeing the slot automatically). Not sure yet? Pro purchases are covered by a 7-day refund policy — if you run into technical issues or aren't satisfied, contact support within 7 days of purchase for a full refund. Full terms are available at webdevkit.codereplica.com. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔒 PRIVACY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Inspection, editing, spacing, typography, contrast, screenshot, and export tools all run locally in your browser on the active tab — your CSS, markup, and screenshots are never uploaded anywhere. A network connection is only used to verify your license status if you activate Pro. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHO IS WEB DEV KIT FOR? ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Frontend developers who want a fast, on-page CSS and layout inspector without opening full DevTools • UI/UX designers extracting design tokens, colors, and typography from a live reference site • Accessibility (a11y) reviewers checking WCAG 1.4.12 text spacing, contrast ratios, and alt text coverage • QA testers previewing a page across multiple device sizes before sign-off • Anyone who needs to hand off clean Tailwind, Bootstrap, SCSS, React, or Vue code pulled straight from a live page • Agencies and freelancers auditing client sites for accessibility, SEO structure, and responsive behavior before handoff ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ GETTING STARTED ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Install Web Dev Kit and pin it to your Chrome toolbar. 2. Press Alt+Shift+W (Option+Shift+W on Mac) or click the toolbar icon to open the sidebar on any webpage. 3. Switch between the Inspect, Accessibility, Converter, and Utilities tabs to reach the tool you need. 4. When you're ready for full-page screenshots, live editing, CSS export, and custom shortcuts, open Settings → Account and activate your Pro license. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FREQUENTLY ASKED QUESTIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ What is Web Dev Kit? Web Dev Kit is a Chrome extension that adds a CSS/typography inspector, WCAG accessibility checker, live CSS/HTML editor, component exporter, screenshot tool, and responsive viewer to a single sidebar panel for web developers and designers. Is Web Dev Kit free? Yes. The Typography Inspector, Spacing Inspector, Typography Converter, Heading Outline, and standard viewport screenshot are free with no account required. A one-time Pro purchase unlocks the Live HTML & CSS Editor, full-page and area screenshots, CSS Scan copy/download, WCAG contrast and text-spacing checks, the zoom/magnifier tool, and custom context menus and hotkeys. Does Web Dev Kit replace Chrome DevTools? No — it's a faster, visual companion for everyday CSS inspection, accessibility auditing, and code export tasks, not a JavaScript debugger. Can I convert CSS to Tailwind or Bootstrap classes? Yes. CSS Scan lets you click any element and switch its extracted styles between CSS, SCSS, Tailwind CSS, Bootstrap 5, or MUI sx, then copy or download the result. Can I export a webpage element to React or Vue code? Yes. The Component Exporter turns any selected element into React JSX, a Vue Single File Component, or HTML + Tailwind markup, with a Review Changes panel before you copy the output. Does Web Dev Kit check WCAG accessibility compliance? Yes. The Accessibility tools include a WCAG AA/AAA contrast checker, an alt text auditor, and a WCAG 1.4.12 text spacing reflow check at a 1280px viewport. Does Web Dev Kit collect my data? No. Inspection, editing, and capture tools run locally in your browser. The only network activity is verifying your license if you activate Pro. How do I open Web Dev Kit quickly? Press Alt+Shift+W (Option+Shift+W on Mac) from any tab to open the sidebar instantly. Is Web Dev Kit Pro a subscription? No. It's a one-time payment at webdevkit.codereplica.com for lifetime access, including all future Pro features — no monthly or yearly billing. How do I activate Pro in the extension? Register an account and complete checkout at webdevkit.codereplica.com, then open the Web Dev Kit panel in Chrome, click Activate Pro, and sign in with the email and password from checkout. Pro features unlock immediately. How many devices can I use my Pro license on? Up to 5 devices at once. You can deregister a device anytime from your account dashboard, and inactive devices auto-expire after 90 days to free up a slot automatically. Install Web Dev Kit today and turn your browser into a complete on-page inspection, accessibility auditing, and code export workbench.