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 oled kunagi mõelnud, millise raamistikuga veebileht on ehitatud? Või tahtnud näha, kuidas keeruline UI on jaotatud komponentideks? Komponentide Detektor vastab mõlemale küsimusele koheselt. See skannib lehte raamistikuspetsiifiliste signatuuride järgi (React fiber sõlmed, Vue komponendi instantsid, Angular tsooni märgid, Svelte komponendi metaandmed) ja tuvastab raamistiku, selle versiooni ja täieliku komponentide puu. Reacti ja Vue jaoks läheb see kaugemale — näidates komponendi props ja state väärtusi, et saaksid mõista, millised andmed iga UI tükki juhivad. Klõpsa puus mis tahes komponendil, et tõsta esile vastav DOM element lehel, või klõpsa lehel elemendil, et leida selle komponent puus. See on nagu React DevTools või Vue DevTools, kuid sinu lehele ehitatud kerge hõljuva paneelina.
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 39+ arendustööriista oma brauserile.
