Grida attēlošana pārlūkprogrammas atkļūdotājā

Strādājot ar gridiem vietnes izstrādes procesā dažkārt ir nepieciešams pārbaudīt, cik pareizi notiek elementu izvietošana gridā. Turklāt, ja mēs esam pieļāvuši kļūdu, mums ir jāizdomā, no kura elementa sākas nepareizā izvietošana. Šim nolūkam mēs varam izmantot atkļūdotāju pārlūkprogrammā.

Apskatīsim gridu, izmantojot pārlūkprogrammas Chrome atkļūdotāju. Vispirms izvēlamies mūs interesējošo objektu ar gridu un ar peles labo pogu noklikšķinot izvēlamies no saraksta opciju 'Pārbaudīt elementu':

Tagad pārlūkprogrammā labajā pusē atvērtajā panelī novelkam kursoru virs mūsu objekta ar gridu un ievērojam, ka rindā blakus vecākelementam atrodas poga grid:

Pēc tam, kad nospiežam pogu grid, mēs redzēsim, ka mūsu objekts tiek attēlots vizuāli saprotamā grid sistēmā, ar visu kolonnu un rindu numerāciju:

Tagad pievērsiet uzmanību panelim atkļūdotājā. Tajā atrodas cilnes Styles, Computed, Layout un citas. Pārslēdzieties no cilnes Styles, kas pēc noklusējuma ir aktīva, uz cilni Layout. Jūs redzēsiet savu grid iestatījumu sarakstu:

Izvēlēsimies, lai attēlotu pirmo opciju Show track sizes, kas parāda treku izmērus:

Izmantojot opciju Show area names var attēlot grid apgabalu nosaukumus, ja tie ir iestatīti. Un izvēloties opciju Extend grid lines mēs redzēsim pagarinātās ārpus grid robežām treku līnijas: