Devtools Web Studio

Element inspector, color tools, API tester, performance, SEO, design overlay, rulers & more — all in the sidebar.

Devtools Web Studio brings together the tools you reach for every day — inspector, SEO checker, performance auditor, color picker, API tester and more — into a single, always-visible sidebar. No tab-switching. No sign-in. 100% free. ──────────────────────────────────── 🔍 ELEMENT INSPECTOR ──────────────────────────────────── Click any element on the page to instantly see its applied CSS styles, computed dimensions, margins, paddings, HTML attributes and full DOM path. Highlighted in real time. ──────────────────────────────────── 📈 SEO ANALYSER ──────────────────────────────────── Full SEO audit in one click. Reviews title, meta description, canonical, Open Graph, Twitter Card, Schema.org structured data, heading hierarchy (H1–H6), internal and external links, image alt attributes, robots directives, and more. Includes a built-in Sitemap Explorer. ──────────────────────────────────── ⚡ PERFORMANCE & WEB VITALS ──────────────────────────────────── Measure what Google measures. See LCP, CLS, INP, TTFB and FCP with Good / Needs Improvement / Poor ratings. Identify render-blocking scripts, oversized resources, JS heap usage and DOM complexity — all without leaving the page. ──────────────────────────────────── 🎨 COLOUR TOOLS ──────────────────────────────────── Pick any colour from the page with the built-in eyedropper. Convert instantly between HEX, RGB, HSL and OKLCH. Check WCAG AA/AAA contrast ratios. Generate palettes. Extract every colour and CSS variable used on the current page. ──────────────────────────────────── 🔌 REST API TESTER ──────────────────────────────────── A full REST client inside the sidebar. Send GET, POST, PUT, DELETE, PATCH and more. Organise requests into collections and folders. Define environments with variables ({{baseUrl}}). Supports Bearer, Basic and API Key auth. Import and export Postman-compatible collections. ──────────────────────────────────── 📱 MULTI-DEVICE PREVIEW ──────────────────────────────────── See any website on 30+ preset devices simultaneously, with synchronised scrolling and navigation. Add custom devices and adjust zoom. Bypasses X-Frame-Options restrictions. ──────────────────────────────────── 📐 DESIGN & LAYOUT TOOLS ──────────────────────────────────── Pixel-perfect rulers with drag-and-drop alignment guides (custom colour). Column and baseline grid overlays. Pixel-perfect image overlay for design comparison. Element distance measurement. DOM X-Ray mode. ──────────────────────────────────── 🩺 DIAGNOSTICS ──────────────────────────────────── Eight live diagnostic panels: JavaScript error console with stack traces, network request monitor, cookie editor, localStorage / sessionStorage / IndexedDB browser, event listener inspector, HTTP redirect chain, DNS lookup (10 record types) and automatic tech-stack detector. ──────────────────────────────────── 🔧 DEVELOPER UTILITIES ──────────────────────────────────── JSON formatter and validator · JWT decoder · Base64 encode/decode · URL encoder · Hash generator (MD5, SHA-1, SHA-256) · Markdown preview · Regex tester · Text diff · Unix timestamp converter · UUID generator · Password generator · Pomodoro timer · Snippets manager · Todo list with agenda. ──────────────────────────────────── ✅ FREE, PRIVATE & OPEN ──────────────────────────────────── • No account required • No data sent to external servers • No tracking or analytics • All processing happens locally in your browser • Available in English, Portuguese and Spanish