Flexboxin ja Gridin asettelutarkastelu

Chrome DevTools merkitsee flex-säilöt "flex"-merkillä DOM-solmun vieressä Elements-paneelissa. Merkin napsauttaminen ottaa Flexbox-peittokuvan käyttöön tai pois käytöstä — värilliset viivat näyttävät pääakselin, poikittaisakselin, kohteiden rajat ja välistyksen.

Grid-säilöt näyttävät "grid"-merkin. Sen napsauttaminen ottaa grid-peittokuvan käyttöön tai pois käytöstä: värilliset viivat näyttävät sarakkeet, rivit ja välit. Layout-paneeliin kiinnitetyt pysyvät peittokuvat näkyvät edelleen, kun vieritätte sivua tai muutatte näkymän kokoa.

DevTools → Elements → Layout -välilehti luettelee kaikki sivun flex- ja grid-säilöt. Säilön nimen napsauttaminen valitsee sen DOM-puussa ja ottaa sen peittokuvan käyttöön tai pois käytöstä. Peittokuvan ulkoasua, kuten viivan väriä, selitteiden näkyvyyttä ja raitojen kokoja, voi määrittää täällä.

Peittokuva näyttää raitojen nimet ja koot, kun "Show track sizes" on käytössä. Sisällöstä määräytyvät koot (auto, min-content, max-content) ja murto-osayksiköt (fr) näyttävät ratkaistut pikseliarvonsa — näin näette, miten fr-yksiköt jakavat käytettävissä olevan tilan.

Valitkaa flex-kohde (flex-säilön lapsi). Styles-paneelissa näkyy flex-lyhennysominaisuuden erittely: flex-grow, flex-shrink ja flex-basis. Peittokuva korostaa kohteen koon pääakselilla, perustan sekä käytetyn kasvun tai kutistumisen.

grid-template-areas-ominaisuutta käyttävissä grid-säilöissä näkyvät nimettyjen alueiden peittokuvat. Jokainen nimetty alue on nimetty ja merkitty omalla värillään. Näin on helppo tarkistaa, vastaavatko grid-area-määritykset suunniteltua asettelumallia.

DevTools merkitsee subgrid-säilöt erottuvalla tavalla. Niiden raitaviivat kohdistuvat isäntägridin raitoihin, ja peittokuva näyttää tämän kohdistuksen visuaalisesti. Näin voidaan varmistaa, että subgrid-kohteet osallistuvat isäntägridin koordinaattijärjestelmään.

Väärin kohdistuneet kohteet johtuvat usein virheellisistä justify-content-, align-items- tai align-self-arvoista. Flex/grid-peittokuva näyttää kohteiden sijainnit suhteessa akseliviivoihin. Kokeilkaa kohdistusominaisuuksien vaihtamista Styles-paneelissa ja tarkkailkaa peittokuvan muutoksia reaaliajassa.

Peittokuva näyttää kohteiden väliset välit värillisinä kaistoina. Näin on helppo varmistaa gap-arvot ja selvittää, tuleeko välistys gap-ominaisuudesta (oikea tapa) vai margin-ominaisuudesta (jonka välit voivat flex-riveillä yhdistyä odottamattomasti).

Grid-peittokuva erottaa implisiittiset raidat (ylivuotaville kohteille automaattisesti luodut) eksplisiittisistä raidoista (grid-template-määrityksessä määritellyt). Katkoviivat merkitsevät implisiittisiä raitoja. Jos sisältö luo odottamattomia implisiittisiä raitoja, peittokuva paljastaa ylivuotokuvion heti.

Yhdistäkää Layout Inspector Device Mode -tilaan. Muuttakaa näkymäikkunan kokoa ja tarkkailkaa, miten flex wrap sekä gridin auto-fill- ja auto-fit-raidat järjestyvät uudelleen reaaliajassa. Näin responsiivisen asettelun rikkoutumiset havaitaan aiemmin kuin selaimen ikkunaa käsin muuttamalla.

DevToolsin Flexbox- ja Grid Layout Inspector visualisoi akseliviivat, raitojen koot, välit, nimetyt alueet ja implisiittiset raidat vuorovaikutteisina peittokuvina. Yhdessä peittokuvien hallintaan tarkoitetun Layout-paneelin kanssa se tekee monimutkaisten CSS-asettelujen vianmäärityksestä nopeampaa ja intuitiivisempaa kuin pelkkä CSS:n lukeminen.