Dipublikasikan: 21 Oktober 2024
Minggu lalu, kami memperkenalkan panel baru ke DevTools: Bantuan AI dapat membantu Anda men-debug masalah gaya visual dengan Gemini langsung di DevTools.
Ingin tahu apa yang dapat dilakukannya? Lihat 5 cara luar biasa berikut yang dapat dilakukan fitur baru ini untuk memudahkan Anda menata gaya halaman, mulai dari memahami tata letak hingga memperbaiki pesawat.
1. Memahami tata letak
Saat membangun {i>website<i}, Anda tidak selalu memulai dari awal. Sering kali, Anda perlu mem-build berdasarkan kode yang sudah ada, yang sebenarnya tidak Anda ketahui sebelumnya - dan dalam kasus terburuk, tidak ada orang di sekitar Anda yang sudah memilikinya.
Tanyakan AI tentang tata letak elemen dan pahami alasan elemen ditampilkan seperti itu
hingga node terakhir - dan alasan overflow: hidden; ini pada elemen
sebenarnya ada karena alasan tertentu. 👀
Perintah yang dapat dicoba
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Pemrograman berpasangan
CSS kini benar-benar canggih. Dengan begitu banyak kemungkinan, terkadang Anda mungkin merasa kebingungan: apakah align-items yang saya butuhkan? Atau justify-items? Atau
justify-self atau align-content?
Terkadang Anda benar-benar tahu apa yang ingin dilakukan, tetapi tidak dapat mendapatkan kumpulan properti CSS yang tepat. Lain kali Anda berada dalam situasi ini, jelaskan masalah Anda kepada AI dan biarkan AI mencari tahu solusinya untuk Anda.
Bantuan AI akan menyelidiki kode yang ada dan membandingkannya dengan kode yang Anda coba capai, yang menyarankan perbaikan yang diperlukan untuk Anda tinjau, terapkan, dan salin ke codebase Anda.
3. Penasihat aksesibilitas
Membuat situs Anda dapat diakses dan mudah digunakan dengan teknologi asistif sangat penting. Pertimbangkan aksesibilitas sejak awal pengembangan, bukan sebagai kesan sampingan, dan usahakan untuk mengikuti Panduan Aksesibilitas Konten Web (WCAG) selama proses pengembangan Anda.
Gunakan bantuan AI untuk mendapatkan tips tentang tempat <div> dapat diganti dengan elemen HTML yang lebih semantik, cara atribut aria-* tambahan dapat membantu, atau cara kontras warna dapat ditingkatkan.
Perintah yang dapat dicoba
What about color contrast in this element?
4. Membuat salinan laporan
Tren datang dan pergi: ada gradien, bayangan, dan batas yang tajam, diikuti dengan desain datar, yang beralih ke era desain saat ini dengan warna neon cerah pada latar belakang gelap.
Namun, terkadang tampilan yang seragam di web membuat lelah, bukan? Jika hari ini adalah salah satu hari tersebut, mungkin minta bantuan AI untuk mengubah hal-hal dan membuat web menjadi sedikit lebih menyenangkan lagi - seperti di wahana taman hiburan.
Perintah untuk mencoba
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Menjadi mekanik pesawat terbang
Menjelaskan masalah gaya visual, membantu memperbaikinya, memberikan saran tentang aksesibilitas, dan mengubah gaya yang ada - ada banyak hal yang dapat didukung oleh bantuan AI - dan masih banyak lagi. Percayakah Anda bahwa bantuan AI bahkan membantu Anda memperbaiki pesawat? Tidak diperlukan pengalaman sebelumnya, kenakan seragam dan mulailah belajar di Hangar Chrome DevTools.
Dan pastikan untuk memberi tahu kami tentang pengalaman Anda di issue tracker publik kami!