Component Detector identifie automatiquement quel framework frontend un site web utilise et révèle son arborescence de composants complète. Visualisez les noms des composants React, Vue, Angular et Svelte, leurs valeurs de props/state et la hiérarchie d'imbrication — le tout depuis un seul panneau d'inspection.
Vous êtes-vous déjà demandé avec quel framework un site web est construit ? Ou voulu voir comment une interface complexe est décomposée en composants ? Component Detector répond instantanément aux deux questions. Il analyse la page à la recherche de signatures spécifiques à chaque framework (nœuds fiber de React, instances de composants Vue, marqueurs de zone Angular, métadonnées de composants Svelte) et identifie le framework, sa version et l'arborescence complète des composants. Pour React et Vue, il va plus loin — affichant les valeurs de props et state des composants afin de comprendre quelles données pilotent chaque partie de l'interface. Cliquez sur n'importe quel composant dans l'arborescence pour mettre en évidence l'élément DOM correspondant sur la page, ou cliquez sur un élément de la page pour localiser son composant dans l'arborescence. C'est comme React DevTools ou Vue DevTools, mais intégré directement à votre page sous forme de panneau flottant léger.
Détecte automatiquement React (y compris Next.js, Gatsby, Remix), Vue (y compris Nuxt), Angular, Svelte (y compris SvelteKit), Preact, Solid et d'autres frameworks. Affiche le nom du framework, le numéro de version exact et le mode de rendu (côté client, SSR ou hybride).
Affiche la hiérarchie complète des composants dans une vue arborescente réductible. Visualisez comment le composant App de premier niveau contient un Navbar, qui contient des NavLinks, qui contiennent des composants Link individuels. La profondeur d'imbrication et les relations parent-enfant sont parfaitement claires.
Pour les composants React et Vue, consultez les valeurs actuelles des props et du state transmis à chaque composant. Voyez que le composant Dashboard reçoit title="Overview", loading=false et columns=2. Indispensable pour comprendre le flux de données.
Cliquez sur n'importe quel composant dans le panneau arborescent pour mettre en évidence son élément DOM correspondant sur la page avec une superposition colorée. Ou cliquez sur n'importe quel élément de la page pour trouver et sélectionner son composant parent dans l'arborescence. Naviguez dans le sens qui vous convient le mieux.
Consultez le nombre total de composants affichés sur la page, combien sont uniques par rapport aux instances répétées, et quels composants apparaissent le plus fréquemment. Utile pour comprendre la complexité de la page et identifier les schémas de réutilisation.
Détecte les frameworks même sur des builds de production minifiés. L'arborescence fiber de React, les marqueurs __vue__ de Vue et les attributs ng d'Angular persistent en mode production — Component Detector les lit quelle que soit la configuration de build.
Visitez n'importe quel site web et sachez instantanément s'il est construit avec React, Vue, Angular ou Svelte — y compris la version exacte. Combinez avec Site Stack pour un audit technologique complet incluant CDN, analytics et informations CMS.
Étudiez comment les applications en production décomposent leur interface en composants. Voyez comment Stripe structure sa page de tarification, comment Linear organise son tableau de bord, ou comment n'importe quelle application bien construite sépare la mise en page, la navigation et le contenu en composants.
Un composant ne s'affiche pas correctement ? Inspectez ses props et son state pour voir quelles données il reçoit réellement. Comparez les valeurs attendues aux valeurs réelles pour identifier où le flux de données se rompt — sans recourir à des instructions console.log.
Vous préparez un entretien front-end ? Parcourez des sites en production pour voir des schémas de composants réels — les séparations conteneur/présentation, l'utilisation des render props, les fournisseurs de context et les wrappers HOC sont tous visibles dans l'arborescence des composants.
Visitez des produits similaires construits avec différents frameworks et comparez leurs structures de composants. Voyez comment une application React et une application Vue abordent le même schéma d'interface — navigation, formulaires, tableaux de données, modales — et comprenez les différences architecturales.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Component Detector. L'outil analyse le DOM de la page à la recherche de marqueurs spécifiques au framework et construit l'arborescence des composants.
L'en-tête du panneau affiche le framework détecté (React, Vue, Angular, Svelte), sa version et le mode de rendu. Si aucun framework n'est détecté, la page est signalée comme HTML/CSS/JS vanilla.
Développez et réduisez les composants dans l'arborescence pour explorer la hiérarchie. Les noms des composants apparaissent avec leur profondeur d'imbrication indiquée par l'indentation. Les composants répétés affichent un nombre d'instances.
Cliquez sur n'importe quel composant dans l'arborescence pour voir ses valeurs actuelles de props et de state dans la section de détails ci-dessous. Pour React : props, state et hooks. Pour Vue : props, data et propriétés calculées.
Cliquez sur n'importe quel composant pour mettre en évidence son élément DOM correspondant sur la page avec une bordure colorée et une superposition semi-transparente. Cliquez sur un élément de la page pour le localiser dans l'arborescence.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
