Dipublikasikan: 23 September 2025
Hari ini kami meluncurkan pratinjau publik untuk server Chrome DevTools Model Context Protocol (MCP) yang baru, yang menghadirkan kemampuan Chrome DevTools ke asisten pengkodean AI.
Agen pengkodean menghadapi masalah mendasar: mereka tidak dapat melihat apa yang sebenarnya dilakukan kode yang mereka hasilkan saat dijalankan di browser. Mereka secara efektif memprogram dengan mata tertutup.
Server MCP Chrome DevTools mengubah hal ini. Asisten pengkodean AI dapat melakukan proses debug halaman web langsung di Chrome, dan mendapatkan manfaat dari kemampuan proses debug DevTools dan insight performa. Hal ini meningkatkan akurasi mereka saat mengidentifikasi dan memperbaiki masalah.
Lihat sendiri cara kerjanya:
Apa yang dimaksud dengan Model Context Protocol (MCP)?
The Model Context Protocol (MCP) adalah standar open source untuk menghubungkan model bahasa besar (LLM) ke alat dan sumber data eksternal. Server MCP Chrome DevTools menambahkan kemampuan proses debug ke agen AI Anda.
Misalnya, server MCP Chrome DevTools menyediakan alat yang disebut performance_start_trace. Saat ditugaskan untuk menyelidiki performa situs Anda, LLM dapat menggunakan alat ini untuk memulai Chrome, membuka situs Anda, dan menggunakan Chrome DevTools untuk merekam pelacakan performa. LLM kemudian dapat menganalisis pelacakan performa untuk menyarankan potensi peningkatan. Dengan menggunakan protokol MCP, server MCP Chrome DevTools dapat menghadirkan kemampuan proses debug baru ke agen pengkodean Anda untuk membuatnya lebih baik dalam membangun situs.
Jika Anda ingin mengetahui lebih lanjut cara kerja MCP, lihat dokumentasi MCP.
Apa kegunaannya?
Berikut beberapa contoh perintah yang dapat Anda coba di asisten AI pilihan Anda seperti Gemini CLI.
Memverifikasi perubahan kode secara real-time
Buat perbaikan dengan agen AI Anda, lalu otomatis verifikasi bahwa solusi berfungsi seperti yang diharapkan dengan Chrome DevTools MCP.
Perintah yang dapat dicoba:
Verify in the browser that your change works as expected.
Mendiagnosis error jaringan dan konsol
Berikan kemampuan kepada agen Anda untuk menganalisis permintaan jaringan guna menemukan masalah CORS atau memeriksa log konsol untuk memahami alasan fitur tidak berfungsi seperti yang diharapkan.
Perintah yang dapat dicoba:
A few images on localhost:8080 are not loading. What's happening?
Menyimulasikan perilaku pengguna
Buka, isi formulir, dan klik tombol untuk mereproduksi bug dan menguji alur pengguna yang kompleks—semuanya sambil memeriksa lingkungan runtime.
Perintah yang dapat dicoba:
Why does submitting the form fail after entering an email address?
Melakukan proses debug masalah gaya dan tata letak langsung
Minta agen AI Anda untuk terhubung ke halaman aktif, memeriksa DOM dan CSS, serta mendapatkan saran konkret untuk memperbaiki masalah tata letak yang kompleks seperti elemen yang meluap berdasarkan data langsung dari browser.
Perintah yang dapat dicoba:
The page on localhost:8080 looks strange and off. Check what's happening there.
Mengotomatiskan audit performa
Instruksikan agen AI Anda untuk menjalankan pelacakan performa, menganalisis hasilnya, dan menyelidiki masalah performa tertentu seperti angka LCP yang tinggi.
Perintah yang dapat dicoba:
Localhost:8080 is loading slowly. Make it load faster.
Lihat dokumentasi referensi alat kami untuk mengetahui daftar semua alat yang tersedia.
Mulai
Untuk mencobanya, tambahkan entri konfigurasi berikut ke klien MCP Anda:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Untuk memeriksa apakah konfigurasi tersebut berfungsi, jalankan perintah berikut di agen pengkodean Anda:
Please check the LCP of web.dev.
Untuk mengetahui detail selengkapnya, lihat dokumentasi MCP Chrome DevTools di GitHub.
Libatkan diri
Kami membangun MCP Chrome DevTools secara bertahap, dimulai dengan versi pratinjau publik yang kami rilis hari ini. Kami secara aktif mencari masukan dari Anda dan komunitas tentang kemampuan yang harus kami tambahkan berikutnya. Baik Anda adalah developer yang menggunakan asisten pengkodean AI atau vendor yang membangun alat pengembangan AI generasi berikutnya, insight Anda akan sangat berharga dan jika ada sesuatu yang tidak ada atau tidak berfungsi, harap ajukan masalah di GitHub.