Menampilkan Grid di Debugger Browser

Saat bekerja dengan grid dalam proses pembuatan situs web, terkadang perlu untuk memeriksa apakah penempatan elemen dalam grid sudah benar. Selain itu, jika ada kesalahan kita harus mencari tahu dari elemen mana penempatan yang salah itu berasal. Untuk tujuan ini, kita dapat menggunakan debugger di browser.

Mari kita lihat grid menggunakan contoh debugger di browser Chrome. Pertama, pilih objek yang kita minati yang memiliki grid dan klik kanan lalu pilih opsi 'Inspect' dari daftar:

Sekarang di panel browser yang terbuka di sebelah kanan, arahkan kursor ke objek kita yang memiliki grid dan perhatikan bahwa di baris sebelah elemen induk terdapat tombol grid:

Setelah mengeklik tombol grid, kita akan melihat bahwa objek kita ditampilkan dalam sistem grid yang mudah dipahami secara visual, dengan penomoran semua kolom dan baris:

Sekarang perhatikan panel di debugger. Di dalamnya terdapat tab Styles, Computed, Layout, dan lainnya. Alihkan dari tab Styles, yang aktif secara default, ke tab Layout. Anda akan melihat daftar pengaturan grid Anda:

Mari kita pilih untuk ditampilkan opsi pertama Show track sizes, yang menunjukkan ukuran track:

Dengan opsi Show area names kita dapat menampilkan nama area grid, jika sudah ditetapkan. Dan dengan memilih opsi Extend grid lines kita akan melihat garis track yang diperpanjang melampaui batas grid: