Más de 64 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 64 herramientas de desarrollador desde la ventana emergente o el panel flotante. No requiere configuración.
DevSuite Pro ofrece más de 64 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.
Saber más →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.
Saber más →Elige colores de cualquier elemento de la página y copia los valores HEX, RGB o HSL a tu portapapeles con un solo clic.
Saber más →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.
Saber más →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.
Saber más →Inspección y edición de estilos CSS en vivo
La herramienta CSS Inspector es una potente herramienta para desarrolladores que te permite ver todas las propiedades…
Depura y Controla Animaciones CSS en Tiempo Real
El Inspector de Animaciones te da control total sobre cada animación CSS y transición que se ejecuta en cualquier página web.
Convierte el CSS de Cualquier Elemento a Clases de Utilidad Tailwind
Copiar como Tailwind elimina la brecha entre el diseño visual y el código Tailwind CSS.
Visualiza la Estructura de Diseño Completa de Cualquier Página
El Modo Solo Contorno añade contornos de borde codificados por color a cada elemento HTML de una página web…
Obtén Clases Tailwind Categorizadas para Cualquier Elemento
El Asistente Tailwind inspecciona cualquier elemento de una página web y genera un desglose completo y categorizado de…
Vista de Árbol HTML Visual en Superposición sobre Cualquier Página Web
El Esquematizador de Página renderiza la estructura DOM completa de cualquier página web como una superposición de…
Detecta Componentes React, Vue, Angular y Svelte en Cualquier Sitio
El Detector de Componentes identifica automáticamente qué framework de frontend usa un sitio web y revela su árbol de…
Arrastra y Suelta para Reposicionar Cualquier Elemento en una Página
Mover Elemento te permite hacer clic en cualquier elemento de una página web y arrastrarlo físicamente a una nueva posición.
Elimina o Alterna la Visibilidad de Cualquier Elemento
Eliminar/Ocultar Elemento te permite quitar u ocultar temporalmente cualquier elemento de una página web con un solo clic.
Exporta Cualquier Elemento como HTML, CSS o JSON
Exportar Elemento te permite hacer clic en cualquier elemento de una página web y exportar su estructura completa en…
Genera Componentes React, Vue y Svelte desde Cualquier Elemento
Copiar Código de Componente transforma cualquier elemento de una página web en un archivo de componente limpio y listo…
Captura Área Visible o Capturas de Página Completa
Captura de Pantalla toma imágenes de alta calidad de cualquier página web en dos modos: área visible (exactamente lo…
Ve, Selecciona y Descarga Todas las Imágenes de Cualquier Página Web
Extraer Imágenes escanea cualquier página web y presenta cada imagen en una galería navegable.
Encuentra, Previsualiza y Descarga Cada SVG de Cualquier Página
El Capturador de SVG descubre cada SVG en una página web — elementos SVG en línea, referencias a archivos .svg…
Intercambia Cualquier Imagen de una Página con la Tuya
El Reemplazador de Imágenes te permite hacer clic en cualquier imagen de una página web y reemplazarla con la tuya — ya…
Genera Códigos QR para Cualquier URL o Texto al Instante
El Generador de Códigos QR crea un código QR escaneable para la URL de la página actual automáticamente — o para…
Reglas, Guías y Mediciones Pixel-Perfect en Cualquier Página
La Regla de Página añade reglas estilo Photoshop y líneas guía arrastrables a cualquier página web.
Previsualiza Múltiples Viewports de Dispositivos Simultáneamente
El Visor Responsivo muestra la página web actual renderizada en múltiples tamaños de viewport de dispositivos lado a…
Mide Distancias Exactas en Píxeles Entre Dos Elementos Cualesquiera
Medir Distancia te permite hacer clic en dos elementos cualesquiera de una página web y ver al instante la distancia…
Visualiza Cada Contexto de Apilamiento y Capa Z-Index
El Inspector de Z-Index revela el orden de apilamiento completo de cada elemento en una página web.
Inspecciona Diseños CSS Grid y Flexbox con Superposiciones Visuales
El Visualizador Grid/Flex detecta cada contenedor CSS Grid y Flexbox en una página web y renderiza su estructura de…
Simula Puntos Calientes de Atención del Usuario en Cualquier Página
El Simulador de Heatmap genera un mapa de calor de atención predicha para cualquier página web basado en patrones…
Borra Selectivamente Caché, Cookies, localStorage y sessionStorage
Borrar Datos de Navegación da a los desarrolladores una forma rápida y selectiva de borrar tipos específicos de datos…
Detecta Cada Tecnología Detrás de Cualquier Sitio Web
Site Stack escanea cualquier sitio web e identifica su stack tecnológico completo — frameworks frontend (React, Vue…
Auditoría SEO Completa: Meta Tags, Encabezados, OpenGraph y Más
El Inspector SEO proporciona una auditoría SEO completa e instantánea de cualquier página web.
Auditoría WCAG Automatizada: Contraste, Texto Alt, ARIA y Más
El Inspector de Accesibilidad ejecuta verificaciones automatizadas WCAG 2.1 Nivel AA en cualquier página web y produce…
Haz Clic en Cualquier Texto de Cualquier Página para Editarlo al Instante
El Editor de Texto en Vivo hace que cada elemento de texto en una página web sea editable con un solo clic.
Intercambia Cualquier Fuente Global o por Elemento desde Google Fonts
El Cambiador de Fuentes te permite reemplazar cualquier fuente en una página web con otra de la biblioteca de Google…
Descubre Cada Fuente Usada en Cualquier Página Web
Listar Todas las Fuentes escanea cualquier página web y presenta un inventario completo de cada familia tipográfica en…
Cuentagotas de Precisión para Valores de Color HEX, RGB y HSL
El Selector de Color proporciona una herramienta de cuentagotas precisa al píxel para elegir colores de cualquier…
Extrae la Paleta de Colores Completa de Cualquier Página Web
Paleta de Colores escanea cada elemento en una página web y extrae el conjunto completo de colores usados — desde texto…
Aplica Modo Oscuro a Cualquier Sitio Web al Instante
Forzar Modo Oscuro aplica un esquema de color oscuro a cualquier sitio web que no ofrezca uno — o anula el tema claro de un sitio.
Habilita o Deshabilita JavaScript al Instante por Pestaña
Alternar JavaScript deshabilita o rehabilita la ejecución de JavaScript para la pestaña actual del navegador con un solo clic.
Ve, Edita, Añade y Elimina Cookies para Cualquier Dominio
El Editor de Cookies muestra todas las cookies del dominio actual en una tabla limpia y ordenable.
Ve la Salida de la Consola en un Panel Flotante — Sin DevTools
El Registrador de Consola captura toda la salida de la consola (console.log, console.warn, console.error, console.info)…
Monitorea Todas las Solicitudes de Red en Tiempo Real
El Monitor de Red captura y muestra cada solicitud de red realizada por la página actual — llamadas API XHR/Fetch…
Ve, Edita, Añade y Elimina localStorage y sessionStorage
El Editor de Local Storage proporciona una interfaz de tabla limpia para gestionar entradas de localStorage y…
Escanea Cada Enlace de una Página y Encuentra los Rotos
El Verificador de Enlaces Rotos escanea cada enlace en la página actual — hrefs de anclas, fuentes de imagen, fuentes…
Dashboard de Rendimiento Instantáneo: Tiempo de Carga, Estadísticas DOM y Recursos
Rendimiento de Página proporciona una visión general instantánea del rendimiento de cualquier página web — métricas de…
Formatea, Minifica y Valida JSON con un Clic
El Formateador JSON embellece, minifica y valida JSON directamente en tu navegador.
Codifica y Decodifica Cadenas a/desde Base64 Instantáneamente
El Codificador/Decodificador Base64 convierte texto a Base64 y Base64 de vuelta a texto directamente en tu navegador.
Codifica y Decodifica Cadenas de URL con un Clic
El Codificador/Decodificador de URL convierte cadenas de URL a y desde su forma codificada por porcentaje.
Codifica y Decodifica Entidades HTML al Instante
El Codificador de Entidades HTML convierte caracteres especiales (< > & " ') a sus equivalentes de entidades HTML (<…
Escapa y Desescapa Cadenas para Código
El Escape/Unescape de Barra Invertida convierte cadenas a y desde su forma escapada (\n \t \r \" \' \\ y escapes Unicode).
Convierte Imágenes a y desde URIs de Datos Base64
Imagen ↔ Base64 convierte archivos de imagen (PNG, JPG, SVG, WebP, GIF) a URIs de datos codificados en Base64 y viceversa.
Decodifica JSON Web Tokens al Instante
El Depurador JWT decodifica e inspecciona JSON Web Tokens — analizando el encabezado, la carga útil y la firma…
Genera Identificadores UUID v4 en Bloque
El Generador de UUID produce identificadores UUID v4 criptográficamente fuertes utilizando la API criptográfica del navegador.
Calcula Hashes MD5, SHA-1, SHA-256, SHA-384, SHA-512
El Generador de Hash calcula hashes criptográficos (MD5, SHA-1, SHA-256, SHA-384, SHA-512) de cualquier entrada de texto.
Genera Contraseñas Criptográficamente Fuertes
El Generador de Contraseñas produce contraseñas fuertes y aleatorias utilizando la API de aleatoriedad criptográfica del navegador.
Prueba Expresiones Regulares en Vivo con Resaltado de Coincidencias
El Probador de Regex evalúa expresiones regulares contra texto de prueba en tiempo real.
Convierte Fechas Unix, ISO y Legibles por Humanos
El Convertidor de Marca de Tiempo traduce entre marcas de tiempo Unix (segundos, milisegundos, microsegundos…
Compara Dos Bloques de Texto Línea por Línea
La Herramienta de Diferencias compara dos bloques de texto y resalta las líneas añadidas, eliminadas y sin cambios con…
Verifica la Relación de Contraste WCAG de Cualquier Par de Colores
El Probador de Contraste calcula la relación de contraste WCAG 2.1 entre dos colores y los califica según los umbrales…
Convierte HEX, RGB, HSL, HSV y OKLCH al Instante
El Convertidor de Formato de Color traduce cualquier color entre HEX, RGB, HSL, HSV y OKLCH.
Extrae la Paleta Dominante de Cualquier Imagen
El Extractor de Color de Imagen analiza cualquier archivo de imagen (soltar, pegar o hacer clic para cargar) y devuelve…
Obtén Selectores CSS y XPath para Cualquier Elemento
El Buscador de Rutas DOM te permite pasar el mouse sobre cualquier elemento de una página para revelar su selector CSS…
Prueba Solicitudes de Origen Cruzado e Inspecciona Cabeceras CORS
El Probador de CORS verifica si una solicitud de origen cruzado desde tu sitio sería permitida por el servidor de destino.
Captura Tramas de WebSocket en Tiempo Real
El Inspector de WebSocket captura cada trama de WebSocket — enviada y recibida — en todas las conexiones de la página.
Escanea la Página en Busca de Imágenes Rotas al Instante
El Buscador de Imágenes Rotas escanea cada <img> e imagen de fondo CSS en la página, detecta cargas fallidas (404…
Auto-rellena Formularios con Datos de Prueba Realistas
El Rellenador de Formularios completa cada campo de formulario visible en la página con datos de prueba realistas…
Convierte entre CSV y JSON en Cualquier Dirección
El Conversor CSV ↔ JSON maneja el ciclo completo entre los dos formatos tabulares más comunes.
Formatea, Valida y Visualiza XML con Resaltado de Sintaxis
El Formateador XML permite embellecer, minificar y validar XML en el navegador.
Embellece y Formatea Consultas SQL
El Formateador SQL transforma consultas SQL minificadas o desordenadas en consultas legibles e indentadas.
Guarda Páginas Web como PDFs Limpios
Convertir a PDF guarda la página web actual como un PDF a través del diálogo de impresión del navegador, aplicando…
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 64 herramientas de desarrollador al instante.
Las herramientas gratuitas (43+) 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.
