Sivun jäsentäjä renderöi minkä tahansa verkkosivun täydellisen DOM-rakenteen visuaalisena puuna suoraan sivulle. Jokainen HTML-elementti saa värillisen tunnisteen, joka näyttää sen tagname-nimen, ja sisäkkäisyyssyvyys paljastuu sisennyksen ja yhdistävien viivojen kautta. Se on kuin DevToolsin Elements-paneelin katsominen, mutta projisoituna live-sivulle.
Selaimen DevTools näyttää DOM:in tekstipuuna sivupaneelissa, erillään visuaalisesta layoutista. Sivun jäsentäjä silloittaa tämän kuilun projisoimalla DOM-rakenteen suoraan sivulle. Jokainen elementti saa pienen värillisen merkin, joka näyttää sen tagname-nimen (div, section, nav, h1, p, button jne.), sijoitettuna elementin vasempaan yläkulmaan. Sisäkkäiset elementit ovat visuaalisesti sisennetty ja puumainen rakenne on välittömästi ilmeinen. Tämä tekee erittäin helpoksi ymmärtää, kuinka sivu on rakennettu yhdellä silmäyksellä — näet, että header sisältää viisi anchor-tagia sisältävän navin, pääsisällössä on kolme section-elementtiä joista kukin sisältää artikkeleita ja footer käärii logo-divin ja linkkien listan. Kaikki ilman DevToolsin avaamista tai raaka-HTML-lähdekoodin lukemista.
Jokainen sivun näkyvä elementti saa värillisen tagmerkin overlay-näkymänä, joka näyttää sen HTML-tagname-nimen. Ulommaisesta html- ja body-elementeistä aina yksittäisiin spanehin, linkkeihin ja painikkeisiin — mitään ei piiloteta. Overlay renderöi täydellisen elementtihierarkian visuaalisena karttana.
Jokainen elementtityyppi saa eri taustavärin merkilleen. Rakenteelliset elementit (header, main, footer) sinisessä, navigointi keltaisessa, otsikot violetissa, kappaleet harmaassa, linkit keltaisessa, painikkeet syaanissa, kuvat vaaleanpunaisessa. Voit tunnistaa elementtityypit värin perusteella ilman tekstin lukemista.
Vie hiiri minkä tahansa tagmerkin päälle korostaaksesi vastaavan elementin puoliläpäisevällä overlaylla, joka näyttää sen tarkat dimensiot (leveys × korkeus pikseleissä). Elementin raja ääriviivoitetaan ja merkki tulee näkyvämmäksi — helpottaen tunnistamaan, mikä merkki kuuluu mihinkin elementtiin.
Syvälle sisäkkäiset elementit on sisennetty enemmän vasemmasta reunasta, mikä tekee sisäkkäisyyssuhteista välittömästi näkyvän. Näe yhdellä silmäyksellä, onko sivulla liikaa käärintä divejä (5+ tasoa syvällä) vai siisti, matala rakenne. Yhdistävät viivat näyttävät isä-lapsi-suhteet.
Overlayt on sijoitettu absoluuttisesti eivätkä ne vaikuta sivun layoutiin, vieritykseen tai JavaScript-käyttäytymiseen. Merkkitunnisteet ovat pieniä ja puoliläpäiseviä, joten näet silti sivun sisällön alla. Sammuta välittömästi palataksesi normaaliin.
Napsauta minkä tahansa säiliöelementin merkkiä sulkeaksesi sen lapset, piilottaen sisäkkäiset merkit. Hyödyllinen keskittymisessä tiettyyn osioon joutumatta koko sivun DOM-puun hämmentämäksi. Napsauta uudelleen laajentaaksesi.
Saavutit monimutkaiselle verkkosivulle ja sinun täytyy ymmärtää, kuinka se on rakennettu? Sivun jäsentäjä näyttää sinulle koko DOM-hierarkian yhdellä silmäyksellä — mitkä osiot sisältävät minkäkin sisällön, kuinka navigointi on rakennettu ja missä pääsisältöalue alkaa ja loppuu.
Liiallinen div-sisäkkäisyys tekee CSS:stä vaikeampaa kirjoittaa ja sivuista hitaampia renderöidä. Jos näet 6+ värikoodattua merkkiä päällekkäin yksinkertaisella tekstilohkolla, HTML tarvitsee yksinkertaistamista. Sivun jäsentäjä tekee tästä välittömästi ilmeistä.
Käyttääkö sivu asianmukaisia semanttisia elementtejä? Etsi header-, nav-, main-, article-, section- ja footer-merkkejä. Jos kaikki on vain div-elementtejä, sivulta puuttuu semanttinen rakenne — mikä haittaa esteettömyyttä, SEO:ta ja ylläpidettävyyttä.
Vieraile hyvin rakennetulla verkkosivustolla (Stripe, Linear, Vercel) ja aktivoi Sivun jäsentäjä nähdäksesi, kuinka niiden frontend-tiimit rakentavat HTML:nsä. Opi layoutmalleja näkemällä todellisia DOM-rakenteita tuotantosivuilla.
Käytä Sivun jäsentäjää ensin tunnistaaksesi mitkä elementit ovat olemassa ja missä ne sijaitsevat, siirry sitten CSS Inspectoriin tai Measure Distance -työkaluun syventyäksesi tunnistamiisi tiettyihin elementteihin.
Avaa DevSuite Pron kelluva telakka ja napsauta Sivun jäsentäjän kuvaketta. Työkalu skannaa välittömästi sivun DOM:n ja renderöi tagmerkit jokaiselle näkyvälle elementille.
Värillisiä merkkejä ilmestyy jokaisen elementin vasempaan yläkulmaan näyttäen sen tagname-nimen (div, section, h1, p jne.). Sisäkkäisyysrakenne on näkyvissä sisennyksen ja merkkien sijoittelun kautta.
Siirrä hiirtä minkä tahansa merkin päälle korostaaksesi vastaavan elementin. Puoliläpäisevä overlay näyttää elementin rajat ja dimensiot. Tämä yhdistää abstraktin tagname-nimen sen visuaaliseen sijaintiin sivulla.
Napsauta säiliömerkkiä sulkeaksesi lasten merkit. Tämä antaa sinun keskittyä tiettyihin sivualueisiin ilman visuaalista sotkua syvälle sisäkkäisistä elementeistä.
Napsauta Sivun jäsentäjän kuvaketta telakassa poistaaksesi kaikki overlayt ja palataksesi normaaliin sivunäkymään. Ei jälkiä jäljellä.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
