AI ajanları için Chrome DevTools (MCP)

• Chrome DevTools MCP sunucusunun herkese açık önizleme sürümü yayınlandı; böylece AI kodlama ajanları Chrome DevTools'un hata ayıklama ve performans özelliklerini kullanabilir hale geldi
• Daha önce ajanlar kodun çalışma sonuçlarını doğrulayamıyordu; artık ağ, konsol, DOM ve performans izleme gibi gerçek çalışma zamanı verilerinden yararlanabiliyor
• DevTools MCP sunucusu ile gerçek zamanlı kod doğrulama, ağ·konsol hatası analizi, kullanıcı davranışı simülasyonu, stil·yerleşim hata ayıklama ve otomatik performans denetimi gibi çeşitli otomasyonlar mümkün hale geliyor
• Geliştiriciler, sunucuyu MCP istemcisi yapılandırmasına ekleyerek hemen kullanabiliyor; örnek prompt'larla LCP kontrolü veya form gönderim hatası teşhisi gibi işlemler yapılabiliyor
• Google, topluluk geri bildirimlerine dayanarak MCP özelliklerini genişletmeyi planlıyor

---

Genel Bakış

• Google, yeni Chrome DevTools Model Context Protocol (MCP) sunucusunun herkese açık önizleme sürümünü yayınladı
• Bununla birlikte AI kodlama asistanları, Chrome DevTools'un hata ayıklama ve performans ölçüm özelliklerini doğrudan tarayıcı içinde kullanabilen bir ortama kavuşuyor
• Yani bu, kodlama ajanlarının tarayıcıda çalışan kodun gerçek davranışını görememesi nedeniyle yaşanan zorlukların çözümüne katkı sağlayabilir

Model Context Protocol (MCP) nedir?

• Model Context Protocol (MCP), büyük dil modellerini (LLM) harici araçlara ve veri kaynaklarına bağlamak için kullanılan açık kaynaklı bir standarttır
• Chrome DevTools MCP sunucusu bu standart sayesinde AI ajanlarıyla entegre olur ve web hata ayıklama ile performans izleme gibi çeşitli araçların kullanımını destekler
• Örneğin performance_start_trace aracıyla LLM, tarayıcıyı çalıştırabilir, performans bilgisi toplayıp analiz edebilir ve iyileştirme önerileri sunabilir
• MCP protokolü sayesinde kodlama ajanları, web sitesi geliştirme ve sorun çözme süreçlerinde daha güçlü destek elde eder
• MCP'nin nasıl çalıştığına dair ayrıntılar resmi MCP belgelerinde görülebilir

Başlıca kullanım senaryoları

• Gerçek zamanlı kod değişikliklerini doğrulama

  • AI ajanı kodu değiştirdikten sonra Chrome DevTools MCP ile tarayıcıdaki davranışı anında doğrulayabilir
  • Prompt örneği:

    Verify in the browser that your change works as expected.  
    

• Ağ ve konsol hatalarını teşhis etme

  • Ağ isteklerini analiz etme, CORS sorunlarını tespit etme ve konsol günlüklerini inceleme gibi otomatik teşhis desteği sunar
  • Prompt örneği:

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

• Kullanıcı davranışını simüle etme

  • Tarayıcı içinde gezinme, form doldurma ve düğme tıklama gibi gerçek kullanım akışlarını otomatik test etme ve hataları yeniden üretmede yardımcı olur
  • Prompt örneği:

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

• Gerçek zamanlı stil ve yerleşim sorunlarını ayıklama

  • DOM ve CSS incelemesi ile taşma gibi yerleşim sorunlarına dair ayrıntılı önerileri otomatik olarak sağlar
  • Prompt örneği:

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

• Performans denetimini otomatikleştirme

  • Tarayıcıda performans izlemeyi otomatikleştirir ve analiz eder
  • Prompt örneği:

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

• Kullanılabilen MCP araçlarının listesi resmi araç referansı belgesinde görülebilir

Nasıl başlanır?

• MCP istemcisine aşağıdaki yapılandırmayı ekleyerek Chrome DevTools MCP sunucusuyla entegrasyon sağlanabilir

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

• Çalışıp çalışmadığını görmek için örnek bir prompt kullanılabilir

  Please check the LCP of web.dev.  
  

• Daha fazla bilgi ve belgeler, GitHub'daki Chrome DevTools MCP belgelerinde sunulmaktadır

Katılım ve genişleme planı

• Google, bu herkese açık önizleme sürümünü bir başlangıç noktası olarak görerek Chrome DevTools MCP'yi kademeli biçimde geliştirmeyi planlıyor
• Gelecekte eklenecek özellikleri topluluk geri bildirimlerine göre belirlemeyi hedefliyor
• Hem AI kodlama destek araçlarını kullananların hem de yeni nesil AI geliştirme araçları sağlayıcılarının görüş ve katılımı memnuniyetle karşılanıyor
• İyileştirme talepleri veya tespit edilen sorunlar GitHub Issues üzerinden bildirilebilir