Page Outliner prikazuje cjelokupnu DOM strukturu bilo koje web stranice kao vizualni prekrivač u obliku stabla — izravno na samoj stranici. Svaki HTML element dobiva obojenu oznaku s nazivom taga, a dubina ugniježđenja otkriva se uvlačenjem i spojnim linijama. Kao da gledate ploču Elements u DevToolsu, ali projiciranu na živu stranicu.
DevTools u preglednicima prikazuju DOM kao tekstualno stablo u bočnoj ploči, odvojeno od vizualnog rasporeda. Page Outliner premošćuje taj jaz projiciranjem DOM strukture izravno na stranicu. Svaki element dobiva malu obojenu značku s nazivom svog taga (div, section, nav, h1, p, button, itd.), pozicioniranu u gornjem lijevom kutu elementa. Ugniježđeni elementi vizualno su uvučeni, a struktura poput stabla odmah je vidljiva. To čini nevjerojatno lakim razumijevanje kako je stranica izgrađena na prvi pogled — možete vidjeti da zaglavlje sadrži nav s pet anchor tagova, glavni sadržaj ima tri section elementa od kojih svaki sadrži članke, a podnožje obavija logo div i popis linkova. Sve to bez otvaranja DevToolsa ili čitanja izvornog HTML koda.
Svaki vidljivi element na stranici dobiva prekrivač u obliku obojene tag značke koja prikazuje naziv HTML taga. Od najvanjskih html i body elemenata sve do pojedinih span, link i button elemenata — ništa nije skriveno. Prekrivač prikazuje cjelokupnu hijerarhiju elemenata kao vizualnu kartu.
Svaki tip elementa dobiva zasebnu boju pozadine za svoju značku. Strukturni elementi (header, main, footer) u plavoj boji, navigacija u jantarnoj, naslovi u ljubičastoj, paragrafi u sivoj, linkovi u žutoj, gumbi u tirkiznoj, slike u ružičastoj. Tipove elemenata možete prepoznati po boji bez čitanja teksta.
Lebdite iznad bilo koje tag značke kako biste istaknuli odgovarajući element poluprovidnim prekrivačem koji prikazuje točne dimenzije (širina × visina u pikselima). Rubovi elementa su ocrtani, a značka postaje istaknutija — što olakšava prepoznavanje koje značke pripada kojim elementu.
Duboko ugniježđeni elementi uvučeni su dalje od lijevog ruba, čineći odnose ugniježđenja odmah vidljivima. Na prvi pogled vidite ima li stranica previše omotačkih div elemenata (5+ razina dubine) ili čistu, plitku strukturu. Spojne linije prikazuju odnose roditelja i djeteta.
Prekrivači su apsolutno pozicionirani i ne utječu na raspored stranice, pomicanje niti JavaScript ponašanje. Oznake znački su male i poluprovidne kako biste još uvijek mogli vidjeti sadržaj stranice ispod njih. Jednim klikom isključite i vratite se na normalni prikaz.
Kliknite značku bilo kojeg elementa-kontejnera kako biste skupili njegova djeca i sakrili ugniježđene značke. Korisno za fokusiranje na određenu sekciju bez preopterećenosti cjelokupnim DOM stablom stranice. Kliknite ponovo za proširivanje.
Dosljeli ste na složenu web stranicu i trebate razumjeti kako je izgrađena? Page Outliner vam prikazuje cjelokupnu DOM hijerarhiju na prvi pogled — koje sekcije sadrže koji sadržaj, kako je navigacija strukturirana i gdje počinje i završava područje glavnog sadržaja.
Prekomjerno ugniježđivanje div elemenata otežava pisanje CSS-a i usporava prikazivanje stranica. Ako vidite 6+ razina obojenih znački složenih jedna na drugu za jednostavan blok teksta, markup treba pojednostaviti. Page Outliner to čini odmah očitim.
Koristi li stranica ispravne semantičke elemente? Potražite značke header, nav, main, article, section i footer. Ako je sve samo div elementi, stranici nedostaje semantička struktura — što šteti pristupačnosti, SEO-u i održivosti.
Posjetite bilo koju dobro izgrađenu web stranicu (Stripe, Linear, Vercel) i aktivirajte Page Outliner kako biste vidjeli kako njihovi frontend timovi strukturiraju HTML. Naučite obrasce rasporeda gledanjem stvarnih DOM struktura na produkcijskim stranicama.
Koristite Page Outliner prvo kako biste identificirali koji elementi postoje i gdje se nalaze, zatim prijeđite na CSS Inspector ili Measure Distance za dublje istraživanje specifičnih elemenata koje ste prepoznali.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Page Outlinera. Alat odmah skenira DOM stranice i prikazuje tag značke na svakom vidljivom elementu.
Obojene značke pojavljuju se u gornjem lijevom kutu svakog elementa prikazujući naziv taga (div, section, h1, p, itd.). Struktura ugniježđenja vidljiva je kroz uvlačenje i pozicioniranje znački.
Pomaknite miš iznad bilo koje značke kako biste istaknuli odgovarajući element. Poluprovidni prekrivač prikazuje rubove i dimenzije elementa. To povezuje apstraktni naziv taga s njegovim vizualnim položajem na stranici.
Kliknite značku kontejnera kako biste skupili značke njene djece. To vam omogućuje fokusiranje na određena područja stranice bez vizualnog nereda od duboko ugniježđenih elemenata.
Kliknite ikonu Page Outlinera u docku kako biste uklonili sve prekrivače i vratili se na normalni prikaz stranice. Ne ostavlja nikakvih tragova.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
