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 nogensinde undret dig over, hvilken framework et websted er bygget med? Eller ønsket at se, hvordan en kompleks UI dekomponeres i komponenter? Komponentdetektoren besvarer begge spørgsmål øjeblikkeligt. Den scanner siden for framework-specifikke signaturer (React fiber-noder, Vue komponentinstanser, Angular zone-markører, Svelte komponentmetadata) og identificerer frameworket, dets version og det komplette komponenttræ. For React og Vue går den videre — og viser komponent-props og state-værdier, så du kan forstå, hvilke data der driver hvert stykke af UI. Klik på en komponent i træet for at fremhæve det tilsvarende DOM-element på siden, eller klik på et element på siden for at finde dets komponent i træet. Det er som React DevTools eller Vue DevTools, men bygget direkte ind på din side som et let flydende panel.
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.
Installera DevSuite Pro gratis och lås upp 39+ utvecklarverktyg för din webbläsare.
