Die vertoon van roosters in die blaaier se ontfoutingsprogram

Wanneer jy met roosters werk tydens die opmaak van 'n webwerf, kan dit nodig wees om te kontroleer of die plasing van elemente in die rooster korrek verloop. Boonop, as ons 'n fout gemaak het, moet ons uitvind vanaf watter element die verkeerde plasing begin. Vir hierdie doel kan ons die ontfoutingsprogram in die blaaier gebruik.

Kom ons ondersoek 'n rooster aan die hand van die ontfoutingsprogram in Chrome. Kies eers die betrokke objek met die rooster en kliek met die regter muisknop om uit die lys die opsie 'Inspect' te kies:

Nou, in die paneel wat regs oopgemaak het, beweeg jy die wyser oor ons objek met die rooster en sien dat daar langs die ouerelement 'n knoppie grid is:

Nadat ons op die knoppie grid gedruk het, sal ons sien dat ons objek vertoon word in 'n visueel verstaanbare roosterstelsel, met die nummering van alle kolomme en rye aangedui:

Let nou op die paneel in die ontfoutingsprogram. Daarin is oortjies geplaas soos Styles, Computed, Layout, ens. Skakel oor van die oortjie Styles, wat standaard aktief is, na die oortjie Layout. Jy sal 'n lys van instellings vir jou rooster sien:

Kom ons kies om die eerste opsie Show track sizes te vertoon, wat die grootte van die spore wys:

Met die opsie Show area names kan jy die name van roosterareas vertoon, as dit gespesifiseer is. En deur die opsie Extend grid lines te kies sal ons die spoorlyne sien wat verleng is buite die rooster se raamwerk: