Brauzerin Debuggerinde Gridlerin Gosterilmesi

Saytın qurulması prosesinde gridlerle işleyərkən tez-tez elementlerin gridde nece duzgun yerleşdirildiyini yoxlamaq lazım ola biler. Bundan əlavə, əgər xəta varsa, hansı elementin səbəb olduğunu anlamaq lazımdır. Bu məqsədlə biz brauzerin debuggerinden istifadə edə bilərik.

Gəlin Chrome brauzerinin debuggerində grid nümunəsini nəzərdən keçirək. Əvvəlcə bizi maraqlandıran grid obyektini seçirik və sağ düymə ilə klikləyərək siyahıdan 'Inspect' seçimini seçirik:

İndi brauzerin sağ tərəfində açılan panelde kursoru grid obyektimizin üzərinə gətiririk və görürük ki, ana elementin yanındakı sətirdə grid düyməsi var:

grid düyməsini kliklədikdən sonra görəcəyik ki, bizim obyekt vizual olaraq anlaşılan bir grid sistemi kimi göstərilir, bütün sütun və sətirlərin nömrələnməsi ilə:

İndi debuggerdakı panelə diqqət yetirin. Onda Styles, Computed, Layout və s. vərəqlər yerləşir. Susmaya görə aktiv olan Styles vərəqindən Layout vərəqinə keçin. Görəcəksiniz ki, gridiniz parametrlərinin siyahısı var:

Gəlin göstərilməsi üçün birinci Show track sizes seçimini seçək, bu tracklərin ölçülərini göstərir:

Show area names seçimi ilə grid sahələrinin adlarını göstərmək olar, əgər onlar təyin edilibsə. Extend grid lines seçimini seçməklə biz gridin xaricində uzadılmış track xətlərini görəcəyik: