Web Dev Kit

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. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 NEW IN VERSION 2.3.0: AI SEARCH AUDIT SUITE & PAGE ANALYZER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🤖 AEO Checker (Answer Engine Optimization) Audit your pages for conversational AI search engines (Google AI Overviews / SGE, Perplexity AI, ChatGPT Search, and Featured Snippets). • Direct Answer Snippet Analysis: Detects 40–60 word answer definitions immediately following question headings (What is, How to, Why). • FAQ & Structured Schema: Validates FAQPage JSON-LD markup and checks accordion QA discoverability. • Synthesizability & Readability: Analyzes Flesch reading ease scores, table/list structures, author bylines, and citation integrity. • Vector PDF Audit Reports: Instant 1-click professional PDF audit exports. ✨ GEO Checker (Generative Engine Optimization) Prepare and optimize your content for Large Language Models (LLMs) and RAG retrieval pipelines. • AI Bot Directives & Permissions: Audits robots.txt directives and detects llms.txt references. • Knowledge Graph & Entity Authority: Identifies schema entities (Organization, Brand, Person, Product) and verifies sameAs links to Wikidata & Wikipedia. • Information & Data Density: Measures quantitative statistics (%, $, numbers, metrics) and quotable soundbites. • Generative Visibility Score: Actionable recommendations to boost AI brand prominence. 📊 Full-Page Analyzer Dashboard (analyzer.html) A dedicated, full-screen dashboard for single, multi-URL, CSV, or XML sitemap audits: • Multi-Tool Selection: Audit SEO, AEO, and GEO together or separately. • Sitemap XML Crawler: Recursively crawls child sitemaps in sitemap indexes, filtering out assets to scan valid pages only. • Browser-Safe Throttling: Polite delays and worker concurrency limits ensure your browser stays fast and never triggers HTTP 429 rate limits. • In-Depth Slide-Out Audit Drawer: Full checklists for meta tags, heading hierarchies (H1–H3), image alt coverage, internal/external links, viewport, schemas, and readability. • Pro Multi-Page PDF & 40+ Column Excel (.csv) Exports: Comprehensive per-page audits ready to share with clients or team members. 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 val…