Extensión Chrome · Gratis · Sin cuenta
El panel de desarrollo
que faltaba
en Chrome
Inspector, SEO, Colors, Performance, Design, API Tester, Diagnóstico y 40+ utilidades en un panel lateral que permanece visible mientras navegas.
✓ Gratis
✓ Sin cuenta
✓ Sin telemetría
✓ PT · EN · ES
✓ Tema claro y oscuro
5
Paneles especializados
40+
Utilidades integradas
8
Idiomas
0
Recopilación de datos
100%
Gratuito
Funcionalidades
8 paneles. 40+ herramientas. Un único panel.
Cada pestaña de Devtools Web Studio es un panel especializado. Instálalo una vez y tendrás todo integrado: Inspector, SEO, Colors, Performance, Design, API Tester, Diagnóstico y más utilidades.
Inspector
Inspecciona elementos, estilos y metadatos de la página sin salir del panel lateral.
SEO
Comprueba meta tags, Open Graph, Twitter Card, schema.org y mucho más.
Colors
Extrae colores, comprueba el contraste y convierte entre formatos de color.
Performance
Audita los recursos de carga: prefetch, lazy load, compresión y más.
Design & Layout
Mide distancias, visualiza la estructura con X-Ray y superpone grids.
API Tester
Cliente REST completo con colecciones, entornos y visualización de respuesta.
Diagnóstico
Inspecciona cabeceras HTTP, cookies, stack tecnológico y errores JS en tiempo real.
Utilidades
Formateador de código, snippets, reemplazador de imágenes, todo, pomodoro y 40+ herramientas más.
🔍 Tab: Inspector
Web Studio Inspector: panel lateral en acción
Inspecciona cualquier elemento sin abrir el DevTools nativo. Haz clic en un elemento de la página y ve inmediatamente sus estilos, atributos y box model en el panel lateral.
Element Inspector
Estilos, atributos y box model
Haz clic en cualquier elemento de la página para inspeccionar sus estilos CSS computados, atributos HTML y dimensiones exactas del box model — todo sin abrir el DevTools nativo de Chrome.
- Estilos CSS computados del elemento seleccionado
- Atributos HTML y valores en tiempo real
- Box model con margin, border, padding y content
- Dimensiones y posición exactas del elemento
- Navegación por los elementos padre e hijo
- Copia el selector CSS o XPath del elemento
Page Meta
Verificación rápida del SEO
Accede rápidamente a la información meta esencial de la página activa sin necesidad de abrir las herramientas de desarrollo.
- Title
- Meta description
- Canonical URL
- Viewport
- Charset
- Language
Font Inspector
Identifica las fuentes usadas en cualquier elemento
Selecciona cualquier elemento de texto y ve inmediatamente la familia tipográfica, tamaño, peso y line-height aplicados.
Accessibility Audit
Audita automáticamente la accesibilidad de la página
Comprueba los principales problemas de accesibilidad de la página activa según las directrices WCAG.
- Contraste de color
- Textos alternativos
- Jerarquía de encabezados
- Etiquetas de formulario
- ARIA
- Enlaces sin texto ancla
- Atributos de idioma
- Tablas sin encabezados
- Foco visible
Media Explorer
Explora todos los medios de la página
Ve y descarga todas las imágenes, vídeos, audios e iframes de la página activa en un panel organizado.
- Lista todas las imágenes, vídeos y audios de la página
- Filtra por tipo de medio
- Muestra dimensiones y tamaño de cada archivo
- Abre el medio directamente en una nueva pestaña
- Descarga cualquier medio directamente desde el panel
- Copia la URL del medio al portapapeles
🎯 Tab: SEO
SEO completo sin salir de la página
Comprueba meta tags, Open Graph, Twitter Card, canonical, robots y mucho más — directamente en el panel lateral, sin extensiones adicionales.
🏷️
Title & Meta Description
Título, descripción y keywords con verificación de límites de caracteres y píxeles.
📤
Open Graph (OG)
Vista previa del card social con imagen, título, descripción y URL.
🐦
Twitter Card
Comprueba el card de Twitter con todos los campos obligatorios y opcionales.
🔗
Canonical & Robots
Canonical URL, meta robots, X-Robots-Tag y verificación de indexación.
📋
Schema.org
Detecta y valida JSON-LD, Microdata y RDFa con propiedades obligatorias por tipo.
📑
Mapa de encabezados
Mapa visual de la jerarquía H1–H6 con detección de saltos y encabezados vacíos.
🖼️
Imágenes & Enlaces
Lista imágenes sin ALT y enlaces sin texto ancla para corrección rápida.
🔄
Re-scan
Vuelve a escanear la página tras cambios en el contenido para actualizar los resultados.
Escaneo automático al abrir la pestaña. Haz clic en Re-scan tras cambios en el contenido para actualizar los resultados.
🎨 Tab: Colors
Conversión entre formatos de color
Convierte, extrae y comprueba colores directamente en la página. Un selector de color integrado con conversión instantánea entre todos los formatos.
Color Picker
Selector de color con conversión instantánea
Elige cualquier color y conviértelo automáticamente entre HEX, RGB, HSL, OKLCH y otros formatos — con vista previa en tiempo real.
- Copia cualquier formato con un clic
- Vista previa en tiempo real mientras ajustas los valores
- Historial de los colores más recientes
- Alterna los datos entre RGB y hexadecimal
- Compatible con variables CSS personalizadas
Page Colors
Verificación automática de colores de la página y contraste
Extrae y verifica automáticamente todos los colores presentes en la página, incluyendo variables CSS, y evalúa el contraste según las normas WCAG.
- Vista previa en tiempo real mientras ajustas los valores de contraste
- Comprueba todas las variables de color del sitio
- Previsualiza cómo quedaría el sitio forzando el modo oscuro
- Alterna los datos entre RGB y hexadecimal (#7c3aed → rgb(124, 58, 237))
- Modos de modo oscuro distintos: CSS Invert, selectores para Tailwind, Bootstrap o DaisyUI
- Informe de contraste con clasificación WCAG AA y AAA
⚡ Tab: Performance
Audita el rendimiento de carga de la página
Identifica recursos que se pueden optimizar para mejorar el tiempo de carga: prefetch, preconnect, lazy loading, compresión y más.
🔌
DNS Prefetch
Detecta hints faltantes para dominios externos críticos.
⚡
Preconnect
Comprueba las conexiones TCP/TLS anticipadas para recursos de terceros.
🖼️
Lazy Load
Lista imágenes sin atributo loading="lazy" que pueden ralentizar la carga.
📦
Compresión
Comprueba si los recursos de texto están comprimidos con gzip o brotli.
🔡
Font Display
Comprueba font-display para evitar FOIT y FOUT al cargar fuentes.
💡
Sugerencias
Recomendaciones prácticas para mejorar los Core Web Vitals de la página.
Todas las métricas se miden directamente desde la Performance API del navegador — sin servidores externos.
📐 Tab: Design & Layout
Design Overlay y herramientas de alineación
Comprueba espaciados, alinea elementos con precisión píxel a píxel y visualiza la estructura de la página de forma diferente.
Reglas y alineación
Alinea con precisión píxel a píxel
Reglas persistentes en los bordes de la página, con marcadores de posición y guías de alineación que permanecen visibles mientras navegas.
- Reglas horizontales y verticales persistentes
- Guías de alineación arrastrables
- Resaltado de márgenes y padding de elementos
- Modo de comparación lado a lado
- Captura de pantalla con anotaciones
- Ajuste automático a la cuadrícula
Element Distance & Manual Measure
Mide distancias y dimensiones de elementos
Mide la distancia entre dos elementos o puntos de la página con precisión de píxel.
- Haz clic en dos elementos para medir la distancia entre ellos
- Muestra la distancia en píxeles y en rem
- Modo de regla manual para medir áreas personalizadas
- Exporta las mediciones para referencia futura
X-Ray Overlay
Visualiza la estructura de la página de otra forma
Activa diferentes modos de visualización de la página para identificar problemas de diseño y estructura de forma rápida e intuitiva.
- Blue Outline: Resalta todos los elementos con contorno azul
- Grayscale: Convierte la página a escala de grises
- Box Outline: Muestra las box boundaries de todos los elementos
- Heatmap: Mapa de calor de elementos por densidad
- Interactive: Resalta los elementos interactivos (clicables)
Responsive & Grid
Grid, breakpoints y Pixel Perfect
Superpone una cuadrícula de diseño en la página, visualiza los breakpoints activos y compara el layout con el mockup original.
- Grid Overlay: Cuadrícula personalizada con columnas, gutter y offset configurables
- Breakpoint Badge: Muestra el breakpoint activo en la esquina de la página
- Pixel Perfect: Superpone el mockup original para comparación visual
Multi-device Preview
Ve tu sitio en varios dispositivos simultáneamente
Simula el aspecto del sitio en varios tamaños de pantalla al mismo tiempo — útil para comprobar layouts responsivos sin redimensionar el navegador.
- Móvil: 375px — iPhone SE
- Móvil L: 425px — iPhone Plus
- Tablet: 768px — iPad
- Portátil: 1024px — Laptop HD
- Escritorio: 1440px — Desktop completo
- Throttle: Simula internet lenta: 2G, Slow 3G, Fast 3G o 4G
🚀 Tab: API Tester
Cliente REST completo, en el panel lateral o en ventana
Prueba APIs REST directamente en el navegador, sin instalar herramientas externas. Admite todos los métodos HTTP, cabeceras, body y autenticación.
Organización
Colecciones, carpetas y peticiones
Organiza tus peticiones API en colecciones y carpetas. Importa colecciones de Postman y guarda los resultados para consulta futura.
- Crea colecciones y organiza peticiones en carpetas
- Importa y exporta colecciones en formato Postman
- Duplica peticiones con un clic
- Historial de peticiones recientes
- Filtra peticiones por método o nombre
- Autenticación por petición o heredada de la colección
- Edita fácilmente los entornos del proyecto en cualquier momento
Environments
Variables por entorno
Define variables para cada entorno (dev, staging, production) y alterna entre ellos sin modificar las peticiones.
- Variables de entorno reutilizables
- Alterna entre entornos con un clic
- Variables globales compartidas entre colecciones
- Autenticación: Inherit from collection
- Autenticación: Bearer Token
- Autenticación: Basic Auth
- Autenticación: API Key
Respuesta
Visor de respuesta avanzado
Visualiza la respuesta de la API en JSON formateado, tabla interactiva o gráfico. Ideal para APIs que devuelven datos estructurados.
- JSON formateado con resaltado de sintaxis
- Vista en tabla para arrays de objetos
- Gráfico de barras para datos numéricos
- Gráfico de líneas para series temporales
- Gráfico circular para distribución de valores
- Código de estado, tiempo de respuesta y tamaño
- Cabeceras de respuesta detalladas
- Copia o exporta la respuesta completa
Autenticación soportada
Bearer Token
Token JWT u OAuth 2.0 — enviado automáticamente en la cabecera Authorization.
Basic Auth
Usuario y contraseña — codificados en Base64 y enviados en la cabecera.
API Key
Clave de API enviada en la cabecera o como parámetro de query string.
Heredar de la colección
La petición hereda automáticamente la autenticación definida en la colección.
Compatible con el formato de colecciones de Postman — importa tus peticiones existentes sin reconfigurar nada.
El CORS Bypass integrado permite probar APIs que bloquean peticiones del navegador sin configuración adicional.
🩺 Tab: Diagnóstico
Diagnóstico completo de la página en tiempo real
Inspecciona cabeceras HTTP, cookies, stack tecnológico, errores JS y mucho más — todo en tiempo real, sin recargar la página.
URLs
Lista todas las URLs cargadas por la página con código de estado y tipo de recurso.
HTTP Headers
Inspecciona todas las cabeceras HTTP de peticiones y respuestas.
Cookies
Lista, filtra y elimina cookies con todos sus atributos.
Stack Detector
Detecta automáticamente frameworks, CMS, analytics y otras tecnologías.
Analytics Tags
Identifica scripts de analytics y marketing presentes en la página.
JS Errors
Captura y lista errores JavaScript en tiempo real mientras navegas.
Live opt-in
Console
Registra mensajes del console.log en tiempo real en el panel lateral.
Live opt-in
Event Listeners
Lista todos los event listeners registrados en los elementos de la página.
Comprueba el certificado SSL y 10 tipos de registro DNS
Consulta cualquier dominio via DNS over HTTPS directamente en el navegador — sin apps externas, sin terminal.
A
Dirección IPv4 del servidor
AAAA
Dirección IPv6 del servidor
CNAME
Alias para otro dominio
NS
Servidores de nombres autoritativos
MX
Servidores de correo
TXT
Registros de texto (SPF, verificación de dominio)
SOA
Start of Authority — información administrativa
CAA
Autoridades de certificación permitidas
SPF
Política de envío de email (via TXT)
DMARC
Política de autenticación de email
Los registros de JS Errors y Console funcionan en modo opt-in: actívalos cuando los necesites y desactívalos para no consumir recursos innecesarios.
Utilidades
40+ utilidades integradas
Además de los 8 paneles principales, Web Studio incluye más de 40 utilidades para las tareas del día a día de un desarrollador web.
Resources
Lista todos los recursos cargados por la página: scripts, estilos, imágenes y fuentes.
Code Formatter
Formatea y valida código HTML, CSS, JavaScript y JSON directamente en el panel.
Sitemap Viewer
Visualiza el sitemap XML del sitio actual de forma estructurada.
Network Throttle
Simula conexiones lentas: 2G, Slow 3G, Fast 3G o 4G para probar la carga.
Image Replacer
Reemplaza imágenes de la página por otras para probar layouts sin modificar el código.
Media Downloader
Descarga todas las imágenes y vídeos de la página con un clic.
Snippets
Guarda y ejecuta snippets de JavaScript reutilizables en cualquier página.
Todo
Lista de tareas integrada en el panel para anotar lo que hay que hacer mientras desarrollas.
Pomodoro
Temporizador Pomodoro integrado para gestionar el enfoque y los descansos durante el trabajo.
Eraser
Elimina elementos de la página temporalmente para ver el layout sin ellos.
CORS Bypass
Desactiva las restricciones CORS del navegador para probar APIs que bloquean peticiones directas.
Menú contextual
Accede rápidamente a herramientas de diagnóstico con el botón derecho del ratón en cualquier elemento.
Sincronización
Tus preferencias, en cualquier ordenador
Web Studio sincroniza automáticamente tu configuración, colecciones de API y snippets via Google Chrome Sync — sin crear cuenta, sin contraseña.
Sin instalación adicional
No es necesario crear cuenta ni instalar aplicaciones adicionales.
Multi-dispositivo
Tus preferencias están disponibles en todos los ordenadores donde uses Chrome.
Sincronización automática
Cualquier cambio en la configuración se sincroniza automáticamente via Google Chrome Sync.
Export/Import
Exporta e importa tus colecciones de API y configuraciones manualmente.
Privacidad
La sincronización la gestiona la infraestructura de Google. Web Studio no accede ni almacena tus datos.
Sin conexión
Todas las herramientas funcionan sin conexión a internet — excepto el DNS over HTTPS.
Qué se sincroniza via Google Chrome Sync:
✓ Preferencias y tema
✓ Colecciones de API
✓ Entornos y variables
✓ Snippets de código
✓ Configuración de colores
✓ Guías de alineación
✓ Lista de tareas
✓ Configuración de la cuadrícula
Cómo empezar
Empieza en menos de 30 segundos
Instala, abre el panel lateral y empieza a trabajar. Sin configuración, sin cuenta, sin recopilación de datos.
1
Instala en Chrome
Ve a la Chrome Web Store, haz clic en "Añadir a Chrome" y confirma la instalación.
2
Abre el panel lateral
Haz clic en el icono de Web Studio en la barra de extensiones de Chrome para abrir el panel lateral.
3
Navega a cualquier sitio
El panel permanece visible mientras navegas — no necesitas reabrirlo para cada página.
4
Elige el panel que necesitas
Usa las 8 pestañas para alternar entre Inspector, SEO, Colors, Performance, Design, API Tester, Diagnóstico y Utilidades.
Privacidad
Tus datos se quedan en tu navegador
Devtools Web Studio se desarrolló con privacidad por defecto. No recopilamos datos, no tenemos servidores y no necesitamos cuenta.
📊 Sin recopilación de datos
✓ Ningún dato recopilado
Web Studio no envía ninguna información a servidores externos. Todas las operaciones se realizan localmente en tu navegador.
💾 Qué se almacena localmente
Tus preferencias y colecciones se guardan en el storage de Chrome — nunca en nuestros servidores.
- Preferencias: Tema, idioma y configuración de paneles
- Colecciones API: Peticiones, cabeceras y entornos guardados
- Snippets: Código JavaScript reutilizable
- Lista de tareas: Tareas guardadas localmente
- Grid & Guías: Configuración de diseño guardada
- Sincronización: Via Google Chrome Sync (opcional)
🌐 Peticiones externas (opt-in)
Algunas funcionalidades realizan peticiones a servicios externos — siempre que tú inicias la acción:
- DNS over HTTPS: consultas DNS via dns.google (solo cuando usas la pestaña Diagnóstico > DNS)
- API Tester: las peticiones las realiza tu navegador al endpoint que eliges
- Verificación SSL: realizada localmente a través de la API de Chrome
Web Studio no realiza ninguna petición en segundo plano sin tu acción explícita.
🔐 Sin cookies de rastreo
La extensión no usa cookies de terceros, píxeles de rastreo, fingerprinting ni ninguna otra técnica de identificación.
🔓 Código abierto y auditable
El código de la extensión se puede inspeccionar directamente en Chrome en chrome://extensions → Detalles → Inspeccionar vistas.
⚙️ Permisos necesarios
| Permiso | Para qué |
|---|---|
| sidePanel | Mostrar el panel lateral de Web Studio |
| activeTab | Acceder al contenido de la pestaña activa para inspección |
| scripting | Inyectar scripts de inspección en las páginas |
| storage | Guardar preferencias y colecciones en el navegador |
| contextMenus | Menú contextual con el botón derecho del ratón |
| webRequest | Monitorizar peticiones de red de la página |
| declarativeNetRequest | Implementar CORS bypass de forma declarativa |
| debugger | Acceder a la consola y eventos de JS en tiempo real |
¿Listo para empezar?
Instala Devtools Web Studio
Gratis. Sin cuenta. Sin recopilación de datos. Un panel, todo lo que necesitas.
Añadir a Chrome — Gratis