DevTools menyediakan panel bantuan AI yang membantu Anda memahami situs dan memperbaiki masalah dengan melakukan percakapan dengan agen AI.
Dengan bantuan AI, Anda dapat men-debug gaya, jaringan, performa, dan sumber situs Anda.
Untuk melakukan percakapan dengan Gemini secara efektif di panel bantuan AI, pelajari cara membuka panel, membuat perintah, dan mengontrol alur percakapan.
Membuka panel bantuan AI
Panel Bantuan AI akan terbuka di panel samping.
Untuk membuka panel, klik tombol Bantuan AI yang terletak di titik entri global di sebelah kanan toolbar utama di bagian atas.
Anda juga dapat membuka panel langsung dari panel Elements, Network, Sources, atau Performance dengan mengklik kanan elemen atau permintaan dan memilih Ask AI.
Dari menu perintah
Untuk membuka Bantuan AI dari menu perintah, ketik AI, lalu jalankan perintah
Tampilkan bantuan AI, yang memiliki badge Drawer di sampingnya.
Dari menu "Alat lainnya"
Atau, di sudut kanan atas, pilih Opsi lainnya > Alat lainnya > Bantuan AI.
Penulisan Perintah
Saat memulai percakapan baru, bantuan AI 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 di kolom input.
Untuk mengirim perintah, tekan Enter atau klik panah di sisi kanan kolom input.
Dengan kotak chat gratis, Anda dapat mengajukan pertanyaan tingkat tinggi seperti "bagaimana cara menggunakan alat developer untuk men-debug aksesibilitas?" atau "permintaan jaringan apa yang lambat?", serta menyalin bagian file dari, misalnya, panel Sumber dan menempelkannya ke dalam chat untuk menanyakan fungsinya.
Bantuan AI untuk penataan gaya
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 bantuan AI dari panel Elemen
Untuk membuka Bantuan AI dari panel Elemen, 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.
Konteks percakapan
Chat 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.
Bantuan AI untuk jaringan
Gunakan panel Bantuan AI untuk jaringan guna memahami permintaan yang dikirim oleh situs Anda.
Membuka bantuan AI dari panel Jaringan
Untuk membuka bantuan AI dari panel Jaringan, klik kanan permintaan, lalu pilih opsi Tanya AI.
Saat Anda membuka bantuan AI seperti ini, permintaan jaringan yang dipilih akan dipilih sebelumnya sebagai konteks untuk percakapan.
Atau, klik tombol mengambang di samping permintaan jaringan yang Anda arahkan kursornya.
Konteks percakapan
Chat dengan bantuan AI terkait dengan permintaan jaringan yang saat ini dipilih dalam daftar permintaan panel Network. Referensi untuk permintaan ini ditampilkan di pojok kiri bawah panel.
Ubah konteks dengan mengklik permintaan lain di panel Network.
Bantuan AI menggunakan URL permintaan, header, waktu, dan rantai inisiasi permintaan untuk menjawab pertanyaan Anda.
Penting: header yang dapat berisi informasi sensitif akan otomatis disamarkan.
Klik tombol Perluas
di chip Analyzing network data setelah memulai percakapan untuk melihat data
mentah yang digunakan oleh bantuan AI.
Bantuan AI untuk performa
Gunakan panel Bantuan AI untuk performa guna memahami profil performa yang direkam di panel Performa.
Membuka bantuan AI dari panel Performa
Untuk membuka bantuan AI dari panel Performa, rekam profil performa terlebih dahulu.
Bergantung pada apa yang ingin Anda selidiki, Anda dapat membuka panel **Bantuan AI** dari insight performa individual atau untuk aktivitas di tampilan rekaman aktivitas performa.
Insight performa
Di tab Insights, buka insight, misalnya, **LCP by phase, lalu klik tombol Ask AI**.
DevTools membuka panel Bantuan AI dengan insight performa ini yang telah dipilih sebelumnya sebagai konteks untuk percakapan.
Tampilan rekaman aktivitas performa
Untuk membuka bantuan AI dari tampilan rekaman aktivitas, klik kanan aktivitas, lalu pilih opsi Tanya AI.
Dalam hal ini, aktivitas ini telah dipilih sebelumnya sebagai konteks untuk percakapan.
Konteks percakapan
Aktivitas performa yang dipilih digunakan sebagai konteks untuk percakapan Anda dengan bantuan AI. Referensi ke aktivitas ini ditampilkan di pojok kiri bawah panel.
Insight performa
Jika Anda mengklik Tanya AI untuk mendapatkan insight performa tertentu, Anda akan melihat insight ini sebagai konteks yang dipilih. Anda dapat mengklik Tanya AI di bagian insight lainnya untuk mengubah pilihan Anda.
Setelah memulai percakapan, perluas bagian Analyzing insight: ... untuk melihat data mentah yang digunakan oleh bantuan AI.
Tampilan rekaman aktivitas
Anda dapat memilih berbagai item dalam rekaman aktivitas performa dan konteksnya akan berubah sesuai dengan item yang dipilih.
Bantuan AI menggunakan waktu dari pohon panggilan yang dipilih untuk menjawab perintah Anda.
Klik tombol
di chip Analyzing call tree setelah memulai percakapan untuk melihat
data mentah yang digunakan oleh bantuan AI.
Bantuan AI untuk sumber
Gunakan panel Bantuan AI untuk sumber guna memahami file yang dimuat dan digunakan oleh situs Anda.
Membuka bantuan AI dari panel Sumber
Untuk membuka Bantuan AI dari panel Sumber, klik kanan file, lalu pilih opsi Tanya AI.
Saat Anda membuka bantuan AI seperti ini, file yang dipilih akan dipilih sebelumnya sebagai konteks percakapan.
Atau, klik tombol mengambang saat mengarahkan kursor ke file.
Konteks percakapan
File yang dipilih digunakan sebagai konteks percakapan Anda dengan bantuan AI. Referensi ke file ini ditampilkan di pojok kiri bawah panel.
Ubah konteks dengan mengklik file lain di panel Sources.
Bantuan AI menggunakan nama, URL, peta sumber (jika tersedia), dan konten file yang dipilih untuk menjawab pertanyaan Anda.
Klik tombol di chip Analyzing file setelah memulai percakapan untuk melihat data mentah yang digunakan oleh bantuan AI.
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 di antara sesi, sehingga Anda dapat mengakses percakapan sebelumnya meskipun 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.