Dipublikasikan: 19 Mei 2026
Alat coding AI sangat efektif dalam menulis kode, tetapi sering kali terputus dari eksekusinya. Mereka dapat membuat aplikasi web yang kompleks, tetapi mereka tidak dapat mengamati perilakunya atau memeriksa outputnya di browser aktif.
Chrome DevTools untuk agen memberi agen coding Anda visibilitas yang diperlukan untuk memverifikasi, men-debug, dan mengoptimalkan kode secara real time. Beberapa bulan yang lalu, kami menunjukkannya untuk pertama kalinya, dan kini kami dengan senang hati mengumumkan bahwa Chrome DevTools untuk agen kini tersedia sebagai rilis 1.0 yang stabil.
Menghubungkan agen Anda ke browser
Chrome DevTools untuk agen memungkinkan agen Anda merasakan situs Anda seperti yang dilakukan pengguna sungguhan. Rilis stabil ini mencakup beberapa cara bagi Anda dan agen Anda untuk berinteraksi dengan Chrome:
- Server Model Context Protocol (MCP): Server yang menghubungkan Model Bahasa Besar (LLM) ke kemampuan pen-debug DevTools.
- Antarmuka command line (CLI): Alternatif yang hemat token yang memungkinkan agen mengelompokkan tindakan ke dalam skrip.
- Keahlian agen: Petunjuk ahli yang mengajari agen Anda cara dan waktu menggunakan alat tertentu untuk tugas seperti aksesibilitas atau penelusuran bug performa.
Men-debug, mengemulasi, dan mengaudit secara otomatis
Dengan rilis 1.0, agen coding Anda kini dapat melakukan tugas debug lanjutan yang sebelumnya dilakukan secara manual.
Mengotomatiskan audit kualitas
Agen Anda kini dapat menjalankan audit Lighthouse untuk mengevaluasi kualitas situs. Fitur ini dapat mengidentifikasi masalah terkait aksesibilitas, SEO, praktik terbaik, dan penjelajahan dengan agen. Ini seperti memiliki linter yang memahami runtime. Digunakan sebagai gerbang kualitas, fitur ini mengubah agen coding Anda menjadi pakar yang dapat menemukan penghambat penting sebelum mencapai produksi.
Meniru pengalaman pengguna di dunia nyata
Agen Anda dapat menggunakan DevTools untuk agen guna menguji tampilan dan performa situs di berbagai perangkat atau di lokasi yang berbeda menggunakan alat emulasi. Alat ini dapat mengubah ukuran jendela, menyimulasikan geolokasi, dan membatasi kecepatan jaringan dan CPU untuk meniru kondisi dunia nyata. Dengan cara ini, agen Anda dapat menguji perilaku khusus seluler, seperti menu burger, tanpa Anda harus mengubah ukuran browser secara manual.
Mengembangkan dan men-debug Ekstensi Chrome
Anda juga dapat mengizinkan agen Anda tidak hanya membantu Anda mengembangkan Ekstensi Chrome, tetapi juga men-debugnya. Agen Anda dapat menginstal, memuat ulang, dan memicu tindakan ekstensi secara langsung. Hal ini membantu mengotomatiskan siklus "simpan dan muat ulang" yang sering terjadi selama pengembangan. Fitur ini juga dapat mempelajari skrip latar belakang dan halaman ekstensi untuk membantu Anda memperbaiki bug dalam penyiapan browser yang lebih kompleks.
Men-debug dan menguji alat WebMCP
Kami juga menghadirkan visibilitas mendalam pada Uji Coba Asal WebMCP (Web Model Context Protocol) untuk membantu Anda menerapkan API baru ini.
Daripada membuat agen Anda mengandalkan sinyal untuk menyimpulkan rencana navigasi DOM, agen dapat berinteraksi langsung dengan alat terstruktur yang Anda ekspos menggunakan WebMCP. Hal ini mempermudah pengembangan, pengujian, dan proses debug alat ini: agen Anda dapat mencantumkan, memanggil secara terprogram, dan memvalidasi kebenarannya secara real time. Hal ini menyederhanakan proses penambahan dukungan WebMCP ke situs Anda dan pengujiannya.
Mendeteksi dan men-debug kebocoran memori
Kami juga telah menambahkan alat khusus untuk analisis memori. Agen Anda kini dapat mengambil snapshot heap untuk mengidentifikasi kebocoran memori, seperti node DOM yang terlepas. Dengan menggunakan keterampilan khusus untuk men-debug kebocoran memori, agen ini bertindak sebagai pakar performa untuk membantu Anda menjaga aplikasi tetap ringan dan cepat.
Menyerahkan sesi dengan fitur sambung otomatis
Anda dapat membagikan konteks browser saat ini dengan agen, alih-alih agen membuka instance browser sandbox-nya sendiri (yang merupakan cara DevTools untuk agen biasanya memberi agen akses ke browser). Fitur ini sangat cocok untuk men-debug hal-hal yang memerlukan login, seperti dasbor yang diautentikasi, tempat Anda ingin agen AI mengambil alih penyelidikan teknis tanpa Anda harus mengautentikasi ulang semuanya.
Mengekspos status internal dengan alat developer pihak ketiga
Alat developer pihak ketiga memungkinkan aplikasi web Anda membagikan status internal dan detail komponen langsung ke agen AI. Dengan memberikan akses ke data yang biasanya tersembunyi dari analisis standar, alat ini memberikan konteks yang dibutuhkan agen untuk memahami logika yang kompleks. Hal ini menghasilkan saran penelusuran bug yang lebih akurat berdasarkan perilaku aplikasi sebenarnya di browser.
Mulai
Anda dapat menginstal rilis stabil menggunakan npm atau mengonfigurasinya langsung di agen pilihan Anda:
Antigravity
Chrome DevTools untuk agen sudah di-bundle dengan Antigravity 2.0. Anda dapat langsung menggunakannya dengan sub-agen browser. Coba gunakan perintah garis miring seperti:
/browser Navigate to the Google homepage
Untuk mengakses keterampilan agen khusus, sebaiknya instal plugin DevTools selama langkah Bangun dengan Google pada penyiapan awal atau dalam setelan aplikasi. Untuk mengetahui informasi selengkapnya, lihat dokumentasi Subagen Antigravity Browser.
Gemini CLI
Untuk menginstal paket dan keterampilan MCP sebagai ekstensi, gunakan perintah berikut:
$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Claude Code
Untuk menginstal Chrome DevTools untuk agen sebagai Plugin Claude Code, gunakan perintah garis miring berikut di Claude Code. Tambahkan registry marketplace:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Lalu, instal plugin dari registry marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Untuk panduan dan contoh perintah yang lebih mendetail, buka dokumentasi Alat Developer Chrome untuk agen kami. Anda juga dapat mempelajari kode sumber di GitHub.