El Detector de Componentes identifica automáticamente qué framework de frontend usa un sitio web y revela su árbol de componentes completo. Ve nombres de componentes React, Vue, Angular y Svelte, sus valores de props/estado, y la jerarquía de anidamiento — todo desde un único panel de inspección.
¿Alguna vez te has preguntado con qué framework está construido un sitio web? ¿O has querido ver cómo se descompone en componentes una interfaz compleja? Component Detector responde ambas preguntas al instante. Escanea la página en busca de firmas específicas de cada framework (nodos fiber de React, instancias de componentes de Vue, marcadores de zona de Angular, metadatos de componentes de Svelte) e identifica el framework, su versión y el árbol de componentes completo. Para React y Vue va más allá — mostrando las props y los valores de estado de cada componente para que puedas entender qué datos impulsan cada parte de la interfaz.
Haz clic en cualquier componente del árbol para resaltar el elemento del DOM correspondiente en la página, o haz clic en un elemento de la página para localizar su componente en el árbol. Es como React DevTools o Vue DevTools, pero integrado en tu propia página como un panel flotante ligero que funciona sin necesidad de instalar una extensión distinta para cada framework en cada proyecto que analizas.
La detección funciona incluso en sitios minificados y empaquetados para producción, donde los nombres de componentes y variables han sido ofuscados — la herramienta busca firmas estructurales en lugar de depender de código fuente legible, por lo que sigue funcionando en sitios que nunca publicaron un source map. Más allá de los cuatro grandes frameworks, también reconoce meta-frameworks construidos sobre ellos, como Next.js y Nuxt, y los reporta como una capa independiente del runtime subyacente de React o Vue. Esto lo convierte en un primer paso rápido cada vez que llegas a una base de código desconocida o al sitio de un competidor y necesitas entender qué estás viendo antes de profundizar.
Detecta React (incluyendo Next.js, Gatsby, Remix), Vue (incluyendo Nuxt), Angular, Svelte (incluyendo SvelteKit), Preact, Solid y otros frameworks automáticamente. Muestra el nombre del framework, el número de versión exacto y el modo de renderizado (del lado del cliente, SSR o híbrido).
Renderiza la jerarquía de componentes completa en una vista de árbol colapsable. Ve cómo el componente App de nivel superior contiene un Navbar, que contiene NavLinks, que contienen componentes Link individuales. La profundidad de anidamiento y las relaciones padre-hijo son cristalinas.
Para componentes React y Vue, ve los valores actuales de props y estado pasados a cada componente. Ve que el componente Dashboard recibe title="Overview", loading=false y columns=2. Invaluable para entender el flujo de datos.
Haz clic en cualquier componente del panel de árbol para resaltar su elemento DOM correspondiente en la página con una superposición de color. O haz clic en cualquier elemento de la página para encontrar y seleccionar su componente padre en el árbol. Navega en la dirección que sea más natural.
Ve el número total de componentes renderizados en la página, cuántos son únicos frente a instancias repetidas, y qué componentes aparecen con más frecuencia. Útil para entender la complejidad de la página e identificar patrones de reutilización.
Detecta frameworks incluso en compilaciones de producción minificadas. El árbol fiber de React, los marcadores __vue__ de Vue y los atributos ng de Angular persisten en modo de producción — el Detector de Componentes los lee independientemente de la configuración de compilación.
Visita cualquier sitio web y sabe al instante si está construido con React, Vue, Angular o Svelte — incluyendo la versión exacta. Combina con Site Stack para una auditoría tecnológica completa incluyendo CDN, análisis y CMS.
Estudia cómo las aplicaciones de producción descomponen su UI en componentes. Ve cómo Stripe estructura su página de precios, cómo Linear organiza su dashboard, o cómo cualquier app bien construida separa el diseño, la navegación y el contenido en componentes.
¿Un componente no se renderiza correctamente? Inspecciona sus props y estado para ver qué datos está recibiendo realmente. Compara los valores esperados con los valores reales para identificar dónde se rompe el flujo de datos — sin declaraciones console.log.
¿Preparándote para una entrevista de frontend? Navega por sitios de producción para ver patrones de componentes del mundo real — separaciones contenedor/presentacional, uso de render props, proveedores de contexto y envoltorios HOC son todos visibles en el árbol de componentes.
Visita productos similares construidos con diferentes frameworks y compara sus estructuras de componentes. Ve cómo una app React frente a una app Vue aborda el mismo patrón de UI — navegación, formularios, tablas de datos, modales — y entiende las diferencias arquitectónicas.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono del Detector de Componentes. La herramienta escanea el DOM de la página en busca de marcadores específicos del framework y construye el árbol de componentes.
El encabezado del panel muestra el framework detectado (React, Vue, Angular, Svelte), su versión y el modo de renderizado. Si no se detecta ningún framework, informa que la página es HTML/CSS/JS vanilla.
Expande y colapsa componentes en el árbol para explorar la jerarquía. Los nombres de componentes aparecen con su profundidad de anidamiento indicada por sangría. Los componentes repetidos muestran un conteo de instancias.
Haz clic en cualquier componente del árbol para ver sus valores actuales de props y estado en la sección de detalles de abajo. Para React: props, state y hooks. Para Vue: props, data y propiedades computed.
Haz clic en cualquier componente para resaltar su elemento DOM correspondiente en la página con un borde de color y superposición semitransparente. Haz clic en un elemento de la página para localizarlo en el árbol.
Instala DevSuite Pro gratis y desbloquea más de 64 herramientas de desarrollador para tu navegador.
