Dipublikasikan: 23 September 2025
Hari ini kami meluncurkan pratinjau publik untuk server Chrome DevTools Model Context Protocol (MCP) baru, yang menghadirkan kecanggihan Chrome DevTools ke asisten coding AI.
Agen pengodean 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 mengubahnya. Asisten coding AI dapat men-debug halaman web langsung di Chrome, dan memanfaatkan kemampuan pen-debug-an DevTools serta insight performa. Hal ini meningkatkan akurasi saat mengidentifikasi dan memperbaiki masalah.
Lihat sendiri cara kerjanya:
Apa yang dimaksud dengan Model Context Protocol (MCP)?
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 rekaman aktivitas performa. LLM kemudian dapat menganalisis rekaman aktivitas performa untuk menyarankan potensi peningkatan. Dengan menggunakan protokol MCP, server MCP Chrome DevTools dapat menghadirkan kemampuan pen-debug-an baru ke agen pengodean Anda untuk membuatnya lebih baik dalam membangun situs.
Jika Anda ingin mengetahui lebih lanjut cara kerja MCP, lihat dokumentasi MCP.
Apa yang dapat Anda lakukan dengan fitur ini?
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 verifikasi secara otomatis bahwa solusi berfungsi sebagaimana mestinya dengan MCP Chrome DevTools.
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 mengapa 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
Menavigasi, mengisi formulir, dan mengklik 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 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 rekaman aktivitas 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 perintah tersebut berfungsi, jalankan perintah berikut di agen coding Anda:
Please check the LCP of web.dev.
Untuk mengetahui detail selengkapnya, lihat dokumentasi MCP Alat Developer Chrome 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 seorang developer yang menggunakan asisten coding AI maupun 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.