Playwright MCP vs Chrome DevTools MCP

Playwright MCP ne zaman seçilir

• Bir formu veya gezinme akışını Chromium, Firefox ve WebKit üzerinde incelemeniz gerekiyorsa Playwright MCP seçin. Tarayıcı seçeneğiyle aynı adımları farklı motorlarda deneyebilirsiniz. Böylece incelemeyi Chrome ile sınırlamadan, hedeflediğiniz tarayıcı motorunda sayfayı açıp kontrollerle etkileşime girebilirsiniz.
• Ajanın sayfa yapısını okuyup bir düğmeyi veya alanı seçmesi gerekiyorsa uygundur. browser_snapshot, erişilebilirlik ağacının yapılandırılmış bilgisini döndürür. browser_click ise bu görüntüdeki öğe referansını veya benzersiz bir seçiciyi kabul eder. Bu çalışma biçimi görüntü anlayan bir model gerektirmez.
• Tekrarlanan denemelerde oturumun başlangıç durumunu belirlemek istiyorsanız tercih edin. Kalıcı profilde giriş bilgilerini tutabilir veya --isolated ile --storage-state kullanarak kayıtlı çerezleri ve yerel depolamayı yükleyebilirsiniz. İzole tarayıcı kapandığında o oturumun depolama durumu silinir.
• Sayfa açılırken özel bir hazırlık gerekiyorsa kullanın. --init-page, Playwright sayfa nesnesi üzerinden hazırlık kodu çalıştırır; --init-script, sayfanın kendi betiklerinden önce JavaScript yürütür. Cihaz emülasyonu ve görüntüleme alanı ayarlarıyla arayüzü farklı tarayıcı koşullarında da inceleyebilirsiniz.

Chrome DevTools MCP ne zaman seçilir

• Yavaş açılan bir sayfanın performansını araştırıyorsanız Chrome DevTools MCP seçin. performance_start_trace ve performance_stop_trace ile tarayıcı etkinliğini kaydedebilir, ardından performance_analyze_insight ile kayıttaki performans bulgularını inceleyebilirsiniz. Bu araçlar aynı inceleme içinde kayıt alma ve bulguları araştırma adımlarını kapsar.
• Bir hatayı anlamak için tek tek ağ isteklerine bakmanız gerekiyorsa tercih edin. list_network_requests istekleri listeler, get_network_request belirli bir isteği incelemeye yarar. Konsol çıktısındaki kaynak haritalarıyla eşlenmiş yığın izleri de hata araştırmasına yardımcı olur.
• Bellek sorunlarını araştırırken veya Lighthouse denetimi çalıştırırken kullanın. take_heapsnapshot ile bellek incelemesi için heap görüntüsü alabilirsiniz. lighthouse_audit, sayfada gezinmek ve formları doldurmak için kullanılan tarayıcı oturumunda denetim çalıştırır; bu işler aynı oturumda yürütülebilir.
• Sorun zaten açık bir Chrome oturumunda görünüyorsa seçin. Sunucu, uzaktan hata ayıklama portu üzerinden o tarayıcıya bağlanabilir veya kendi tarayıcısını başlatabilir. Tarayıcı eylemleri için Puppeteer kullanır ve eylemlerin sonuçlarını bekler.

Temel farklar

• Tarayıcı kapsamları farklıdır. Playwright, Chromium, Firefox ve WebKit ile çalışır. Chrome DevTools MCP'nin resmî desteği Google Chrome ve Chrome for Testing içindir. Belgeleri, diğer Chromium tabanlı tarayıcıların doğru çalışacağını garanti etmez.
• İkisi de gezinme, form doldurma, sayfa görüntüsü, ekran görüntüsü, konsol ve ağ incelemesi sunar. Playwright'ın etkileşim modeli erişilebilirlik ağacına dayanır. Chrome DevTools tarafında performans kaydı, bulgu analizi, Lighthouse ve heap görüntüsü için ayrı araçlar bulunur. Playwright da isteğe bağlı devtools yetenekleri belgeler; hata ayıklama yalnızca Chrome DevTools'a özgü değildir.
• Temel kurulumda ikisi de stdio üzerinden iletişim kuran bir Node süreci olarak çalışır ve sunucu kimlik doğrulaması istemez. Playwright ayrıca --port ile bağımsız HTTP bağlantısını belgeler. Sunucuya bağlanmak ile web sitesine giriş yapmak ayrı konulardır: Playwright, site girişlerini kalıcı profilde tutabilir.
• İkisi de mevcut tarayıcıya bağlanabilir. Playwright, CDP uç noktası veya Chrome ve Edge için tarayıcı uzantısı sunar. Uzantı yolunu seçerseniz Playwright uzantısını kurmanız gerekir. Chrome DevTools ise çalışan Chrome'a uzaktan hata ayıklama bağlantısıyla erişebilir.
• Chrome DevTools varsayılan olarak kullanım istatistikleri toplar; performans araçları Google CrUX API'ye kayıttaki URL'leri gönderebilir. Bunları ayrı ayrı --no-usage-statistics ve --no-performance-crux ile kapatabilirsiniz. Playwright belgelerinde görüntü yanıtı ve gizli değer değiştirme ayarları vardır, ancak verilen kaynaklar bütün verinin yerelde kaldığını belirtmez. Gizli değer değiştirme de bir güvenlik sınırı değildir.

Kurulum

Playwright MCP için MCP istemcisini npx -y @playwright/mcp@latest komutunu başlatacak şekilde yapılandırın. Belgelenen asgari gereksinim Node.js 18'dir. Claude Code için claude mcp add playwright npx @playwright/mcp@latest kayıt komutu da belgelenmiştir. Tarayıcı ve oturum seçeneklerini sunucu argümanlarına ekleyebilirsiniz.

Chrome DevTools MCP için istemciye npx -y chrome-devtools-mcp@latest komutunu tanımlayın. Gereksinimler arasında Node.js LTS, npm ve güncel kararlı Chrome veya daha yenisi bulunur. Tarayıcı, ona ihtiyaç duyan ilk araç çağrısında başlar; yalnızca MCP bağlantısını kurmak Chrome'u açmaz.