Vain ääriviivat -tila lisää värikoodatut reunaviivat jokaiseen verkkosivun HTML-elementtiin, antaen sinulle välittömän röntgennäkymän sivun layoutrakenteesta. Näe tarkalleen, missä jokainen div, section, header, paragraph ja painike sijaitsee — sisältäen niiden täytteet, marginaalit ja sisäkkäisyyssuhteet.
Sivun layoutin ymmärtäminen on usein ensimmäinen askel CSS-ongelmien debuggauksessa. Johtuuko ylimääräinen tyhjätila täytteestä vai marginaalista? Onko elementti odotettua leveämpi rajoittamattoman lapsen takia? Ovatko kaksi elementtiä päällekkäin ristiriitaisten sijaintien vuoksi? Vain ääriviivat -tila vastaa näihin kysymyksiin välittömästi piirtämällä värillisiä reunoja jokaisen sivun elementin ympärille. Toisin kuin selaimen DevTools (joka korostaa vain yhden elementin kerrallaan), tämä työkalu ääriviivoittaa kaiken samanaikaisesti — antaen sinulle täydellisen kuvan. Jokaisella HTML-elementtityypillä on eri väri: otsikot sinisiä, nav-elementit keltaisia, pääsisältö vihreää, kappaleet vaaleanpunaisia, painikkeet syaaneja ja niin edelleen. Värikoodaus helpottaa rakenteellisten mallien tunnistamista ja elementtien identifiointia silmäyksellä ilman DOM:in lukemista.
Ota ääriviivat käyttöön kaikissa elementeissä yhdellä napsautuksella — ei konfigurointia, ei asetuspaneelia. Napsauta kerran nähdäksesi kaikki reunat, napsauta uudelleen poistaaksesi ne. Nopein tapa visualisoida layoutrakenne millä tahansa verkkosivulla.
Eri HTML-elementit saavat eri ääriviivavärein välittömään visuaaliseen tunnistamiseen. Otsikot sinisiä, navigointi keltaista, pääsisältö vihreää, heading-elementit violetteja, kappaleet vaaleanpunaisia, painikkeet syaaneja, divit harmaita. Voit tunnistaa elementtityypit värin perusteella ilman DOM:in lukemista.
Ääriviivat tekevät näkymättömät CSS-ongelmat näkyviksi. Havaitse odottamattomat marginaalit tyhjätilan luomisessa, täyte joka työntää elementtejä odotettua leveämmiksi, ylivuoto vaakasuoran scrollipalkin aiheuttajana tai kutistuneet elementit joiden korkeus on nolla. Jokainen laatikoiden raja tulee näkyväksi.
Sisäkkäiset ääriviivat paljastavat DOM:in isä-lapsi-rakenteen. Katso kuinka syvälle elementit on sisäkkäin, mikä säiliö käärii minkäkin sisällön ja missä jokaisen sisäkkäisyystason rajat sijaitsevat. Korvaamaton monimutkaisten grid- ja flex-layoutien ymmärtämisessä.
Aktivoi millä tahansa verkkosivulla — omissa projekteissasi, asiakassivustoilla, kilpailijoiden sivuilla tai suunnitteluviitteissä. Ääriviivat lisätään CSS-injektiolla eivätkä muuta DOM-rakennetta tai vaikuta JavaScript-käyttäytymiseen.
Ääriviivat piirretään CSS outline -ominaisuutta käyttäen (ei border), mikä tarkoittaa, etteivät ne lisäänny elementin box model -dimensioihin. Sivun layout pysyy täsmälleen ennallaan — ääriviivat ovat puhtaasti visuaalisia eivätkä aiheuta uudelleenjuoksua.
Vain ääriviivat -tila covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsMysteeriaukko osioiden välillä? Ota ääriviivat käyttöön ja näet välittömästi, johtuuko se alaelementin marginaalista, isäsäiliön täytteestä vai tyhjästä divistä, jonka olemassaolosta et tiennyt. Mitä DevToolsissa kestää minuutteja, kestää Ääriviivat-tilassa sekunteja.
Muuta selaimen ikkunan kokoa ääriviivat aktivoituina tarkkaillaksesi, kuinka layout juoksee uudelleen breakpointtien välillä. Katso mitkä elementit pinoavat, mitkä ylivuotavat ja missä grid- tai flexbox-rakenne muuttuu — kaikki yhdellä silmäyksellä.
Liian monta sisäkkäistä diviä? Tarpeettomia kääri-elementtejä? Ääriviivat-tila tekee liiallisesta sisäkkäisyydestä visuaalisesti ilmeistä — jos näet 5+ samankeskeistä ääriviivaa yksinkertaisen sisällön ympärillä, HTML:ää voisi yksinkertaistaa. Erinomainen frontend-PR:ien koodiarvioihin.
Ota ääriviivat käyttöön etusivullasi, sitten alasivulla. Onko niillä sama layoutrakenne? Ovatko marginaalit ja osioiden leveydet johdonmukaisia? Ääriviivat tekevät rakenteellisen johdonmukaisuuden (tai epäjohdonmukaisuuden) välittömästi näkyväksi.
Näytä opiskelijoille, kuinka HTML-elementit luovat laatikoita, kuinka box model toimii täytteen ja marginaalien kanssa ja kuinka sisäkkäisyys luo sivuhierarkian. Ääriviivat-tila muuttaa abstraktit käsitteet näkyviksi, interaktiivisiksi demonstraatioiksi.
Avaa DevSuite Pron kelluva telakka ja napsauta Vain ääriviivat -tilan kuvaketta. Välittömästi jokainen sivun HTML-elementti saa värillisen ääriviivareunuksen.
Jokaisella elementtityypillä on eri väri. Sininen rakenteellisille elementeille (header, footer, section), vihreä pääsisältöalueille, violetti otsikoille, vaaleanpunainen kappaleille, syaani painikkeille ja syöttökentille, keltainen navigoinnille ja harmaa geneerisille diveille ja spaneille.
Etsi odottamattomia aukkoja (marginaalien aiheuttamia), säiliönsä ulkopuolelle ulottuvia elementtejä (ylivuoto), epäsymmetristä välistystä (epäjohdonmukainen täyte) tai syvälle sisäkkäisiä käärimiä (tarpeeton div-sisäkkäisyys). Kaikki tulevat välittömästi näkyviksi.
Käytä ääriviivat -tilaa lähtökohtana, siirry sitten CSS Inspectoriin tarkistamaan tunnistamissasi elementeissä tiettyjä arvoja tai Measure Distance -työkaluun varmistaaksesi tarkat välistykset ääriviivamaistettujen elementtien välillä.
Napsauta Ääriviivat-kuvaketta uudelleen poistaaksesi kaikki ääriviivat ja palataksesi normaaliin sivunäkymään. Ei siivoamista tarvita — se on pelkkä kytkin.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.