Más de 39 herramientas potentes para inspeccionar, medir, capturar, analizar y diseñar páginas web directamente en tu navegador.
Empezar es sencillo. Instala la extensión en Chrome, Firefox o Edge — abre cualquier página web y accede a más de 39 herramientas de desarrollador desde la ventana emergente o el panel flotante. No requiere configuración.
DevSuite Pro ofrece más de 39 herramientas de desarrollador para inspección de páginas, medición, diseño y análisis. Acelera tu flujo de trabajo con potentes funciones integradas directamente en tu navegador.
Pasa el ratón sobre cualquier elemento para ver instantáneamente sus estilos CSS y editarlos en vivo, facilitando la depuración y el ajuste de diseños en tiempo real.
Saber más →Haz clic en cualquier elemento para inspeccionar sus propiedades, dimensiones, espaciados, fuentes y colores. Entiende la estructura de la página al instante sin abrir las DevTools del navegador.
Mide distancias, comprueba la alineación y añade reglas y guías con precisión de píxel a cualquier página web para asegurar que tu diseño esté perfectamente alineado.
Elige colores de cualquier elemento de la página y copia los valores HEX, RGB o HSL a tu portapapeles con un solo clic.
Toma capturas de pantalla de toda la página o del área visible de cualquier página web y descárgalas al instante; ideal para compartir diseños y reportar errores.
Previsualiza la página web en diferentes tamaños de pantalla y resoluciones de dispositivos para probar el diseño responsivo sin salir del navegador.
Inspección y edición de estilos CSS en vivo
Depura y Controla Animaciones CSS en Tiempo Real
Convierte el CSS de Cualquier Elemento a Clases de Utilidad Tailwind
Visualiza la Estructura de Diseño Completa de Cualquier Página
Obtén Clases Tailwind Categorizadas para Cualquier Elemento
Vista de Árbol HTML Visual en Superposición sobre Cualquier Página Web
Detecta Componentes React, Vue, Angular y Svelte en Cualquier Sitio
Arrastra y Suelta para Reposicionar Cualquier Elemento en una Página
Elimina o Alterna la Visibilidad de Cualquier Elemento
Exporta Cualquier Elemento como HTML, CSS o JSON
Genera Componentes React, Vue y Svelte desde Cualquier Elemento
Captura Área Visible o Capturas de Página Completa
Ve, Selecciona y Descarga Todas las Imágenes de Cualquier Página Web
Encuentra, Previsualiza y Descarga Cada SVG de Cualquier Página
Intercambia Cualquier Imagen de una Página con la Tuya
Genera Códigos QR para Cualquier URL o Texto al Instante
Reglas, Guías y Mediciones Pixel-Perfect en Cualquier Página
Previsualiza Múltiples Viewports de Dispositivos Simultáneamente
Mide Distancias Exactas en Píxeles Entre Dos Elementos Cualesquiera
Visualiza Cada Contexto de Apilamiento y Capa Z-Index
Inspecciona Diseños CSS Grid y Flexbox con Superposiciones Visuales
Simula Puntos Calientes de Atención del Usuario en Cualquier Página
Borra Selectivamente Caché, Cookies, localStorage y sessionStorage
Detecta Cada Tecnología Detrás de Cualquier Sitio Web
Auditoría SEO Completa: Meta Tags, Encabezados, OpenGraph y Más
Auditoría WCAG Automatizada: Contraste, Texto Alt, ARIA y Más
Haz Clic en Cualquier Texto de Cualquier Página para Editarlo al Instante
Intercambia Cualquier Fuente Global o por Elemento desde Google Fonts
Descubre Cada Fuente Usada en Cualquier Página Web
Cuentagotas de Precisión para Valores de Color HEX, RGB y HSL
Extrae la Paleta de Colores Completa de Cualquier Página Web
Aplica Modo Oscuro a Cualquier Sitio Web al Instante
Habilita o Deshabilita JavaScript al Instante por Pestaña
Ve, Edita, Añade y Elimina Cookies para Cualquier Dominio
Ve la Salida de la Consola en un Panel Flotante — Sin DevTools
Monitorea Todas las Solicitudes de Red en Tiempo Real
Ve, Edita, Añade y Elimina localStorage y sessionStorage
Escanea Cada Enlace de una Página y Encuentra los Rotos
Dashboard de Rendimiento Instantáneo: Tiempo de Carga, Estadísticas DOM y Recursos
Formatea, Minifica y Valida JSON con un Clic
Codifica y Decodifica Cadenas a/desde Base64 Instantáneamente
Codifica y Decodifica Cadenas de URL con un Clic
Codifica y Decodifica Entidades HTML al Instante
Escapa y Desescapa Cadenas para Código
Convierte Imágenes a y desde URIs de Datos Base64
Decodifica JSON Web Tokens al Instante
Genera Identificadores UUID v4 en Bloque
Calcula Hashes MD5, SHA-1, SHA-256, SHA-384, SHA-512
Genera Contraseñas Criptográficamente Fuertes
Prueba Expresiones Regulares en Vivo con Resaltado de Coincidencias
Convierte Fechas Unix, ISO y Legibles por Humanos
Compara Dos Bloques de Texto Línea por Línea
Verifica la Relación de Contraste WCAG de Cualquier Par de Colores
Convierte HEX, RGB, HSL, HSV y OKLCH al Instante
Extrae la Paleta Dominante de Cualquier Imagen
Obtén Selectores CSS y XPath para Cualquier Elemento
Prueba Solicitudes de Origen Cruzado e Inspecciona Cabeceras CORS
Captura Tramas de WebSocket en Tiempo Real
Escanea la Página en Busca de Imágenes Rotas al Instante
Auto-rellena Formularios con Datos de Prueba Realistas
Convierte entre CSV y JSON en Cualquier Dirección
Formatea, Valida y Visualiza XML con Resaltado de Sintaxis
Embellece y Formatea Consultas SQL
Guarda Páginas Web como PDFs Limpios
Elige el mejor plan para tu flujo de trabajo. Empieza gratis, mejora en cualquier momento.
Preguntas frecuentes sobre las funciones y el uso de la extensión DevSuite Pro. Si tienes alguna duda, la respuesta podría estar a continuación.
Visita la Chrome Web Store, busca "DevSuite Pro", haz clic en "Añadir a Chrome" y confirma seleccionando "Añadir extensión". Una vez instalada, el icono de la extensión aparecerá en la barra de herramientas del navegador. Haz clic en él para acceder a más de 39 herramientas de desarrollador al instante.
Las herramientas gratuitas (20+) están disponibles para todos sin licencia. Las herramientas Pro llevan una insignia PRO dorada y requieren una licencia Pro activa para su uso. Puedes ver qué herramientas son gratuitas o Pro en la ventana emergente: las herramientas gratuitas no tienen icono de candado, mientras que las herramientas Pro aparecerán ligeramente atenuadas hasta que actives tu licencia.
Algunos sitios web tienen políticas de seguridad de contenido (CSP) estrictas que bloquean ciertas acciones de las extensiones del navegador. Esto es especialmente común en sitios web bancarios y gubernamentales. Además, las páginas internas de Chrome (chrome://) no permiten que las extensiones ejecuten scripts de contenido.
No. Todos los cambios realizados por herramientas como Mover elemento, Editor de texto en vivo, Eliminar/Ocultar elemento y CSS Inspector son temporales. Solo afectan a lo que ves en tu navegador en este momento. Refrescar la página lo devolverá todo a su estado original.
Abre la ventana emergente de DevSuite Pro, haz clic en el icono de Configuración en la esquina superior derecha. Baja hasta la sección de licencia, pega tu clave de licencia en el campo de entrada y haz clic en Activar. Si la clave es válida, la insignia cambiará de GRATIS a PRO y todas las herramientas Pro se desbloquearán al instante.
Puedes mover el panel yendo a Configuración y eligiendo una posición de barra lateral diferente: arriba, abajo, izquierda o derecha. También puedes ocultar completamente el panel desactivando el interruptor "Mostrar panel en las páginas" en Configuración o presionando Ctrl+Shift+X en cualquier momento.
No. DevSuite Pro no recopila, rastrea ni transmite ninguno de tus datos de navegación. Todos los ajustes se guardan localmente en tu navegador. La única petición externa se realiza durante la activación de la clave de licencia para verificarla con nuestro servidor.
¡Sí! DevSuite Pro está disponible tanto en la Chrome Web Store como en Firefox Add-ons. Funciona en Chrome, Edge, Brave y otros navegadores basados en Chromium, así como en Firefox.
