Gunakan panel Bantuan AI untuk gaya guna memahami tata letak keseluruhan situs, gaya elemen tertentu, dan mendapatkan perbaikan yang dihasilkan AI untuk bug CSS.
Membuka panel "Bantuan AI"
Panel Bantuan AI akan terbuka di panel samping.
Dari panel Elemen
Untuk membuka bantuan AI dari panel Elements, saat memeriksa node DOM, klik kanan node, lalu pilih opsi Tanya AI.
Saat Anda membuka Bantuan AI seperti ini, elemen DOM yang diperiksa sudah dipilih sebelumnya sebagai elemen konteks untuk percakapan.
Atau, klik tombol mengambang yang terlampir pada node DOM yang di-hover.
Dari menu perintah
Untuk membuka Bantuan AI dari menu perintah, ketik AI, lalu jalankan perintah
Tampilkan bantuan AI, yang memiliki badge Panel di sampingnya.
Dari menu "Alat lainnya"
Atau, di sudut kanan atas, pilih Opsi lainnya > Alat lainnya > Bantuan AI.
Konteks percakapan
Percakapan dengan bantuan AI selalu terkait dengan elemen yang saat ini diperiksa, yaitu elemen terakhir yang dipilih di hierarki DOM panel Elements. Referensi ke elemen ini ditampilkan di pojok kiri bawah panel.
Ubah konteks menggunakan pemilih elemen di samping elemen saat ini atau dengan memilih dari pohon DOM panel Elemen.
Dengan konteks yang dipilih, Anda dapat mengambil screenshot area tampilan dan mengirimkannya ke chat Anda. Klik tombol Ambil screenshot di samping kolom input chat.
Anda dapat menggunakan screenshot untuk memberikan konteks visual tambahan pada perintah Anda, misalnya, untuk memeriksa apakah semua tombol yang terlihat memiliki jarak yang sama.
Meskipun elemen yang saat ini diperiksa adalah dasar percakapan,
bantuan AI memiliki akses ke semua API web untuk mengumpulkan lebih banyak informasi dari halaman yang diperiksa. Hal ini mencakup membuat kueri elemen lain dengan
document.querySelector atau mengevaluasi gaya yang dihitung.
Penulisan Perintah
Saat memulai percakapan baru, bantuan AI untuk gaya menawarkan contoh perintah untuk membantu Anda memulai dengan cepat.
Klik salah satu perintah untuk mengisi otomatis kolom input perintah di bagian bawah panel.
Atau, ketik perintah atau pertanyaan Anda sendiri ke dalam kolom input.
Untuk mengirim perintah, tekan Enter atau klik panah di sisi kanan kolom input.
Alur percakapan
Mengirim perintah akan memulai percakapan dengan agen penataan gaya. Untuk mendapatkan informasi yang diperlukan untuk menjawab perintah Anda dengan sebaik-baiknya, agen membuat dan menjalankan JavaScript yang memanggil API web. Progres agen ditampilkan dalam langkah-langkah. Status langkah
awal adalah Investigating….
Label langkah diperbarui saat agen menjalankan tindakan yang lebih spesifik untuk menjawab pertanyaan Anda.
Setelah agen menemukan jawaban akhir, jawaban tersebut akan ditampilkan di bawah langkah-langkah penyelidikan, termasuk saran untuk perintah lanjutan.
Klik salah satu perintah yang disarankan untuk melanjutkan percakapan. Klik
langkah penyelidikan untuk lebih memahami apa yang dilakukan bantuan AI di balik layar.
Saat meluaskan chip progres, Anda akan melihat kode yang telah dieksekusi agen, bersama dengan nilai yang ditampilkan. Salin kode yang dieksekusi untuk digunakan lebih lanjut, seperti mengeksekusinya dengan panel Konsol.
Percakapan yang dijeda
Bantuan AI dapat menghasilkan kode dengan efek samping. Jika hal itu terjadi, percakapan akan dijeda sebelum kode dijalankan.
Saat percakapan dijeda, tinjau kode yang diusulkan oleh agen. Klik Lanjutkan untuk melanjutkan atau Batal untuk mencegah eksekusi.
Menyimpan perubahan pada ruang kerja Anda
Dengan folder ruang kerja yang terhubung, Anda dapat menyimpan perubahan gaya yang disarankan oleh bantuan AI kembali ke file sumber CSS di komputer Anda.
Untuk melakukannya:
Pertama, buat file metadata dan hubungkan folder ruang kerja.
Atau, Anda dapat menambahkan folder secara manual.
Mulai chat dari panel Elemen.
Minta bantuan AI untuk mengubah CSS Anda.
Bantuan AI dapat membuat kode dan menjeda eksekusi. Tinjau kode dan klik Lanjutkan untuk menguji perubahan secara langsung.
Luaskan bagian Perubahan yang belum disimpan, lalu klik Terapkan ke ruang kerja.
Tinjau perubahan dalam
diff, lalu klik Simpan semua.
Untuk mempelajari alur kerja ini, lihat:
Tidak ada jawaban yang diberikan
Bantuan AI mungkin tidak memberikan jawaban karena berbagai alasan.
Jika menurut Anda perintah Anda adalah sesuatu yang seharusnya dapat dibahas oleh bantuan AI, ajukan bug.
Histori percakapan
Setelah Anda memulai percakapan, setiap jawaban berikutnya didasarkan pada interaksi Anda sebelumnya dengan AI.
Bantuan AI menyimpan histori percakapan Anda antar-sesi, sehingga Anda dapat mengakses percakapan sebelumnya meskipun setelah DevTools atau Chrome dimuat ulang.
Gunakan kontrol di sudut kiri atas panel untuk mengontrol histori percakapan Anda.
Mulai baru
Untuk memulai percakapan baru dengan konteks percakapan yang saat ini dipilih, klik tombol .
Lanjutkan
Untuk melanjutkan percakapan sebelumnya, klik tombol dan pilih percakapan dari menu konteks.
Hapus
Untuk menghapus percakapan dari histori, klik tombol .
Memberi rating jawaban dan memberikan masukan
Bantuan AI adalah fitur eksperimental. Oleh karena itu, kami secara aktif mencari masukan Anda untuk mempelajari cara meningkatkan kualitas jawaban dan pengalaman secara keseluruhan.
Memberi suara pada jawaban
Beri rating jawaban menggunakan tombol Suka dan Tidak suka di bawah jawaban.
Laporkan jawaban
Untuk melaporkan konten tidak pantas, klik tombol di samping tombol voting.