Japonya'nın önde gelen BT şirketlerinden CyberAgent, popüler Ameba blog platformu da dahil olmak üzere çeşitli online hizmetler sunmaktadır. Ekip, otomatik testlerle tespit edilmesi zor olan ve zaman alan manuel müdahale gerektiren çalışma zamanı hatalarıyla ilgili önemli bir zorlukla karşılaştı.
Bu belgede, CyberAgent'ın Chrome Geliştirici Araçları Model Bağlam Protokolü (MCP) sunucusunu kullanarak manuel süreçten otomatik iş akışına nasıl geçtiği, geliştiricilerin zamandan nasıl tasarruf ettiği ve test akışlarının güvenilirliğini nasıl artırdığı açıklanmaktadır.
Sorun: Manuel ve sınırlı iş akışı
Ameba tasarım sistemi Spindle, blog platformunun arayüzünü oluşturmak için kullanılan yeniden kullanılabilir kullanıcı arayüzü bileşenlerinden oluşan bir koleksiyondur. Kullanıcı arayüzü bileşenlerinin geliştirilmesi ve test edilmesi için Storybook'u kullanır.
Daha önce CyberAgent'ın çalışma zamanı hatalarını giderme iş akışı tekrarlayan ve manuel bir döngüydü. Geliştirici, tarayıcıdaki her bileşeni kontrol eder, düzeltme uygular ve ardından tekrar kontrol eder. Çok sayıda sayfa ve bileşen olduğundan görsel onay kullanmanın sınırları vardı ve bu nedenle her hatayı yakalamak zordu.
Çözüm: Chrome Geliştirici Araçları MCP'yi kullanarak aracıda hata ayıklama
Bu zorluğun üstesinden gelmek için ekip, Chrome Geliştirici Araçları MCP sunucusunu kullandı. Resmi oryantasyon kılavuzunu kullanarak basit bir kurulum yaptıktan sonra, tüm hata ayıklama iş akışını otomatikleştirmesi için hemen bir yapay zeka aracına (Claude) talimat verebildiler.
Aracı, tek bir istemle Chrome Geliştirici Araçları MCP tarafından yakalanan tarayıcı durumu bilgilerini işleyerek, dosya sistemi bağlamına erişerek ve konsol günlüklerini okuyarak Geliştirici Araçları ile etkileşim kurabilir. Ardından, hataları bağımsız olarak tanımladı ve manuel müdahale olmadan düzeltmeleri uyguladı.
Kullanılan ilk istem şu şekildeydi:
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.
Yapay zeka aracısı, Storybook örneğini denetlemeye devam etti. Hataları okumak, kod düzeltmelerini uygulamak ve her düzeltmenin başarılı olduğunu onaylamak için tüm hikayelerde gezindi.
Etkisi: Manuel kontrollerden otomatik düzeltmelere
Sonuçlar hızlı bir şekilde elde edildi. Yapay zeka aracısı, yaklaşık bir saat içinde Spindle tasarım sistemindeki 32 bileşenin ve 236 hikayenin tamamını bağımsız olarak denetledi.
Aracı, bir çalışma zamanı hatasını ve iki uyarıyı tanımlayıp düzeltse de denemenin gerçek değeri, olumsuzluğun güvencesinde yatıyordu: Geliştiricinin yüzlerce durumu manuel olarak tıklamasına gerek kalmadan kitaplığın büyük çoğunluğunun hatasız olduğunu onaylamak.
Daha önce bu tür kapsamlı denetimler görsel olarak yorucuydu ve insan hatasına açıktı. Bu işi Chrome Geliştirici Araçları MCP'ye devreden CyberAgent, aşağıdakileri elde etti:
- % 100 denetim kapsamı: Temsilci, her bir hikayeyi mekanik olarak doğrulayarak "temiz" bileşenlerin gerçekten temiz olmasını sağladı. Bu titizlik seviyesini manuel olarak sürdürmek zordur.
- Sıfır yanlış negatif: Görsel çalışma zamanı anormalliklerini kaçırabilen otomatik test paketlerinin aksine, MCP sunucusu aracının gerçek tarayıcı durumunu doğrulamasını sağlayarak yüksek güvenilirlik sağladı.
- Bilişsel yükü azaltma: Geliştiriciler, tekrarlayan "zahmetli işleri" sistemin yapmasına güvenebilir ve böylece rutin kontroller yerine karmaşık mantığa odaklanabilir.
Web geliştirici Kota Yanagi'nin belirttiği gibi, sorumluluk değişimi bu özelliğin avantajıydı:
"Tarayıcıda manuel olarak yaptığım çalışma zamanı hatalarını ve uyarı kontrollerini devre dışı bırakmak çok kolay oldu. Ayrıca, artık karmaşık işlemleri doğal dilde açıklayabiliyor ve aracın hata günlüklerini okumadan doğrudan sorunu düzeltmesini sağlayabiliyorum."
Bu otomatik iş akışının başarısı, CyberAgent'ın yapay zeka temsilcileri için dahili Spindle Agents Kılavuzu'nu güncellemesine bile yol açtı. Bu kılavuzda artık Chrome DevTools MCP, Claude adlı yapay zeka aracının varsayılan hata ayıklama sunucusu olarak belirleniyor. Bu sayede, Chrome DevTools MCP'nin en iyi uygulama olarak kullanılması resmileştiriliyor ve bu yeni yapay zeka destekli sürece duyulan güven gösteriliyor.
Somut düzeltmeler, GitHub'da inceleyebileceğiniz iki çekme isteğinde uygulandı:
CyberAgent, istemi daha da geliştirerek bu son çıktıyı yayınladı.
Geri bildirimler ve gelecek planları
CyberAgent, Chrome DevTools MCP'deki esneklik ve seçenek sayısından memnun kaldı. Ayrıca, aracın güçlü olmasına rağmen daha gelişmiş özelliklerinin kullanılabilmesi için belirli bir düzeyde kullanıcı bilgisi gerektiğini belirterek gelecekteki iyileştirmeler için değerli geri bildirimler sağladılar.
Ekip, gelecekte Geliştirici Araçları'ndaki Performans paneliyle daha derin bir entegrasyon sağlamak istiyor. Bir temsilcinin Core Web Vitals'ı doğrulayabileceği ve ardından iyileştirmeleri analiz edip önermek için Performans panelini kullanarak daha ayrıntılı bir performans analizine geçebileceği bir iş akışı planlıyorlar.
CyberAgent'ta Developer Expert olarak çalışan Kazunari Hara, aracın verimliliğini ve gelecekteki uygulama potansiyelini vurgulayarak şaşkınlığını dile getirdi:
"Tarayıcının hataları doğrudan günlüklerden otomatik olarak düzelttiğini görünce çok şaşırdım. Eskiden gözden kaçırılan veya uzun zaman alan görevler artık güvenilir bir şekilde otomatikleştirilebiliyor. Bu da geliştirme verimliliğini artırıyor. Chrome Geliştirici Araçları MCP, gerçek bir çalışma zamanı ortamında çok sayıda özellik sunduğundan, gelecekte birçok farklı durumda faydalı olacağını düşünüyorum."
Sonuç
CyberAgent, Chrome DevTools MCP'yi iş akışına entegre ederek karmaşık ve zaman alan bir hata ayıklama görevini başarıyla otomatikleştirdi. Bu deneyim, yapay zeka destekli araçların geliştiricilerin verimliliğini artırma konusundaki muazzam potansiyelini gösteriyor.
Süreç tamamen otomatikleştirildi. Böylece manuel kontrol ihtiyacı ortadan kalktı ve hiçbir hatanın gözden kaçırılmaması sağlandı. Mevcut uygulama değerini kanıtlamış olsa da CyberAgent'ın geri bildirimi, Chrome Geliştirici Araçları MCP'nin doğrudan tarayıcıda daha da gelişmiş performans analizi ve optimizasyon görevlerini etkinleştirebileceği heyecan verici bir geleceğe işaret ediyor.