Pemeriksa Susun Atur untuk Flexbox dan Grid

Chrome DevTools menandakan bekas flex dengan lencana "flex" di sebelah nod DOMnya dalam panel Elemen. Mengklik lencana itu menogol tindanan Flexbox — garisan berwarna yang menunjukkan paksi utama, paksi silang, sempadan item dan jarak celah.

Bekas grid menunjukkan lencana "grid". Mengkliknya menogol tindanan grid: garisan berwarna untuk lajur, baris dan celah. Tindanan berterusan (dipasak dalam panel Susun Atur) kekal kelihatan semasa anda menatal atau mengubah saiz ruang pandang.

DevTools → Elemen → tab Susun Atur menyenaraikan semua bekas flex dan grid pada halaman. Mengklik nama bekas memilihnya dalam DOM dan menogol tindanannya. Penampilan tindanan (warna garisan, keterlihatan label, saiz trek) boleh dikonfigurasikan di sini.

Tindanan menunjukkan nama dan saiz trek apabila "Tunjukkan saiz trek" didayakan. Saiz intrinsik (auto, kandungan-min, kandungan-maks) dan unit pecahan (fr) memaparkan nilai piksel yang telah diselesaikan — mendedahkan cara unit fr membahagikan ruang yang tersedia.

Pilih elemen flex (anak kepada bekas flex). Panel Gaya menunjukkan pengembangan singkatan `flex` — `flex-grow`, `flex-shrink`, dan `flex-basis`. Tindanan menyerlahkan saiz elemen pada paksi utama, asasnya, serta sebarang pertumbuhan atau pengecilan yang dikenakan.

Bekas grid dengan grid-template-areas memaparkan tindanan kawasan bernama. Setiap kawasan bernama dilabelkan dan diberikan warna yang berbeza. Paparan visual ini memudahkan pengesahan bahawa penetapan `grid-area` sepadan dengan templat susun atur yang dimaksudkan.

Sokongan `subgrid` dalam DevTools menandakan bekas subgrid secara berbeza. Garis treknya sejajar dengan trek grid induk — tindanan menunjukkan penjajaran ini secara visual, sekali gus mengesahkan bahawa elemen subgrid mengambil bahagian dalam sistem koordinat grid induk.

Elemen yang tidak sejajar selalunya berpunca daripada nilai `justify-content`, `align-items`, atau `align-self` yang salah. Tindanan flex/grid menunjukkan kedudukan elemen berbanding garis paksi. Cuba togol sifat penjajaran dalam panel Gaya dan perhatikan perubahan tindanan pada masa nyata.

Tindanan memaparkan jarak antara elemen sebagai jalur berwarna. Ini memudahkan pengesahan nilai `gap` dan mengenal pasti sama ada jarak itu datang daripada `gap` (betul) atau `margin` (yang mungkin runtuh tanpa dijangka dalam baris flex).

Tindanan grid membezakan trek implisit (dicipta secara automatik untuk elemen limpahan) daripada trek eksplisit (ditakrifkan dalam `grid-template`). Garis putus-putus menandakan trek implisit. Jika kandungan mencipta trek implisit yang tidak dijangka, tindanan akan mendedahkan corak limpahan itu dengan serta-merta.

Gabungkan Pemeriksa Susun Atur dengan Mod Peranti. Ubah saiz port pandangan dan perhatikan cara pembalutan flex serta trek `auto-fill`/`auto-fit` grid disusun semula pada masa nyata. Kaedah ini mengesan kerosakan susun atur responsif lebih awal berbanding mengubah saiz tetingkap pelayar secara manual.

Pemeriksa Susun Atur Flexbox dan Grid DevTools memvisualkan garis paksi, saiz trek, jarak, kawasan bernama, dan trek implisit sebagai tindanan interaktif. Apabila digabungkan dengan panel Susun Atur untuk mengurus tindanan, alat ini menjadikan penyahpepijatan susun atur CSS yang kompleks lebih pantas dan intuitif berbanding membaca CSS sahaja.