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 någonsin undrat vilket framework en webbplats är byggd med? Eller velat se hur ett komplext UI är uppdelat i komponenter? Component Detector svarar på båda frågorna direkt. Verktyget scannar sidan efter framework-specifika signaturer (React fiber-noder, Vue-komponentinstanser, Angular zone-markörer, Svelte-komponentmetadata) och identifierar frameworket, dess version och hela komponentträdet. För React och Vue går det ett steg längre — det visar komponenters props och state-värden så att du förstår vilken data som driver varje del av UI:t.
Klicka på valfri komponent i trädet för att markera motsvarande DOM-element på sidan, eller klicka på ett element på sidan för att hitta dess komponent i trädet. Det är som React DevTools eller Vue DevTools, men inbyggt på din sida som en lättviktig flytande panel som fungerar utan att du behöver installera ett separat framework-specifikt tillägg för varje projekt du tittar på.
Detekteringen fungerar även på minifierade produktionsbuntar där komponent- och variabelnamn har manglats — verktyget letar efter strukturella signaturer istället för att förlita sig på läsbar källkod, vilket är anledningen till att det fortsätter fungera på sidor som aldrig levererat en source map. Utöver de fyra stora frameworken känner det även igen meta-framework som byggts ovanpå, som Next.js och Nuxt, och rapporterar dem som ett separat lager skilt från det underliggande React- eller Vue-runtimet. Det gör verktyget till ett snabbt första steg när du hamnar i en okänd kodbas eller på en konkurrents webbplats och behöver förstå vad du tittar på innan du gräver djupare.
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 64+ utvecklarverktyg för din webbläsare.
