Prikaz mrež v brskalnikovem razvojnem orodju

Pri delu z mrežami med postavitvijo spletnega mesta je včasih potrebno preveriti, ali poteka razporejanje elementov v mreži pravilno. Poleg tega, če smo naredili napako, moramo ugotoviti, od katerega elementa prihaja nepravilna umestitev. Za ta namen lahko uporabimo razvojno orodje v brskalniku.

Oglejmo si mrežo na primeru razvojnega orodja v brskalniku Chrome. Najprej izberemo zanimivi objekt z mrežo in z desnim klikom miške izberemo iz seznama možnost 'Preglej kodo':

Zdaj v desnem stranskem oknu brskalnika postavimo kazalec na naš objekt z mrežo in opazimo, da se v vrstici poleg nadrejenega elementa nahaja gumb grid:

Ko kliknemo na gumb grid, bomo videli, da je naš objekt prikazan v vizualno razumljivi mrežni shemi, z označeno številčenje vseh stolpcev in vrstic:

Zdaj bodite pozorni na ploščo v razvojnem orodju. Na njej so nameščeni zavihki Styles, Computed, Layout in drugi. Preklopite se z zavihka Styles, ki je privzeto aktiven, na zavihek Layout. Videli boste seznam nastavitev vaše mreže:

Izberimo za prikaz prvo možnost Show track sizes, ki prikaže velikosti sledi:

Z možnostjo Show area names lahko prikažemo imena območij mreže, če so nastavljena. Z izbiro možnosti Extend grid lines pa bomo videli podaljšane črte sledi čez okvir mreže: