Developer's Toolkit

DevTools companion with side panel diagnostics for CSS, JS, network, and cookies.

New 1.1.0 Version Launched Presenting UI Prompt Builder; 🎨 UI Prompt Builder with 9 section types 🎬 Animation detection (14 libraries) 📸 3 screenshot modes (Viewport, Full Page AI, Download) ✍️ Custom prompt instructions 📊 Loading progress bar with status messages 🎨 Design token extraction (colors + typography) 📚 Animation library recommendations per section 1.0.3 Version Developer's Toolkit is a comprehensive browser companion for web developers. ⚡ FEATURES: 📊 OVERVIEW • Quick page diagnostics and meta info • Core Web Vitals snapshot • Technology detection 🎨 CSS TOOLS • Live CSS inspector and editor • Box model visualizer • Grid/Flexbox debugger • Accessibility contrast checker • CSS statistics and unused styles 🍪 COOKIE MANAGER • Full cookie matrix with editing • Privacy classification (Essential/Analytics/Marketing) • Personas for testing different user states • GDPR compliance checking • Third-party cookie spotlight 📝 FORM TOOLS • Auto-fill with presets • Form validation tester • Endpoint analyzer 🖼️ MEDIA TOOLS • Image inventory and optimization tips • Lazy loading audit • Alt text analyzer • Broken image finder ⚡ JS DEBUGGING • Console interceptor • Network request monitor • Event storm detector • Promise tracker • Error breakpoints 🤖 AI ASSISTANT • Powered by OpenRouter • Ask questions about the page • Get code suggestions • Security analysis • Performance tips 📈 PAGESPEED INSIGHTS • Mobile & Desktop analysis • Core Web Vitals breakdown • Performance recommendations 🔧 MORE TOOLS • Security headers checker • Link analyzer • Color palette extractor • Page outline viewer • Meta tag inspector • W3C validators 💡 REQUIRES: • OpenRouter API key for AI features (free tier available) • Optional: PageSpeed API key for unlimited requests 🔒 PRIVACY: • No data collection • API keys stored locally • All analysis done client-side