Tips DevTools: Cara memeriksa dan men-debug flexbox CSS
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Chrome DevTools membuat proses debug tata letak flexbox CSS menjadi intuitif. Panel Elemen memberi Anda Editor Flexbox yang kontekstual dan overlay yang dapat disesuaikan.
Tonton video untuk mempelajari cara:
- Gunakan Editor Flexbox untuk mengubah properti flexbox dengan mengklik tombol, bukan mengetikkannya.
- Alihkan overlay flexbox di area pandang untuk langsung melihat perubahan yang Anda buat.
- Gunakan bagian Elemen > Tata Letak > Flexbox untuk melihat daftar semua elemen dan menemukannya di hierarki DOM. Selain itu, Anda dapat menyesuaikan warna overlay di sini.
Untuk mempelajari lebih lanjut flexbox CSS secara umum, lihat Pelajari CSS > Flexbox.
Untuk pengalaman proses debug yang lebih praktis di DevTools, ikuti tutorial Memeriksa dan men-debug tata letak flexbox CSS.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2022-09-01 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2022-09-01 UTC."],[],[],null,[]]
