Прикажување на гридови во дебагерот на прелистувачот

При работа со гридови во процесот на создавање на веб-страница, понекогаш е потребно да се провери дали се случува правилно поставувањето на елементите во мрежата. Дополнително, ако имаме направено грешка, треба да откриеме од кој елемент произлегува погрешното поставување. За оваа цел можеме да го користиме дебагерот во прелистувачот.

Ајде да разгледаме грид на примерот од дебагерот во Chrome. Прво, изберете го објектот што нè интересира кој има грид и со кликнување на десниот копче изберете од листата опцијата 'Inspect':

Сега во панелот на прелистувачот што се отвори од десната страна, поставете го курсорот на нашиот објект со грид и забележете дека во линијата до родителскиот елемент се наоѓа копчето grid:

Откако ќе кликнете на копчето grid, ќе видите дека нашиот објект се прикажува во визуелно разбирлив систем на грид, со означена нумерација на сите колони и редови:

Сега обрнете внимание на панелот во дебагерот. Во него се поставени јазичиња Styles, Computed, Layout и други. Преминете од јазичето Styles, кое е активно по стандард, на јазичето Layout. Ќе видите листа на поставки за вашиот грид:

Ајде да ја избереме за приказ првата опција Show track sizes, која ја покажува големината на траките:

Со помош на опцијата Show area names може да се прикажат имињата на областите на гридот, ако се зададени. А со изборот на опцијата Extend grid lines ќе ги видиме продолжените линии на траките надвор од рамките на гридот: