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 jemals gefragt, mit welchem Framework eine Website gebaut wurde? Oder wollten Sie sehen, wie eine komplexe Benutzeroberfläche in Komponenten zerlegt wird? Komponenten-Detektor beantwortet beide Fragen sofort. Er scannt die Seite nach framework-spezifischen Signaturen (React Fiber-Knoten, Vue Komponenteninstanzen, Angular Zone-Marker, Svelte Komponenten-Metadaten) und identifiziert das Framework, seine Version und den vollständigen Komponentenbaum. Für React und Vue geht er noch weiter — er zeigt Komponenten-Props und State-Werte, damit Sie verstehen, welche Daten jedes Stück der Benutzeroberfläche antreiben. 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 seine Komponente im Baum zu finden. Es ist wie React DevTools oder Vue DevTools, aber als leichtgewichtiges schwebendes Panel in Ihre Seite eingebaut.
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 39+ Entwickler-Tools für Ihren Browser frei.
