Komponentide Detektor tuvastab automaatselt, millist frontend raamistikku veebileht kasutab, ja paljastab selle täieliku komponentide puu. Vaata React, Vue, Angular ja Svelte komponentide nimesid, nende props/state väärtusi ja sisestuse hierarhiat — kõik ühest inspekteerimispaneelist.
Kas olete kunagi mõelnud, millise raamistikuga on veebisait üles ehitatud? Või tahtnud näha, kuidas keerukas kasutajaliides on komponentideks jagatud? Component Detector vastab mõlemale küsimusele koheselt. See skaneerib lehte raamistikupõhiste signatuuride leidmiseks (React fiber-sõlmed, Vue komponendi eksemplarid, Angulari tsoonimarkerid, Svelte komponendi metaandmed) ning tuvastab raamistiku, selle versiooni ja täieliku komponentide puu. React ja Vue puhul läheb see veelgi kaugemale — näidates komponentide props- ja state-väärtusi, et mõistaksite, milline andmestik iga kasutajaliidese osa taga peitub.
Klõpsake puus mõnel komponendil, et esile tõsta vastav DOM-element lehel, või klõpsake lehel elemendil, et leida selle komponent puust. See on nagu React DevTools või Vue DevTools, ent sisseehitatuna otse teie lehele kerge ujuva paneelina, mis töötab ilma, et peaksite iga vaadeldava projekti jaoks paigaldama eraldi raamistikupõhise laienduse.
Tuvastamine toimib ka minifitseeritud, tootmiskeskkonda pakitud saitidel, kus komponentide ja muutujate nimed on segatud — tööriist otsib struktuurseid signatuure, mitte ei tugine loetavale lähtekoodile, ning just seetõttu töötab see ka saitidel, mis pole kunagi lähtekaarti (source map) avaldanud. Lisaks neljale suuremale raamistikule tunneb see ära ka nende peale ehitatud metaraamistikud, näiteks Next.js ja Nuxt, ning esitab need eraldi kihina aluseks olevast Reacti või Vue käitusajast. See teeb sellest kiire esimese sammu iga kord, kui satute võõra koodibaasi või konkurendi saidi juurde ja peate enne süvitsi minemist aru saama, millega tegu on.
Tuvastab automaatselt React (sealhulgas Next.js, Gatsby, Remix), Vue (sealhulgas Nuxt), Angular, Svelte (sealhulgas SvelteKit), Preact, Solid ja teisi raamistikke. Näitab raamistiku nime, täpset versiooninumbrit ja renderdusrežiimi (client-side, SSR või hübriid).
Renderdab täieliku komponentide hierarhia kokkuvolditavas puuvaates. Vaata, kuidas tipptaseme App komponent sisaldab Navbar'i, mis sisaldab NavLinks'i, mis sisaldab üksikuid Link komponente. Sisestuse sügavus ja vanem-laps suhted on kristallselged.
React ja Vue komponentide jaoks vaata praeguseid props ja state väärtusi, mis on iga komponendile edastatud. Vaata, et Dashboard komponent saab title="Overview", loading=false ja columns=2. Hindamatu väärtusega andmevoolu mõistmiseks.
Klõpsa puupaneeli mis tahes komponendil, et tõsta esile vastav DOM element lehel värvilise kihistusega. Või klõpsa lehel mis tahes elemendil, et leida ja valida selle vanemkomponent puus. Navigeeri suunas, mis on loomulik.
Vaata lehel renderdatud komponentide koguarvu, kui palju on unikaalseid vs korduvaid instantse ja millised komponendid esinevad kõige sagedamini. Kasulik lehe keerukuse mõistmiseks ja taaskasutuse mustrite tuvastamiseks.
Tuvastab raamistikke isegi minifitseeritud tootmise buildidel. Reacti fiber puu, Vue __vue__ märgid ja Angulari ng atribuudid püsivad tootmise režiimis — Komponentide Detektor loeb neid sõltumata buildi konfiguratsioonist.
Külasta mis tahes veebilehte ja teata koheselt, kas see on ehitatud Reacti, Vue, Angulari või Sveltega — sealhulgas täpne versioon. Kombineeri Site Stack'iga täielikuks tehnoloogiaauditiks, sealhulgas CDN, analüütika ja CMS info.
Tootmisrakenduste UI komponentideks jaotamise uurimine. Vaata, kuidas Stripe oma hinnakuju lehte struktureerib, kuidas Linear oma armatuurlauda organiseerib või kuidas mis tahes hästi ehitatud rakendus eraldab paigutuse, navigatsiooni ja sisu komponentideks.
Komponent ei renderdu õigesti? Inspekteeri selle props ja state, et näha, milliseid andmeid see tegelikult saab. Võrdle oodatud väärtusi tegelike väärtustega, et tuvastada, kus andmevool katkeb — ilma console.log lauseteta.
Valmistud frontend intervjuuks? Sirvi tootmislehti, et näha päris maailma komponentide mustreid — container/presentational jagunemised, render prop kasutus, context providerid ja HOC ümbrised on kõik nähtavad komponentide puus.
Külasta sarnaseid tooteid, mis on ehitatud erinevate raamistikega, ja võrdle nende komponentide struktuure. Vaata, kuidas React rakendus vs Vue rakendus läheneb samale UI mustrile — navigatsioonile, vormidele, andmetabelitele, modaalidele — ja mõista arhitektuurseid erinevusi.
Ava DevSuite Pro hõljuv dokk ja klõpsa Komponentide Detektori ikoonil. Tööriist skannib lehe DOMi raamistikuspetsiifiliste märkide järgi ja ehitab komponentide puu.
Paneeli päis näitab tuvastatud raamistikku (React, Vue, Angular, Svelte), selle versiooni ja renderdusrežiimi. Kui raamistikku ei tuvastata, raporteerib see lehe vanilla HTML/CSS/JS-na.
Laienda ja kokku volda komponente puus, et uurida hierarhiat. Komponentide nimed ilmuvad koos sisestuse sügavusega, mida näitab taanded. Korduvad komponendid näitavad instantside arvu.
Klõpsa puus mis tahes komponendil, et näha selle praeguseid props ja state väärtusi alumises detailide sektsioonis. Reacti jaoks: props, state ja hooks. Vue jaoks: props, data ja computed properties.
Klõpsa mis tahes komponendil, et tõsta esile vastav DOM element lehel värvilise äärisega ja poolläbipaistva kihistusega. Klõpsa elemendil lehel, et leida see puus.
Paigaldage DevSuite Pro tasuta ja avage 64+ arendustööriista oma brauserile.
