Komponenten-Detektor identifiziert automatisch, welches Frontend-Framework eine Website verwendet, und zeigt seinen vollständigen Komponentenbaum. Sehen Sie React-, Vue-, Angular- und Svelte-Komponentennamen, ihre Props/State-Werte und die Verschachtelungshierarchie — alles aus einem einzigen Inspektions-Panel.
Haben Sie sich schon einmal gefragt, mit welchem Framework eine Website gebaut wurde? Oder wollten Sie sehen, wie eine komplexe UI in Komponenten zerlegt ist? Component Detector beantwortet beide Fragen sofort. Es durchsucht die Seite nach frameworkspezifischen Signaturen (React-Fiber-Nodes, Vue-Komponenteninstanzen, Angular-Zone-Markierungen, Svelte-Komponenten-Metadaten) und identifiziert das Framework, dessen Version und den vollständigen Komponentenbaum. Bei React und Vue geht es noch weiter – es zeigt Komponenten-Props und State-Werte an, sodass Sie verstehen, welche Daten jeden Teil der UI steuern.
Klicken Sie auf eine Komponente im Baum, um das entsprechende DOM-Element auf der Seite hervorzuheben, oder klicken Sie auf ein Element auf der Seite, um dessen Komponente im Baum zu finden. Es funktioniert wie React DevTools oder Vue DevTools, ist aber als leichtgewichtiges, frei schwebendes Panel direkt in Ihre Seite eingebaut – ohne dass Sie für jedes Projekt, das Sie sich ansehen, eine separate frameworkspezifische Erweiterung installieren müssen.
Die Erkennung funktioniert selbst auf minifizierten, produktionsgebündelten Websites, bei denen Komponenten- und Variablennamen verschleiert wurden – das Tool sucht nach strukturellen Signaturen, statt sich auf lesbaren Quellcode zu verlassen, weshalb es auch auf Seiten funktioniert, die nie eine Source Map ausgeliefert haben. Über die vier großen Frameworks hinaus erkennt es auch darüber liegende Meta-Frameworks wie Next.js und Nuxt und meldet sie als separate Schicht getrennt vom zugrunde liegenden React- oder Vue-Runtime. Das macht es zu einem schnellen ersten Schritt, wenn Sie auf eine unbekannte Codebasis oder die Website eines Mitbewerbers stoßen und verstehen müssen, womit Sie es zu tun haben, bevor Sie tiefer eintauchen.
Erkennt React (einschließlich Next.js, Gatsby, Remix), Vue (einschließlich Nuxt), Angular, Svelte (einschließlich SvelteKit), Preact, Solid und andere Frameworks automatisch. Zeigt den Framework-Namen, die genaue Versionsnummer und den Rendering-Modus (clientseitig, SSR oder hybrid).
Rendert die vollständige Komponentenhierarchie in einer ein-/ausklappbaren Baumansicht. Sehen Sie, wie die App-Komponente der obersten Ebene eine Navbar enthält, die NavLinks enthält, die einzelne Link-Komponenten enthalten. Die Verschachtelungstiefe und Eltern-Kind-Beziehungen sind kristallklar.
Für React- und Vue-Komponenten zeigt es die aktuellen Props- und State-Werte, die an jede Komponente übergeben werden. Sehen Sie, dass die Dashboard-Komponente title=Übersicht, loading=false und columns=2 empfängt. Unschätzbar zum Verstehen des Datenflusses.
Klicken Sie auf eine Komponente im Baum-Panel, um ihr entsprechendes DOM-Element auf der Seite mit einer farbigen Überlagerung hervorzuheben. Oder klicken Sie auf ein Element auf der Seite, um seine übergeordnete Komponente im Baum zu finden und auszuwählen. Navigieren Sie in der Richtung, die natürlicher ist.
Sehen Sie die Gesamtzahl der auf der Seite gerenderten Komponenten, wie viele einzigartige vs. wiederholte Instanzen sind und welche Komponenten am häufigsten vorkommen. Nützlich zum Verstehen der Seitenkomplexität und zur Identifizierung von Wiederverwendungsmustern.
Erkennt Frameworks auch bei minimierten Produktions-Builds. Reacts Fiber-Baum, Vues __vue__-Marker und Angulars ng-Attribute bleiben im Produktionsmodus erhalten — Komponenten-Detektor liest sie unabhängig von der Build-Konfiguration.
Besuchen Sie eine beliebige Website und wissen Sie sofort, ob sie mit React, Vue, Angular oder Svelte gebaut ist — einschließlich der genauen Version. Kombinieren Sie mit Site Stack für eine vollständige Technologie-Prüfung einschließlich CDN, Analytics und CMS-Informationen.
Studieren Sie, wie Produktionsanwendungen ihre Benutzeroberfläche in Komponenten zerlegen. Sehen Sie, wie Stripe seine Preisseite strukturiert, wie Linear sein Dashboard organisiert, oder wie eine gut gebaute App Layout, Navigation und Inhalt in Komponenten trennt.
Eine Komponente rendert nicht korrekt? Inspizieren Sie ihre Props und ihren State, um zu sehen, welche Daten sie tatsächlich empfängt. Vergleichen Sie erwartete Werte mit tatsächlichen Werten, um zu identifizieren, wo der Datenfluss unterbrochen wird — ohne console.log-Anweisungen.
Bereiten Sie sich auf ein Frontend-Interview vor? Durchsuchen Sie Produktionsseiten, um reale Komponentenmuster zu sehen — Container/Präsentations-Aufteilungen, Render-Prop-Verwendung, Context-Provider und HOC-Wrapper sind alle im Komponentenbaum sichtbar.
Besuchen Sie ähnliche Produkte, die mit verschiedenen Frameworks gebaut wurden, und vergleichen Sie ihre Komponentenstrukturen. Sehen Sie, wie eine React-App vs. eine Vue-App dasselbe UI-Muster angeht — Navigation, Formulare, Datentabellen, Modals — und verstehen Sie die architektonischen Unterschiede.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol des Komponenten-Detektors. Das Tool scannt das Seiten-DOM nach framework-spezifischen Markierungen und baut den Komponentenbaum auf.
Der Panel-Header zeigt das erkannte Framework (React, Vue, Angular, Svelte), seine Version und den Rendering-Modus. Wenn kein Framework erkannt wird, meldet es die Seite als Vanilla HTML/CSS/JS.
Klappen Sie Komponenten im Baum auf und zu, um die Hierarchie zu erkunden. Komponentennamen erscheinen mit ihrer Verschachtelungstiefe, die durch Einrückung angezeigt wird. Wiederholte Komponenten zeigen eine Instanzanzahl.
Klicken Sie auf eine Komponente im Baum, um ihre aktuellen Props- und State-Werte im Detailbereich unten zu sehen. Für React: Props, State und Hooks. Für Vue: Props, Daten und berechnete Eigenschaften.
Klicken Sie auf eine Komponente, um ihr entsprechendes DOM-Element auf der Seite mit einem farbigen Rahmen und halbtransparenter Überlagerung hervorzuheben. Klicken Sie auf ein Element auf der Seite, um es im Baum zu finden.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 64+ Entwickler-Tools für Ihren Browser frei.
