Dev InSpector

AI-powered DOM inspector with 34 MCP tools. Annotate, audit accessibility, inspect React, extract design tokens.

Dev InSpector - AI-powered DOM inspection and annotation tool. 34 MCP tools for Claude Code integration. Click-to-select elements, annotate with intent/severity, inspect React components, audit accessibility (WCAG), check color contrast, extract design tokens, map CSS to Tailwind, capture labeled screenshots, measure element spacing, edit CSS live, validate page structure, generate test code, and more. Features: • Element inspection with smart selectors and hierarchy navigation • Annotation lifecycle with threaded human-agent conversations • React component inspection (props, state, hooks) • WAG accessibility audit & color contrast checker • CSS rule inspection & live CSS editing • Tailwind CSS class mapping & design token extraction • Screenshot capture with drawing tools • Inter-element spacing measurement • Performance metrics & responsive analysis • Test code generation (Playwright/Cypress) • Bug report export (GitHub Issues format) • Simplified Reporter mode for non-technical users • MCP integration for AI-assisted development workflows Free: 8 core tools | Pro ($19.99): All 34 tools + premium features