Cara men-debug Petak CSS dengan Chrome DevTools

1. Pengantar

DevTools kini memiliki dukungan yang lebih baik untuk proses debug petak CSS.

Petak CSS

Saat elemen HTML di halaman Anda menerapkan display: grid atau display: inline-grid, panel Elemen menawarkan sejumlah opsi untuk membantu Anda memeriksa petak dengan lebih baik.

Yang akan Anda pelajari

Codelab ini akan mengajari Anda cara men-debug Petak CSS dengan Chrome DevTools.

  • Cara mengaktifkan fitur Proses debug petak dari panel Elemen
  • Cara menyesuaikan setelan overlay petak di panel Tata Letak
  • Cara mengedit gaya dengan bantuan overlay petak

Yang akan Anda perlukan

  • Komputer yang berfungsi dan Wi-Fi dengan koneksi baik
  • Chrome 87 dan yang lebih baru.
  • [Opsional] Pemahaman dasar tentang Petak CSS.

Yang akan Anda lakukan

Anda akan memecahkan teka-teki ini dengan bantuan alat proses debug Petak CSS.

Teka-teki Chrome

2. Mulai

Klik link berikut untuk membuka halaman teka-teki:

Berikutnya, buka Chrome DevTools di halaman teka-teki.

3. Mengaktifkan overlay petak

Periksa teka-teki di panel Elemen. Klik dan fokus pada node penampung teka-teki:

<div class="chrome-puzzle">

Di panel Elemen, perhatikan bahwa ada badge grid di sebelah penampung teka-teki. Klik untuk mengaktifkan overlay petak.

Video ini menunjukkan cara menyelesaikan langkah-langkah di atas.

4. Menyesuaikan tampilan overlay petak

Saat ini, overlay petak ditampilkan dengan nomor baris. Mari kita sesuaikan tampilan lebih lanjut untuk membantu memecahkan teka-teki.

Klik panel Tata letak, pilih Sembunyikan label garis di menu drop-down untuk menyembunyikan nomor baris pada overlay petak.

Sekarang, buka panel Gaya, periksa CSS penampung teka-teki. CSS ini berisi properti grid-template-areas:

.chrome-puzzle {
  grid-template-areas:
    "top-left top-right"
    "bottom-left bottom-right";
}

Nama area berguna bagi kita untuk menyelesaikan teka-teki ini. Mari perbarui setelan untuk menampilkannya di layar.

Kembali ke panel Tata Letak, aktifkan kotak centang Tampilkan nama area.

Ta-da! Overlay petak sekarang menampilkan nama area setiap potongan teka-teki.

Video ini menunjukkan cara menyelesaikan langkah-langkah di atas.

5. Memecahkan teka-teki

Dengan menampilkan nama area di layar, kita dapat mulai mengerjakan teka-teki.

Mari kita tempatkan setiap potongan teka-teki ke area yang benar.

Kita bisa mulai dengan melakukan inspeksi potongan teka-teki pertama.

<img src="...-grid-4.png" class="piece-4">

Di panel Gaya, cari class CSS potongan tersebut:

.piece-4 {
    grid-area: auto;
}

grid-area saat ini disetel ke auto. Anda dapat memperbaruinya dengan nama area yang benar.

Area mana seharusnya potongan ini berada? Misalnya area yang benar dari potongan ini adalah top-right, Anda kemudian dapat mengganti nilai auto dengan top-right. Visualisasikan perubahan secara langsung. Potongan tersebut sekarang ditempatkan di area top-right.

Video ini menunjukkan cara menyelesaikan langkah-langkah di atas.

Perbarui grid-area setiap potongan sampai Anda menyelesaikan teka-teki.

Teka-teki selesai

6. Selamat!

Selamat! Anda berhasil menyelesaikan codelab ini.

Berikut adalah dokumentasi jika Anda ingin mempelajari lebih lanjut alat proses debug Petak CSS.

Apa pendapat Anda tentang codelab ini?

Membosankan. Bagus, saya suka!