Az Oldal Vázlatkészítő az összes DOM-struktúrát vizuális faként jeleníti meg közvetlenül az oldalon. Minden HTML-elem egy színes jelzést kap a tag nevével, a mélységi viszonyok pedig behúzással és összekötő vonalakkal válnak láthatóvá. Olyan, mintha a DevTools Elemek paneljét vetítenéd rá az élő oldalra.
A böngésző DevTools a DOM-ot szövegként jeleníti meg egy oldalsó panelen, elszakítva a vizuális elrendezéstől. Az Oldal Vázlatkészítő áthidalja ezt a szakadékot azáltal, hogy a DOM-struktúrát közvetlenül az oldalra vetíti. Minden elem kap egy kis, színes jelvényt a tag nevével (div, section, nav, h1, p, button stb.), az elem bal felső sarkában elhelyezve. A beágyazott elemek vizuálisan beljebb vannak tolva, és a fastruktúra azonnal szembeötlő. Így rendkívül könnyű egyetlen pillantással megérteni, hogyan épül fel az oldal — láthatod, hogy a header egy öt horgonycímkét tartalmazó nav-ot foglal magában, a főtartalom három, cikkeket tartalmazó section-elemből áll, a lábléc pedig egy logó div-et és hivatkozások listáját zárja magába. Mindezt DevTools megnyitása vagy nyers HTML-forráskód olvasása nélkül.
Az oldalon lévő összes látható elem kap egy színes tag-jelvényt, amely megmutatja a HTML tag nevét. A legkülső html- és body-elemektől egészen az egyes span-, hivatkozás- és gombelemekig — semmi sem marad rejtve. Az overlay az elemhierarchia teljes vizuális térképét mutatja.
Minden elemtípus egyedi háttérszínt kap a jelvényén. A szerkezeti elemek (header, main, footer) kék színűek, a navigáció borostyánsárga, a fejlécek lila, a bekezdések szürke, a hivatkozások sárga, a gombok ciánkék, a képek pink színűek. Az elemtípusok szín alapján azonosíthatók a szöveg olvasása nélkül is.
Vidd az egeret bármelyik tag-jelvény fölé, hogy kiemeld a megfelelő elemet egy félátlátszó overlay segítségével, amely mutatja a pontos méreteit (szélesség × magasság pixelben). Az elem határa körbe van rajzolva, és a jelvény is hangsúlyosabbá válik — így könnyen azonosítható, melyik jelvény melyik elemhez tartozik.
A mélyen beágyazott elemek beljebb vannak tolva a bal széltől, így a beágyazási viszonyok azonnal láthatóvá válnak. Egy pillantással látható, hogy egy egyszerű szövegblokkhoz túl sok wrapper div tartozik-e (5+ szinttel mélyen), vagy az oldal tiszta, sekély struktúrájú. Összekötő vonalak jelzik a szülő-gyermek kapcsolatokat.
Az overlayok abszolútan pozicionáltak, és nem befolyásolják az oldal elrendezését, görgetését vagy a JavaScript viselkedését. A jelvénycímkék kicsik és félig átlátszók, így az alatta lévő oldaltartalom továbbra is látható. Egyetlen kattintással kikapcsolható, hogy visszatérj a normál nézethez.
Kattints bármelyik konténerelem jelvényére, hogy összecsukd a gyermekeit, elrejtve a beágyazott jelvényeket. Hasznos, ha egy adott szakaszra szeretnél koncentrálni anélkül, hogy az egész oldal DOM-fája elárasztana. Kattints újra a kibontáshoz.
Egy összetett weboldalra érkeztél, és meg kell értened, hogyan épül fel? Az Oldal Vázlatkészítő egyetlen pillantásra megmutatja a teljes DOM-hierarchiát — melyik szakasz milyen tartalmat foglal magában, hogyan épül fel a navigáció, és hol kezdődik és végződik a főtartalmi terület.
A túlzott div-beágyazás megnehezíti a CSS írását és lassítja az oldalak renderelését. Ha egy egyszerű szövegblokkon 6+ szintű egymásra halmozott, színes jelvényt látsz, a jelölőkódot egyszerűsíteni kell. Az Oldal Vázlatkészítő ezt azonnal nyilvánvalóvá teszi.
Az oldal megfelelő szemantikus elemeket használ? Keress header, nav, main, article, section és footer jelvényeket. Ha minden csak div-elem, az oldal hiányzik a szemantikus szerkezetből — ami ront az akadálymentességen, a SEO-n és a karbantarthatóságon.
Látogass el bármely jól megépített weboldalra (Stripe, Linear, Vercel), és aktiváld az Oldal Vázlatkészítőt, hogy lásd, hogyan strukturálják a frontendes csapatok a HTML-jüket. Tanulj elrendezési mintákat azáltal, hogy valódi DOM-struktúrákat látsz termelési oldalakon.
Használd először az Oldal Vázlatkészítőt annak azonosítására, hogy mely elemek léteznek és hol találhatók, majd válts CSS Inspector vagy Távolságmérő eszközre, hogy mélyebben beleáss a korábban azonosított elemekbe.
Nyisd meg a DevSuite Pro lebegő dokkolóját, és kattints az Oldal Vázlatkészítő ikonra. Az eszköz azonnal végigvizsgálja az oldal DOM-ját, és tag-jelvényeket jelenít meg minden látható elemen.
Színes jelvények jelennek meg minden elem bal felső sarkában, megmutatva a tag nevét (div, section, h1, p stb.). A beágyazási struktúra a behúzáson és a jelvények elhelyezkedésén keresztül válik láthatóvá.
Vidd az egeret bármelyik jelvény fölé, hogy kiemeld a megfelelő elemet. Egy félátlátszó overlay mutatja az elem határait és méreteit. Ez kapcsolja össze az elvont tag nevet az oldalon elfoglalt vizuális pozíciójával.
Kattints egy konténer jelvényére, hogy összecsukd a gyermek jelvényeit. Ez lehetővé teszi, hogy az oldal meghatározott területeire összpontosíts anélkül, hogy a mélyen beágyazott elemek vizuális zsúfoltságot okoznának.
Kattints az Oldal Vázlatkészítő ikonra a dokkolóban, hogy eltávolítsd az összes overlayt, és visszatérj a normál oldalnézethez. Nem marad semmiféle nyom.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.
