Komponentdetektoren identificerer automatisk, hvilken frontend-framework et websted bruger, og afslører dets komplette komponenttræ. Se React-, Vue-, Angular- og Svelte-komponentnavne, deres props/state-værdier og indlejringshierarkiet — alt fra et enkelt inspektionspanel.
Har du noen gang lurt på hvilket framework et nettsted er bygget med? Eller ønsket å se hvordan et komplekst brukergrensesnitt er delt opp i komponenter? Component Detector svarer på begge spørsmålene umiddelbart. Verktøyet skanner siden etter framework-spesifikke signaturer (React fiber-noder, Vue-komponentinstanser, Angular zone-markører, Svelte-komponentmetadata) og identifiserer frameworket, versjonen og hele komponenttreet. For React og Vue går det enda lenger — det viser komponentenes props og state-verdier, slik at du forstår hvilke data som driver hver del av brukergrensesnittet.
Klikk på en hvilken som helst komponent i treet for å markere det tilsvarende DOM-elementet på siden, eller klikk på et element på siden for å finne komponenten i treet. Det er som React DevTools eller Vue DevTools, men innebygd i siden din som et lettvekts flytende panel som fungerer uten at du må installere en egen framework-spesifikk utvidelse for hvert prosjekt du ser på.
Deteksjonen fungerer selv på minifiserte, produksjonsbygde nettsteder der komponent- og variabelnavn er gjort uleselige — verktøyet ser etter strukturelle signaturer i stedet for å basere seg på lesbar kildekode, og det er derfor det fortsetter å fungere på sider som aldri har levert en source map. Utover de fire store frameworkene gjenkjenner det også meta-frameworks lagt oppå, som Next.js og Nuxt, og rapporterer dem som et eget lag atskilt fra det underliggende React- eller Vue-runtimet. Dette gjør det til et raskt første steg når du havner i en ukjent kodebase eller på en konkurrents nettsted og trenger å forstå hva du ser på før du dykker dypere.
Registrerer React (inkl. Next.js, Gatsby, Remix), Vue (inkl. Nuxt), Angular, Svelte (inkl. SvelteKit), Preact, Solid og andre frameworks automatisk. Viser frameworkets navn, det nøjagtige versionsnummer og gengivelsestilstand (client-side, SSR eller hybrid).
Gengiver det komplette komponenthierarki i en sammenklappelig trævisning. Se, hvordan den øverste App-komponent indeholder en Navbar, som indeholder NavLinks, som indeholder individuelle Link-komponenter. Indlejringsdybden og forælder-barn-relationerne er krystalklare.
For React- og Vue-komponenter kan du se de aktuelle props- og state-værdier, der sendes til hver komponent. Se, at Dashboard-komponenten modtager title="Oversigt", loading=false og columns=2. Uvurderlig til forståelse af dataflow.
Klik på en komponent i trærpanelet for at fremhæve dens tilsvarende DOM-element på siden med et farvet overlay. Eller klik på et element på siden for at finde og vælge dens overordnede komponent i træet. Navigér i den retning, der er naturlig.
Se det samlede antal komponenter gengivet på siden, hvor mange der er unikke vs. gentagne instanser, og hvilke komponenter der optræder hyppigst. Nyttigt til forståelse af sidekompleksitet og identifikation af genbrugsmønstre.
Registrerer frameworks selv på minificerede produktionsbuilds. Reacts fibertræ, Vues __vue__-markører og Angulars ng-attributter bevares i produktionstilstand — Komponentdetektoren læser dem uanset build-konfiguration.
Besøg et websted og vid øjeblikkeligt, om det er bygget med React, Vue, Angular eller Svelte — inklusive den nøjagtige version. Kombiner med Site Stack for en komplet teknologirevision inkl. CDN, analyseværktøjer og CMS-oplysninger.
Studér, hvordan produktionsapplikationer dekomponerer deres UI i komponenter. Se, hvordan Stripe strukturerer sin prissætningsside, hvordan Linear organiserer sit dashboard, eller hvordan en velbygget app adskiller layout, navigation og indhold i komponenter.
Gengives en komponent ikke korrekt? Inspicér dens props og state for at se, hvilke data den faktisk modtager. Sammenlign forventede værdier med faktiske værdier for at identificere, hvor dataflowet bryder — uden console.log-sætninger.
Forbereder du dig til en frontend-jobsamtale? Gennemse produktionssider for at se virkelige komponentmønstre — container/præsentationsopdeling, render prop-brug, kontekstudbydere og HOC-indpakninger er alle synlige i komponenttræet.
Besøg lignende produkter bygget med forskellige frameworks og sammenlign deres komponentstrukturer. Se, hvordan en React-app vs. en Vue-app håndterer det samme UI-mønster — navigation, formularer, datatabeller, modaler — og forstå de arkitektoniske forskelle.
Åbn den flydende dock i DevSuite Pro og klik på ikonet Komponentdetektor. Værktøjet scanner sidens DOM for framework-specifikke markører og opbygger komponenttræet.
Panelheaderen viser det registrerede framework (React, Vue, Angular, Svelte), dets version og gengivelsestilstanden. Hvis ingen framework registreres, rapporteres siden som vanilla HTML/CSS/JS.
Udvid og skjul komponenter i træet for at udforske hierarkiet. Komponentnavne vises med deres indlejringsdybde angivet med indrykning. Gentagne komponenter viser et instansantal.
Klik på en komponent i træet for at se dens aktuelle props- og state-værdier i detaljesektionen nedenfor. For React: props, state og hooks. For Vue: props, data og beregnede egenskaber.
Klik på en komponent for at fremhæve dens tilsvarende DOM-element på siden med en farvet kant og halvgennemsigtigt overlay. Klik på et element på siden for at finde det i træet.
Installer DevSuite Pro gratis og lås opp 64+ utviklerverktøy for nettleseren din.
