Chat dengan bantuan AI

Matthias Rohmer
Sofia Emelianova
Sofia Emelianova
GitHub

DevTools menyediakan panel bantuan AI yang membantu Anda memahami situs dan memperbaiki masalah dengan melakukan chat dengan agen AI bawaan.

Panel bantuan AI didukung oleh Gemini dan melakukan hal berikut:

  • Mengkhususkan diri dalam pengembangan web.
  • Dapat menjawab pertanyaan umum tentang seluruh halaman web serta memberikan insight spesifik tentang berbagai topik, termasuk namun tidak terbatas pada gaya visual, jaringan, performa, dan lainnya.
  • Secara otomatis mempersempit dan memilih konteks tertentu untuk Anda diskusikan, seperti elemen DOM, permintaan jaringan, peristiwa pelacakan performa, dan lainnya.
  • Dapat melakukan tindakan otomatis seperti menjalankan audit dan merekam pelacakan performa.
  • Menyediakan panduan langkah demi langkah tentang tindakan dan alasan serta link ke bagian DevTools yang relevan, sehingga Anda dapat memeriksanya dengan satu klik.
  • Dapat menyarankan perubahan kode dan membuat perintah dengan insight-nya untuk dieksekusi oleh agen coding Anda.

Dengan bantuan AI, Anda dapat men-debug gaya visual, jaringan, performa, sumber situs, dan lainnya.

Untuk melakukan chat dengan Gemini di panel bantuan AI secara efektif, pelajari cara membuka panel, perintah, dan mengontrol alur percakapan.

Membuka panel bantuan AI

Panel bantuan AI akan terbuka di laci secara default.

Untuk membuka panel, klik tombol bantuan AI yang terletak di titik entri global di sebelah kanan toolbar utama di bagian atas.

Tombol bantuan AI di kanan atas toolbar DevTools.

Dari panel

Anda dapat membuka panel, dengan konteks percakapan dipilih, langsung dari panel Elemen, Jaringan, Sumber, atau Performa dengan dua cara:

  • Klik tombol Ikon bantuan AI Debug dengan AI di samping elemen, permintaan jaringan, file sumber, atau insight performa yang diperluas.

    Tombol 'Debug dengan AI' di samping elemen.

  • Klik kanan elemen, permintaan, file, atau entri pelacakan, lalu pilih salah satu opsi perintah umum dari menu konteks Debug dengan AI.

    Opsi 'Debug dengan AI' di menu konteks elemen.

Dari menu perintah

Untuk membuka bantuan AI dari menu perintah, ketik AI, lalu jalankan perintah Tampilkan bantuan AI , yang memiliki badge Laci di sampingnya.

Menu perintah yang terbuka dengan 'Tampilkan bantuan AI' ditandai.

Dari menu 'Alat lainnya'

Atau, di sudut kanan atas, pilih Opsi lainnya > Alat lainnya > Bantuan AI.

Menu alat lainnya yang terbuka.

Penulisan Perintah

Saat memulai percakapan baru, bantuan AI menawarkan contoh perintah untuk membantu Anda memulai dengan cepat.

Perintah umum di panel bantuan AI.

Klik salah satu perintah untuk mengisi 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.

Perintah terbuka tanpa konteks

Dengan kotak chat bentuk bebas, Anda dapat mengajukan pertanyaan terbuka tingkat tinggi tanpa konteks sebelumnya. Contoh:

  • How to use DevTools to debug accessibility?

    Bantuan AI akan menjalankan audit Lighthouse untuk aksesibilitas terlebih dahulu guna menjawab perintah Anda dengan lebih baik.

  • What are the slowest network requests on this page?

    Bantuan AI akan memberikan daftar permintaan yang mencurigakan dan link ke permintaan tersebut di panel Jaringan, sehingga Anda dapat memilih permintaan sebagai konteks percakapan dengan satu klik.

  • What performance issues exist on the page?

    Bantuan AI akan otomatis merekam pelacakan performa dengan setelan yang Anda pilih untuk menjawab perintah ini.

  • Perintah seperti How do I use the Animation panel? atau Where is the high contrast setting in DevTools? akan memberikan bantuan langsung terkait DevTools itu sendiri.

Setelah Anda memulai chat, bantuan AI akan memperbarui konteks secara cerdas berdasarkan tindakan Anda saat chat kosong, sambil menghormati pilihan manual Anda saat Anda membuatnya.

Perintah dengan konteks

Saat Anda membuka bantuan AI dari panel, konteks percakapan yang sesuai akan dipilih di kotak chat, sehingga Anda dapat melakukan chat secara khusus tentang apa yang Anda pilih.

Konteks percakapan dipilih.

Kapan saja, Anda dapat mengubah konteks secara manual dengan memilih elemen di Elemen, permintaan di Jaringan, entri pelacakan di Performa, atau file di Sumber.

Anda juga dapat menyalin bagian file dari, misalnya, panel Sumber dan menempelkannya ke chat untuk menanyakan fungsinya.

Selanjutnya, pelajari lebih lanjut alur percakapan di bantuan AI.

Alur percakapan

Mengirim perintah akan memulai percakapan dengan agen. Untuk mendapatkan informasi yang diperlukan untuk menjawab perintah Anda dengan sebaik-baiknya, agen akan membuat dan menjalankan JavaScript yang memanggil API web.

Progres agen ditampilkan dalam langkah-langkah. Status langkah awal adalah Investigating….

Panel bantuan AI setelah percakapan dimulai.

Label langkah awal akan diperbarui saat agen menjalankan tindakan yang lebih spesifik untuk menjawab perintah Anda.

Bergantung pada apa yang Anda debug, agen juga dapat menjalankan tindakan di DevTools seperti merekam pelacakan performa atau menjalankan audit Lighthouse.

Panel bantuan AI merekam rekaman aktivitas performa.

Panduan agen

Setelah agen membuat jawaban untuk perintah Anda, label langkah awal akan berubah menjadi Tampilkan panduan agen atau Tampilkan pemikiran, yang dapat Anda perluas untuk melihat langkah-langkah yang diambil oleh agen untuk menganalisis data di panel samping di sebelah kanan.

Panel bantuan AI dengan panduan agen terbuka.

Langkah-langkahnya meliputi:

Langkah yang diperluas dalam panduan agen.

  • Cuplikan kode yang dapat diperluas yang dijalankan agen bersama dengan data yang ditampilkan. Anda dapat menyalin kode dan menjalankannya di Konsol.
  • Widget yang menyajikan temuan dalam format yang lebih mudah dibaca manusia.

Contoh widget yang mudah dibaca manusia dalam panduan agen.

Widget memiliki tombol Tampilkan di sudut kanan atas yang akan mengarahkan Anda ke bagian DevTools yang relevan.

Perintah lanjutan

Setelah agen menemukan jawaban akhir, agen dapat menyarankan perintah lanjutan. Klik salah satu perintah untuk melanjutkan percakapan.

Perintah lanjutan di bawah jawaban.

Membuat perintah untuk agen coding Anda

Untuk membuat perintah untuk agen coding Anda, klik Salin ke agen coding.

Opsi 'Salin ke agen coding'.

Agen akan meringkas temuan dan insight-nya serta memberikan perintah yang dapat ditindaklanjuti, dalam bentuk yang diperkecil atau dalam format Markdown yang dapat dibaca manusia, yang dapat Anda salin ke papan klip dan melanjutkan coding dengan agen AI pilihan Anda.

Percakapan yang dijeda

Bantuan AI mungkin membuat kode dengan efek samping. Jika hal itu terjadi, percakapan akan dijeda sebelum kode dieksekusi.

Panel bantuan AI dengan percakapan yang dijeda.

Saat percakapan dijeda, tinjau kode yang diusulkan oleh agen. Klik Lanjutkan untuk melanjutkan atau Batalkan untuk mencegah eksekusi.

Anda dapat memeriksa perubahan kode yang disarankan di panel Perubahan.

Perubahan kode yang dihasilkan oleh agen di panel Perubahan.

Agen menerapkan perubahan di dalam DevTools, tetapi Anda dapat mengonfigurasi ruang kerja untuk mengizinkan DevTools menyimpan perubahan ke sumber Anda.

Menyimpan perubahan ke ruang kerja

Dengan folder ruang kerja yang terhubung, Anda dapat menyimpan perubahan gaya visual yang disarankan oleh bantuan AI kembali ke file sumber CSS di komputer Anda.

Untuk melakukannya:

  1. Pertama, buat file metadata dan hubungkan folder ruang kerja.

    Atau, Anda dapat menambahkan folder secara manual.

  2. Mulai chat dari panel Elemen.

  3. Perintahkan bantuan AI untuk mengubah CSS Anda.

  4. Bantuan AI dapat membuat kode dan menjeda eksekusi. Tinjau kode dan klik Lanjutkan untuk menguji perubahan secara langsung.

  5. Luaskan bagian Perubahan yang belum disimpan dan klik Terapkan ke ruang kerja.

  6. Tinjau perubahan dalam diff dan klik Simpan semua.

Untuk mempelajari alur kerja ini, lihat:

Tidak ada jawaban yang diberikan

Bantuan AI mungkin tidak memberikan jawaban karena berbagai alasan.

Panel bantuan AI dengan percakapan yang ditolak.

Jika menurut Anda perintah Anda adalah sesuatu yang dapat didiskusikan oleh bantuan AI, ajukan bug.

Histori percakapan

Setelah Anda memulai percakapan, setiap jawaban berikutnya akan didasarkan pada interaksi sebelumnya antara Anda dan AI.

Bantuan AI menyimpan histori percakapan Anda antar-sesi, sehingga Anda dapat mengakses chat sebelumnya meskipun setelah DevTools atau Chrome dimuat ulang.

Gunakan kontrol di sudut kiri atas panel untuk mengontrol histori percakapan Anda.

Panel bantuan AI dengan kontrol histori yang ditandai.

Mulai baru

Untuk memulai percakapan baru dengan konteks percakapan yang saat ini dipilih, klik tombol .

Lanjutkan

Untuk melanjutkan percakapan sebelumnya, klik tombol dan pilih 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.

Panel bantuan AI dengan kontrol penilaian disorot.

Memberikan suara pada jawaban

Beri rating jawaban menggunakan tombol Suka dan Tidak suka di bawah jawaban.

Melaporkan jawaban

Untuk melaporkan konten yang tidak pantas, klik tombol di samping tombol suara.