Chrome DevTools untuk Agen AI (MCP)

• Dengan rilis versi pratinjau publik server Chrome DevTools MCP, agen coding AI kini dapat menggunakan fitur debugging dan performa Chrome DevTools
• Sebelumnya agen tidak dapat memeriksa hasil eksekusi kode, tetapi kini mereka bisa memanfaatkan data runtime nyata seperti jaringan, konsol, DOM, dan pelacakan performa
• Dengan memanfaatkan server DevTools MCP, berbagai otomatisasi menjadi mungkin, seperti validasi kode real-time, analisis error jaringan dan konsol, simulasi tindakan pengguna, debugging gaya dan layout, serta audit performa otomatis
• Developer dapat langsung menggunakannya dengan menambahkan server ke konfigurasi klien MCP, dan menjalankan contoh prompt seperti memeriksa LCP atau mendiagnosis error pengiriman formulir
• Google berencana memperluas kemampuan MCP berdasarkan masukan komunitas

---

Ikhtisar

• Google merilis versi pratinjau publik dari server Model Context Protocol (MCP) Chrome DevTools yang baru
• Dengan ini, asisten coding AI dapat langsung menggunakan fitur debugging dan pengukuran performa Chrome DevTools di browser
• Artinya, ini membantu mengatasi kesulitan ketika agen coding tidak bisa memeriksa perilaku nyata dari kode yang berjalan di browser

Pengenalan Model Context Protocol (MCP)

• Model Context Protocol (MCP) adalah standar open source untuk menghubungkan model bahasa besar (LLM) dengan alat eksternal dan sumber data
• Server MCP Chrome DevTools memanfaatkan standar ini untuk terhubung dengan agen AI, sehingga mendukung penggunaan berbagai alat seperti web debugging dan performance tracing
• Sebagai contoh, dengan alat performance_start_trace, LLM dapat menjalankan browser, mengumpulkan dan menganalisis informasi performa, lalu mengusulkan perbaikan
• Melalui protokol MCP, agen coding mendapatkan dukungan yang lebih kuat untuk pengembangan website dan pemecahan masalah
• Cara kerja MCP lebih detail dapat dilihat di dokumentasi MCP resmi

Kasus penggunaan utama

• Validasi perubahan kode secara real-time

  • Setelah agen AI memodifikasi kode, Chrome DevTools MCP dapat langsung memeriksa perilaku di browser
  • Contoh prompt:

    Verify in the browser that your change works as expected.  
    

• Diagnosis error jaringan dan konsol

  • Mendukung diagnosis otomatis seperti analisis permintaan jaringan, deteksi masalah CORS, dan pemeriksaan log konsol
  • Contoh prompt:

    A few images on localhost:8080 are not loading. What's happening?  
    

• Simulasi perilaku pengguna

  • Membantu pengujian otomatis dan reproduksi bug untuk alur penggunaan nyata seperti navigasi browser, pengisian formulir, dan klik tombol
  • Contoh prompt:

    Why does submitting the form fail after entering an email address?  
    

• Debugging masalah gaya dan layout secara real-time

  • Secara otomatis memberikan saran detail untuk masalah layout seperti inspeksi DOM dan CSS serta overflow
  • Contoh prompt:

    The page on localhost:8080 looks strange and off. Check what's happening there.  
    

• Otomatisasi audit performa

  • Mengotomatiskan pelacakan performa browser dan analisisnya
  • Contoh prompt:

    Localhost:8080 is loading slowly. Make it load faster.  
    

• Daftar alat MCP yang tersedia dapat dilihat di dokumen referensi alat resmi

Cara memulai

• Integrasi dengan server Chrome DevTools MCP dapat dilakukan dengan menambahkan konfigurasi berikut ke klien MCP

  {  
    "mcpServers": {  
      "chrome-devtools": {  
        "command": "npx",  
        "args": ["chrome-devtools-mcp@latest"]  
      }  
    }  
  }  
  

• Operasi dapat diuji dengan contoh prompt berikut

  Please check the LCP of web.dev.  
  

• Informasi dan dokumentasi lebih lanjut tersedia di dokumentasi Chrome DevTools MCP di GitHub

Partisipasi dan rencana pengembangan

• Google akan secara bertahap mengembangkan Chrome DevTools MCP dimulai dari rilis pratinjau publik ini
• Fitur tambahan di masa depan akan ditentukan melalui pengumpulan masukan dari komunitas
• Masukan dan partisipasi dari pengguna alat bantuan coding AI maupun penyedia alat pengembangan AI generasi berikutnya sangat disambut
• Permintaan perbaikan atau masalah yang ditemukan dapat dilaporkan melalui GitHub Issues

[shakespeares]

Saya rasa ada bagian penggunaan yang lebih baik daripada Playwright.
Kalau dilihat secara sederhana, rasanya agak disayangkan.