Chrome DevTools MCP, yapay zekâ kodlama ajanlarına canlı tarayıcıda hata ayıklama imkânı veriyor

Kodlama ajanlarına tarayıcıda göz

dev.to'da yayınlanan bir eğitim yazısı, bir yapay zekâ kodlama asistanını — Claude Code, Cursor, Copilot veya Antigravity — çalışan bir Chrome tarayıcısına bağlayan Model Context Protocol sunucusu chrome-devtools-mcp'yi ele alıyor. Yazı, temeldeki sorunu açıkça ortaya koyuyor: Böyle bir ajan bugün bir front-end hatasını düzeltirken aslında tahmin yürütüyor. Kaynak kodu okuyabilir ama render edilmiş sayfayı, konsol çıktısını veya başarısız olan network isteklerini göremez. Sunucu bu kör noktayı gideriyor; ajanın bir hatayı yeniden oluşturmasını, gerçek hata mesajını okumasını ve yamasının çalıştığını kanıtlamasını sağlıyor.

Yazı, projenin README'sine dayanarak sunucunun yeteneklerini üç alanda grupluyor: Chrome DevTools trace'lerini kaydedip bunlardan eyleme dönüştürülebilir bulgular çıkarıyor; network isteği analizi, ekran görüntüleri ve source-map'lenmiş stack trace'li konsol mesajları dahil olmak üzere tarayıcı hata ayıklamayı yönetiyor; ve Puppeteer üzerine kurulu otomasyon sunuyor — Puppeteer her eylemi Chrome'da gerçekleştiriyor ve devam etmeden önce sonucu bekliyor.

İki adımda kurulum

Gereksinimler mütevazı: Node.js'in bir LTS sürümü, güncel stabil bir Chrome sürümü ve npm. Yapılandırma, paketi npx ile latest etiketiyle çalıştıran tek bir MCP istemcisi sunucu listesi girdisinden ibaret; böylece her zaman en yeni yayınlanan sürüm başlatılıyor. README, Claude Code, Cursor, VS Code ve diğerleri için istemciye özel kurulum rehberleri içeriyor.

Önerilen ilk prompt, ajandan developers.chrome.com üzerinde bir performans kontrolü çalıştırmasını istemek. Her şey doğru bağlanmışsa Chrome açılıyor ve bir trace kaydediliyor. Bilinmesi gereken bir ayrıntı: Tarayıcı tembel (lazy) başlatılıyor; yalnızca ajan ilk kez ona ihtiyaç duyan bir aracı çağırdığında açılıyor, dolayısıyla yalnızca sunucuyu bağlamak bir pencere açmaz.

Asıl kazanç, ajandan kendi hatanıza yönlendirmekten geliyor. Yazıdaki örnekte ajandan yerel bir ödeme sayfasını açması, öde düğmesine basması, konsolun ve network panelinin ne gösterdiğini raporlaması, hatanın kaynağını düzeltmesi ve sonucu doğrulaması isteniyor. Bu senaryoda ajan tıklamayı kendisi tetikliyor, başarısız isteği ve kodun içine işaret eden source-map'lenmiş trace'i inceliyor, bir düzeltme uyguluyor, sayfayı yeniliyor ve hatanın artık görünmediğini doğruluyor. Bu kapalı döngü — eyleme geç, gözlemle, düzelt, doğrula — aracın çekiciliğinin özü: Ajan, başarılı olduğunu varsaymak yerine kendi işini gerçek bir tarayıcıya karşı kontrol ediyor.

Bir CLI seçeneği ve gizlilik ayarları

Paket ayrıca bir chrome-devtools CLI'sı da içeriyor; böylece aynı tarayıcı kontrolü, navigate_page ve take_screenshot gibi komutlarla, MCP olmadan bir terminalden veya shell script'ten yönetilebiliyor.

Gizlilik dikkat gerektiriyor. Sunucu tarayıcı örneğinin içeriğini MCP istemcisine açtığı için yazı, o tarayıcıda hassas veri bulundurulmamasını öneriyor. README'deki birkaç varsayılan şöyle: --no-usage-statistics bayrağı geçirilmedikçe Google kullanım istatistikleri topluyor; performans araçları bulguları gerçek kullanıcı verisiyle zenginleştirmek için trace URL'lerini Google'ın CrUX API'sine gönderebiliyor, bunu --no-performance-crux devre dışı bırakıyor; ve güncelleme kontrolleri bir ortam değişkeniyle kapatılabiliyor. Yalnızca Google Chrome ve Chrome for Testing resmî olarak destekleniyor — diğer Chromium tarayıcıları çalışabilir ama garanti taşımaz.

Ne zaman işe yarar, ne zaman yaramaz

Yazının önerisi, araca yalnızca canlı bir sayfada ortaya çıkan hatalarda başvurmak: tek bir viewport genişliğinde bozulan bir düzen, yalnızca oturum açtıktan sonra başarısız olan bir istek ya da sezgi yerine gerçek bir trace'e ihtiyaç duyan yavaş bir sayfa. Tamamen mantıksal hatalar için ise sıradan bir test çalıştırması hâlâ daha hızlıdır.

Neden önemli

Front-end hata ayıklama, yapay zekâ kodlama ajanları için yapısal bir kör nokta oldu: Ajanlar, çalıştığını göremedikleri kodu düzenliyor. Gerçek konsol çıktısını, network trafiğini ve ekran görüntülerini ortaya çıkaran bir araç, front-end düzeltmelerini önce-doğrula döngüsüne dönüştürüyor; bu da yalnızca doğru görünen yamaların azalması anlamına gelmeli. Bu aynı zamanda MCP ekosisteminin dosya ve terminal erişiminin ötesine geçip daha zengin, alana özgü araçlaşmaya doğru olgunlaştığının bir işareti. Uyarılar — varsayılan olarak açık telemetri ve istemciye açılan tarayıcı içeriği — aracı kimlik doğrulaması gerektiren herhangi bir şeye yönlendirmeden önce dikkatle değerlendirilmeli.