Shfaqja e Grid-ëve në Debugger të Shfletuesit

Gjatë punës me grid në procesin e ndërtimit të një faqeje interneti, ndonjëherë është e nevojshme të kontrollohet nëse vendosja e elementeve në grid po ndodh si duhet. Përveç kësaj, nëse kemi bërë një gabim, duhet të kuptojmë se nga cili element po shkaktohet vendosja e gabuar. Për këtë qëllim mund të përdorim debugger në shfletues.

Le të shqyrtojmë një grid duke përdorur debugger në shfletuesin Chrome. Së pari, zgjedhim objektin që na intereson që ka grid dhe, duke klikuar me butonin e djathtë të miut, zgjedhim nga lista opsionin 'Inspect':

Tani, në panelin e shfletuesit që u hap djathtas, vendosim kursorin mbi objektin tonë me grid dhe vërejmë se në rresht pranë elementit prind ndodhet butoni grid:

Pasi të kemi klikuar butonin grid, do të shohim se objekti ynë shfaqet në një sistem grid vizualisht të kuptueshëm, me tregimin e numërimit të të gjitha kolonave dhe rreshtave:

Tani, kushtojini vëmendje panelit në debugger. Në të janë vendosur skedat Styles, Computed, Layout dhe të tjera. Kalo nga skeda Styles, e cila është aktive si parazgjedhje, në skedën Layout. Do të shihni një listë me cilësimet e grid-it tuaj:

Le të zgjedhim për t'u shfaqur opsionin e parë Show track sizes, i cili tregon madhësinë e binarëve (track):

Duke përdorur opsionin Show area names mund të shfaqen emrat e zonave të grid-it, nëse ato janë përcaktuar. Duke zgjedhur opsionin Extend grid lines do të shohim linjat e binarëve të zgjatura përtej kornizës së grid-it: