Yayınlanma tarihi: 23 Eylül 2025
Bugün, yeni Chrome Geliştirici Araçları Model Bağlamı Protokolü (MCP) sunucusunun herkese açık önizlemesini kullanıma sunuyoruz. Bu sayede, Chrome Geliştirici Araçları'nın gücünü yapay zeka kodlama asistanlarına taşıyoruz.
Kodlama aracıları temel bir sorunla karşı karşıyadır: Ürettikleri kodun tarayıcıda çalıştırıldığında ne yaptığını göremezler. Bu durumda, gözleri kapalı bir şekilde programlama yapılıyor.
Chrome Geliştirici Araçları MCP sunucusu bunu değiştirir. Yapay zeka kodlama asistanları, web sayfalarında doğrudan Chrome'da hata ayıklayabilir ve Geliştirici Araçları'nın hata ayıklama özelliklerinden ve performans analizlerinden yararlanabilir. Bu sayede, sorunları tespit edip düzeltirken daha doğru sonuçlar elde edebilirler.
İşleyiş şeklini kendiniz görün:
Model Context Protocol (MCP) nedir?
Model Context Protocol (MCP), büyük dil modellerini (LLM'ler) harici araçlara ve veri kaynaklarına bağlamak için kullanılan açık kaynaklı bir standarttır. Chrome Geliştirici Araçları MCP sunucusu, yapay zeka aracınıza hata ayıklama özellikleri ekler.
Örneğin, Chrome Geliştirici Araçları MCP sunucusu performance_start_trace adlı bir araç sağlar. Web sitenizin performansını inceleme görevi verildiğinde bir LLM, Chrome'u başlatmak, web sitenizi açmak ve performans izi kaydetmek için Chrome Geliştirici Araçları'nı kullanmak üzere bu aracı kullanabilir. Büyük dil modeli, olası iyileştirmeler önermek için performans izini analiz edebilir. Chrome Geliştirici Araçları MCP sunucusu, MCP protokolünü kullanarak kodlama aracınıza yeni hata ayıklama özellikleri getirebilir ve bu sayede web siteleri oluşturma konusunda daha iyi hale getirebilir.
ÇKP'nin işleyiş şekli hakkında daha fazla bilgi edinmek istiyorsanız ÇKP belgelerine göz atın.
Ne amaçla kullanabilirsiniz?
Aşağıda, Gemini CLI gibi tercih ettiğiniz yapay zeka asistanında deneyebileceğiniz birkaç istem örneği verilmiştir.
Kod değişikliklerini anında doğrulama
Yapay zeka temsilcinizle bir düzeltme oluşturun ve ardından Chrome Geliştirici Araçları MCP ile çözümün amaçlandığı gibi çalıştığını otomatik olarak doğrulayın.
Deneyebileceğiniz istem:
Verify in the browser that your change works as expected.
Ağ ve konsol hatalarını teşhis etme
Aracınızın, CORS sorunlarını ortaya çıkarmak için ağ isteklerini analiz etmesini veya bir özelliğin neden beklendiği gibi çalışmadığını anlamak için konsol günlüklerini incelemesini sağlayın.
Deneyebileceğiniz istem:
A few images on localhost:8080 are not loading. What's happening?
Kullanıcı davranışını simüle etme
Çalışma zamanı ortamını incelerken gezinme, form doldurma ve düğme tıklama gibi işlemleri yaparak hataları yeniden oluşturun ve karmaşık kullanıcı akışlarını test edin.
Deneyebileceğiniz istem:
Why does submitting the form fail after entering an email address?
Canlı stil ve düzen sorunlarını ayıklama
Yapay zeka aracınızdan canlı bir sayfaya bağlanmasını, DOM ve CSS'yi incelemesini ve tarayıcıdaki canlı verilere göre taşan öğeler gibi karmaşık düzen sorunlarını düzeltmek için somut önerilerde bulunmasını isteyin.
Deneyebileceğiniz istem:
The page on localhost:8080 looks strange and off. Check what's happening there.
Performans denetimlerini otomatikleştirme
Yapay zeka aracınıza performans izleme işlemi çalıştırması, sonuçları analiz etmesi ve yüksek LCP sayıları gibi belirli performans sorunlarını araştırması talimatını verin.
Deneyebileceğiniz istem:
Localhost:8080 is loading slowly. Make it load faster.
Kullanılabilir tüm araçların listesi için araç referansı belgelerimize göz atın.
Başlayın
Bu özelliği denemek için MCP istemcinize aşağıdaki yapılandırma girişini ekleyin:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Çalışıp çalışmadığını kontrol etmek için kodlama aracınızda aşağıdaki istemi çalıştırın:
Please check the LCP of web.dev.
Daha fazla bilgi için GitHub'daki Chrome Geliştirici Araçları MCP belgelerine göz atın.
Katılın
Chrome Geliştirici Araçları MCP'yi kademeli olarak oluşturuyoruz. Bu kapsamda, bugün herkese açık önizleme sürümünü yayınlıyoruz. Bir sonraki aşamada hangi özellikleri eklememiz gerektiği konusunda sizden ve topluluktan geri bildirim almak için çalışıyoruz. Yapay zeka kodlama asistanlarını kullanan bir geliştirici veya yeni nesil yapay zeka geliştirme araçları oluşturan bir satıcı olmanız fark etmeksizin, görüşleriniz çok değerli olacaktır. Eksik veya çalışmayan bir şey olursa lütfen GitHub'da bir sorun kaydı oluşturun.