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 UI compleja? El Detector de Componentes responde ambas preguntas al instante. Escanea la página en busca de firmas específicas del framework (nodos fiber de React, instancias de componentes Vue, marcadores de zona Angular, metadatos de componentes Svelte) e identifica el framework, su versión y el árbol de componentes completo. Para React y Vue, va más allá — mostrando los valores de props y estado de los componentes para que puedas entender qué datos impulsan cada parte de la UI. Haz clic en cualquier componente del árbol para resaltar el elemento 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 página como un panel flotante ligero.
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 39 herramientas de desarrollador para tu navegador.
