A Komponens Érzékelő automatikusan azonosítja, melyik frontend keretrendszert használja egy weboldal, és feltárja a teljes komponensfát. Láthatod a React, Vue, Angular és Svelte komponensneveket, azok props/state értékeit és a beágyazási hierarchiát — egyetlen vizsgálati panelről.
Kíváncsi voltál már, melyik keretrendszerre épül egy weboldal? Vagy szeretted volna látni, hogyan bomlik össze egy összetett felhasználói felület komponensekre? A Komponens Érzékelő mindkét kérdésre azonnal válaszol. Végigvizsgálja az oldalt a keretrendszer-specifikus jelekre (React fiber csomópontok, Vue komponenspéldányok, Angular zone jelzők, Svelte komponens metaadatok), és azonosítja a keretrendszert, annak verzióját és a teljes komponensfát. React és Vue esetén tovább megy — megmutatja a komponens props és state értékeit, hogy megértsd, milyen adatok hajtják a felhasználói felület egyes részeit. Kattints bármelyik komponensre a fában, hogy kiemeld a megfelelő DOM-elemet az oldalon, vagy kattints egy oldalon lévő elemre, hogy megtaláld a komponensét a fában. Olyan, mint a React DevTools vagy a Vue DevTools, de könnyű lebegő panelként beépítve az oldaladba.
Automatikusan felismeri a React-et (beleértve a Next.js-t, Gatsby-t, Remix-et), a Vue-t (beleértve a Nuxt-ot), az Angular-t, a Svelte-et (beleértve a SvelteKit-et), a Preact-et, a Solid-ot és más keretrendszereket. Megmutatja a keretrendszer nevét, a pontos verziószámot és a renderelési módot (ügyféloldali, SSR vagy hibrid).
A teljes komponenshi erarchiát összecsukható fastruktúra-nézetben jeleníti meg. Láthatod, hogyan tartalmaz a legfelső szintű App komponens egy Navbar-t, amely NavLink-eket tartalmaz, amelyek egyedi Link komponenseket foglalnak magukba. A beágyazási mélység és a szülő-gyermek kapcsolatok kristálytisztán látszanak.
React és Vue komponensek esetén megtekintheted az egyes komponenseknek átadott aktuális props és state értékeket. Láthatod, hogy a Dashboard komponens title="Overview", loading=false és columns=2 értékeket kap. Felbecsülhetetlen az adatfolyam megértéséhez.
Kattints bármelyik komponensre a fa panelen, hogy kiemeld a megfelelő DOM-elemet az oldalon egy színes overlay segítségével. Vagy kattints bármelyik oldalon lévő elemre, hogy megtaláld és kijelöld a szülő komponensét a fában. Navigálj abban az irányban, amelyik természetesebb.
Láthatod az oldalon renderelt komponensek összesített számát, hogy hány egyedi vagy ismétlődő példány van belőlük, és mely komponensek jelennek meg a leggyakrabban. Hasznos az oldal összetettségének megértéséhez és az újrafelhasználási minták azonosításához.
Minifikált termelési buildeken is felismeri a keretrendszereket. A React fiber fája, a Vue __vue__ jelzői és az Angular ng attribútumai megmaradnak termelési módban is — a Komponens Érzékelő a build konfigurációtól függetlenül olvassa őket.
Látogass el bármely weboldalra, és azonnal tudd meg, hogy React-tel, Vue-val, Angular-ral vagy Svelte-tel készült-e — beleértve a pontos verziót is. Kombináld az Oldal Verem eszközzel egy teljes technológiai audithoz, beleértve a CDN-t, az analitikát és a CMS-információkat.
Tanulmányozd, hogyan bontják le a termelési alkalmazások a felhasználói felületüket komponensekre. Láthatod, hogyan strukturálja a Stripe az árazási oldalát, hogyan szervezi a Linear az irányítópultját, vagy hogyan választja szét bármely jól megépített alkalmazás az elrendezést, a navigációt és a tartalmat komponensekre.
Egy komponens nem renderel megfelelően? Vizsgáld meg a props és state értékeit, hogy lásd, milyen adatokat kap valójában. Hasonlítsd össze a várt értékeket a ténylegesekkel, hogy azonosítsd, hol törik meg az adatfolyam — console.log utasítások nélkül.
Frontend interjúra készülsz? Böngéssz termelési oldalakon, hogy valódi komponensmintákat láss — konténer/prezentációs felosztások, render prop használat, context providerek és HOC wrapper-ek mind láthatók a komponensfában.
Látogass el különböző keretrendszerekkel készült hasonló termékekhez, és hasonlítsd össze a komponensstruktúráikat. Nézd meg, hogyan közelíti meg egy React alkalmazás és egy Vue alkalmazás ugyanazt a felhasználói felületi mintát — navigáció, űrlapok, adattáblák, modálok — és értsd meg az architekturális különbségeket.
Nyisd meg a DevSuite Pro lebegő dokkolóját, és kattints a Komponens Érzékelő ikonra. Az eszköz végigvizsgálja az oldal DOM-ját a keretrendszer-specifikus jelzők után, és felépíti a komponensfát.
A panel fejléce megmutatja az érzékelt keretrendszert (React, Vue, Angular, Svelte), annak verzióját és a renderelési módot. Ha nem észlel keretrendszert, az oldalt vanilla HTML/CSS/JS-ként jelenti.
Nyisd ki és csukd össze a komponenseket a fában a hierarchia felfedezéséhez. A komponensnevek a beágyazási mélységgel jelezve jelennek meg behúzással. Az ismétlődő komponensek példányszámot mutatnak.
Kattints bármelyik komponensre a fában, hogy az alatti részletek szakaszban lásd a jelenlegi props és state értékeit. React esetén: props, state és hook-ok. Vue esetén: props, data és computed tulajdonságok.
Kattints bármelyik komponensre, hogy kiemeld a megfelelő DOM-elemet az oldalon egy színes kerettel és félátlátszó overlay-jel. Kattints egy oldalon lévő elemre, hogy megtaláld a fában.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.
