CyberAgent, perusahaan IT terkemuka di Jepang, menyediakan berbagai layanan online, termasuk platform blog Ameba yang populer. Tim menghadapi tantangan signifikan dengan error runtime yang sulit dideteksi melalui pengujian otomatis, sehingga memerlukan intervensi manual yang memakan waktu.
Dokumen ini membahas cara CyberAgent menggunakan server Model Context Protocol (MCP) Chrome DevTools untuk beralih dari proses manual ke alur kerja otomatis, sehingga menghemat waktu developer dan meningkatkan keandalan alur pengujian mereka.
Tantangannya: alur kerja manual dan terbatas
Sistem desain Ameba, Spindle, adalah kumpulan komponen UI yang dapat digunakan kembali yang digunakan untuk membangun antarmuka platform blog. Mengandalkan Storybook untuk pengembangan dan pengujian komponen UI.
Sebelumnya, alur kerja CyberAgent untuk mengatasi error runtime adalah siklus manual yang berulang. Developer akan memeriksa setiap komponen di browser, menerapkan perbaikan, lalu memeriksanya lagi. Dengan banyaknya halaman dan komponen, ketergantungan pada konfirmasi visual ini memiliki batasnya, sehingga sulit untuk menemukan setiap bug.
Solusinya: Agen debug menggunakan MCP Chrome DevTools
Untuk mengatasi tantangan ini, tim beralih ke server MCP Chrome DevTools. Setelah penyiapan yang mudah menggunakan panduan aktivasi resmi, mereka dapat langsung menginstruksikan agen AI (Claude) untuk mengotomatiskan seluruh alur kerja proses debug.
Dengan satu perintah, agen dapat berinteraksi dengan DevTools dengan memproses informasi status browser yang diambil oleh MCP Chrome DevTools; mengakses konteks sistem file, dan membaca log konsol. Kemudian, secara mandiri mengidentifikasi error dan menerapkan perbaikan tanpa intervensi manual.
Perintah awal yang mereka gunakan adalah sebagai berikut:
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
Agen AI melanjutkan audit instance Storybook, menjelajahi seluruh cerita untuk membaca error, menerapkan koreksi kode, dan mengonfirmasi keberhasilan setiap perbaikan.
Dampaknya: dari pemeriksaan manual hingga perbaikan otomatis
Hasilnya cepat. Dalam waktu sekitar satu jam, agen AI secara mandiri mengaudit semua 32 komponen dan 236 cerita dalam sistem desain Spindle.
Meskipun agen mengidentifikasi dan memperbaiki satu error runtime dan dua peringatan, nilai sebenarnya dari eksperimen terletak pada kepastian negatif: Mengonfirmasi bahwa sebagian besar library bebas error tanpa mengharuskan developer mengklik secara manual ratusan status.
Sebelumnya, jenis audit komprehensif ini melelahkan secara visual dan rentan terhadap pengawasan manusia. Dengan mendelegasikan tugas ini ke MCP Chrome DevTools, CyberAgent mencapai hal berikut:
- Cakupan audit 100%: Agen memverifikasi setiap cerita secara mekanis, sehingga memastikan bahwa komponen "bersih" benar-benar bersih, tingkat ketelitian yang sulit dipertahankan secara manual.
- Tidak ada negatif palsu: Tidak seperti rangkaian pengujian otomatis yang mungkin melewatkan anomali runtime visual, server MCP memungkinkan agen memvalidasi status browser yang sebenarnya, sehingga memastikan keandalan yang tinggi.
- Pelepasan kognitif: Developer dapat memercayai sistem untuk menangani "pekerjaan berat" yang berulang, sehingga mereka dapat berfokus pada logika yang kompleks, bukan pada pemeriksaan rutin.
Seperti yang dicatat oleh developer web Kota Yanagi, manfaatnya adalah perubahan tanggung jawab:
"Sangat mudah untuk memindahkan pemeriksaan error dan peringatan runtime yang sebelumnya saya lakukan secara manual di browser. Saya juga menyukai bahwa saya kini dapat mendeskripsikan operasi yang kompleks dalam bahasa alami dan alat ini dapat membaca log error hingga memperbaiki masalah secara langsung."
Keberhasilan alur kerja otomatis ini bahkan mendorong CyberAgent untuk memperbarui Panduan Agen Spindle internal mereka untuk agen AI mereka. Panduan ini kini menetapkan MCP Chrome DevTools sebagai server pen-debug default untuk agen AI mereka, Claude, yang memformalkan penggunaannya sebagai praktik terbaik dan menunjukkan keyakinan mereka terhadap proses baru yang didukung AI ini.
Perbaikan konkret diterapkan dalam dua permintaan pull, yang dapat Anda tinjau di GitHub:
CyberAgent lebih lanjut memajukan perintah dan memublikasikan output akhir ini.
Masukan dan rencana mendatang
CyberAgent merasa senang dengan fleksibilitas dan banyaknya opsi yang tersedia dalam MCP Chrome DevTools. Mereka juga memberikan masukan berharga untuk peningkatan di masa mendatang, dengan mencatat bahwa meskipun alat ini canggih, penggunaan fitur-fiturnya yang lebih lanjutan memerlukan tingkat pengetahuan pengguna tertentu.
Ke depannya, tim tertarik untuk melakukan integrasi yang lebih mendalam dengan panel Performa DevTools. Mereka membayangkan alur kerja di mana agen dapat memvalidasi Core Web Vitals, lalu melanjutkan ke analisis performa yang lebih mendalam menggunakan panel Performa untuk menganalisis dan menyarankan peningkatan.
Pakar Developer di CyberAgent, Kazunari Hara, membagikan kekagumannya, dengan menekankan efisiensi alat ini dan potensinya untuk aplikasi pada masa mendatang:
"Saya kagum saat melihat browser secara otomatis memperbaiki error langsung dari log. Tugas yang sebelumnya terlewat atau membutuhkan waktu lama kini dapat diotomatiskan dengan andal, sehingga meningkatkan efisiensi pengembangan. Karena MCP Chrome DevTools menawarkan begitu banyak fitur dalam lingkungan runtime yang sebenarnya, saya yakin MCP ini akan berguna dalam banyak situasi berbeda ke depannya."
Kesimpulan
Dengan mengintegrasikan MCP Chrome DevTools ke dalam alur kerja mereka, CyberAgent berhasil mengotomatiskan tugas proses debug yang kompleks dan memakan waktu. Pengalaman mereka menunjukkan potensi besar alat yang didukung AI untuk meningkatkan produktivitas developer.
Proses ini mencapai otomatisasi sepenuhnya, sehingga tidak perlu lagi melakukan pemeriksaan manual dan memastikan tidak ada kesalahan yang terlewat. Meskipun penerapan saat ini telah terbukti bermanfaat, masukan dari CyberAgent menyoroti masa depan yang menarik ketika MCP Chrome DevTools dapat memungkinkan tugas analisis dan pengoptimalan performa yang lebih canggih bagi mereka langsung di dalam browser.