Chrome DevTools MCP: Yapay Zekâ Destekli Tarayıcı Otomasyonu ve Hata Ayıklama

Yapay zekâ ajanları ve Chrome DevTools MCP gibi araçların büyük resimde nasıl konumlandığını daha iyi anlamak için DataCamp’in Introduction to AI Agents kursunu veya AI Agent Fundamentals beceri yolunu inceleyin.

Chrome DevTools MCP, Chrome DevTools ekibinin resmi Model Context Protocol sunucusudur ve yapay zekâ kod asistanlarının Chrome’u doğal dille kontrol etmesini sağlar. Betik yazmak yerine, asistanınıza ne istediğinizi söylersiniz (“bu sayfaya git ve konsol hatalarını kontrol et” veya “bu formu doldur ve ekran görüntüsü al”) ve teknik detayları o halleder. 

Sunucu, güçlü tarayıcı otomasyonu ve hata ayıklama araçlarına erişim sağlar. Puppeteer üzerine kurulu olduğundan güvenilirdir ve tamamen makinenizde çalışır. Tek bir satır Puppeteer kodu yazmanız gerekmez.

Bu eğitimde, bu MCP sunucusunu Claude, Cursor ve Cline gibi yapay zekâ kod asistanlarıyla nasıl kullanacağınızı öğreneceksiniz. Kurulum ve yapılandırmayı ele aldıktan sonra çekirdek yeteneklere geçeceğiz: tarayıcı otomasyonu, hata ayıklama ve inceleme. Makale boyunca, gerçek dünyadan örnekler göstermek için Conduit’i (demo.realworld.io), Medium tarzı bir blog platformunu kullanacağız.

Model Context Protocol’e yeniyseniz, MCP’nin yapay zekâ modellerini harici araçlara nasıl bağladığını derinlemesine anlatan bu kapsamlı MCP rehberine göz atmanızı öneririm. Ayrıca Chrome için Claude eğitimimizi ve en iyi yapay zekâ tarayıcıları rehberimizi inceleyebilirsiniz. Yapay zekâ tarayıcı otomasyonlarına farklı bir yaklaşım için ChatGPT Atlas eğitimimizi okuyun.

Özet

• Chrome DevTools MCP, yapay zekâ kod asistanlarının Chrome’u doğal dille kontrol etmesini sağlayan resmi bir MCP sunucusudur

• 6 kategoride 26 aracı sunar: girdi otomasyonu, gezinme, hata ayıklama, ağ, performans ve öykünme

• Claude Code için claude mcp add chrome-devtools npx chrome-devtools-mcp@latest ile kurun (diğer istemcilerde de benzer kurulum vardır)

• Puppeteer betikleri yazmadan gezinme, form doldurma ve ekran görüntüsü alma gibi tarayıcı görevlerini otomatikleştirin

• Web uygulamalarını konsol hatalarını, ağ isteklerini inceleyerek ve JavaScript çalıştırarak—tamamını sohbet yoluyla—hata ayıklayın

• Yapay zekânın her adımda kendi işini doğrulamak için ekran görüntüsü almasına izin vererek arayüzleri yinelemeli olarak oluşturun

Chrome DevTools MCP nedir?

Kaputun altında mimari böyle çalışır.

Sunucu, 6 kategoriye ayrılmış 26 aracı kullanıma sunar:

• Girdi otomasyonu (7 araç): click, drag, fill, fill_form, handle_dialog, hover, upload_file
• Gezinme (7 araç): navigate_page, new_page, list_pages, select_page, close_page, navigate_page_history, wait_for
• Hata ayıklama (4 araç): evaluate_script, list_console_messages, take_screenshot, take_snapshot
• Ağ (2 araç): list_network_requests, get_network_request
• Performans (3 araç): performance_start_trace, performance_stop_trace, performance_analyze_insight
• Öykünme (3 araç): emulate_cpu, emulate_network, resize_page

Tarayıcı otomasyonu sohbet tabanlı hale gelir. Puppeteer betikleri yazmak ve CSS seçicilerini ayıklamak yerine, ne istediğinizi doğal dille tarif edersiniz. Yapay zekâ asistanı teknik ayrıntıları çözer.

Chrome DevTools MCP ile geleneksel yaklaşımların karşılaştırması

Bu araçlarla yapay zekâ asistanınız şunlarda yardımcı olabilir:

• Ajansınızın her adımda ekran görüntüsü almasına izin vererek ön yüzleri yinelemeli şekilde inşa etmek
• Kayıt olma, özellikler arasında gezinme ve her adımın çalıştığını doğrulama gibi uçtan uca kullanıcı akışlarını test etmek
• DevTools’u elle açmadan konsol hatalarını ve ağ isteklerini kontrol ederek sorunları hata ayıklamak
• Farklı sayfaların veya uygulama durumlarının ekran görüntülerini alarak görsel dokümantasyonu otomatikleştirmek
• JavaScript’i doğrudan sayfa bağlamında çalıştırarak web sayfalarından veri çıkarmak

Tüm bunlar Puppeteer betikleri yazmak yerine doğal dil komutlarıyla tetiklenir.

Chrome DevTools MCP, Claude Desktop, Cursor, Cline ve VSCode Copilot ile çalışır. Birçok MCP sunucusundan yalnızca biri olduğundan, dosya sistemi erişimi, veritabanı araçları ve API’ler gibi diğerleriyle birleştirerek birden çok araca yayılan iş akışları kurabilirsiniz.

Chrome DevTools MCP Kurulum ve Yapılandırma

Şunlara ihtiyacınız olacak:

• Makinenizde yüklü Node.js ve npm
• MCP uyumlu bir yapay zekâ kod asistanı (bu Claude Code’u kullanacağız)
• Chrome tarayıcı (Puppeteer bunu otomatik halleder, ek yapılandırmaya gerek yok)

Tarayıcı DevTools’a temel aşinalık faydalıdır, ancak şart değildir.

Chrome DevTools MCP’nin kurulumu

Chrome DevTools MCP, yapay zekâ asistanınızın MCP yapılandırması üzerinden çalışır. Kurulum, kullandığınız yapay zekâ kod asistanına göre biraz değişir. Claude Code için nasıl kurulacağını göstereceğiz; ancak Cursor, Cline ve VSCode Copilot gibi diğer editörlerde yaklaşım benzerdir.

Claude Code için, terminalinizde şu komutu çalıştırın:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Bu komut, Chrome DevTools MCP sunucusunu Claude Code’a kaydeder. Sunucu npx üzerinden çalışır; böylece paketi kalıcı kurulum gerektirmeden indirir ve çalıştırır. @latest ifadesi güncel sürümü almanızı sağlar.

Komutu çalıştırdıktan sonra yeni sunucuyu yüklemek için Claude Code’u yeniden başlatın.

Farklı bir yapay zekâ kod asistanı kullanıyorsanız

Diğer MCP istemcilerinde kurulum yöntemleri benzerdir—bazıları komutları kullanır, bazıları yapılandırma dosyalarını veya tek tıkla yükleme düğmelerini kullanır. Cursor, Cline, Gemini CLI, Windsurf ve diğer desteklenen istemciler için özel talimatlara Chrome DevTools MCP GitHub sayfasından bakın.

Kurulumunuzu test etme

Her şeyin çalıştığını basit bir komutla doğrulayalım:

Navigate to demo.realworld.io and take a screenshot

Şunları görmelisiniz:

• Chrome başlar (başsız mod yapılandırmadıysanız tarayıcı penceresini görürsünüz)
• Conduit ana sayfası yüklenir
• Yapay zekâ asistanınız bir ekran görüntüsü yakalar ve gösterir

Bir sorun olursa, şu yaygın hataları kontrol edin:

• Node.js sürümü: Chrome DevTools MCP, Node.js v20.19 veya daha yenisini gerektirir
• npm izinleri: npm’in paket kurabildiğinden emin olun
• Yeniden başlatma: Yapılandırma değişikliklerinden sonra yapay zekâ asistanınızı yeniden başlatmanız gerekir
• Yapılandırma dosyası konumu: Asistanınız için doğru MCP ayar dosyasını düzenlediğinizi doğrulayın

Tarayıcı Otomasyonunun Temelleri

Chrome DevTools MCP, web sayfalarıyla etkileşim kurmak için altı temel araç sunar. URL’leri yüklemek için navigate_page, öğelerle etkileşim için click, metin girişi için fill ve fill_form, hover etkilerini tetiklemek için hover ve gördüklerinizi yakalamak için take_screenshot kullanın. Bu araçlar, karşılaşacağınız tarayıcı otomasyonu görevlerinin çoğunu kapsar.

Gezinme ve ekran görüntüleri

Bir sayfa yükleyelim. Yapay zekâ asistanınıza şunu söyleyin:

Navigate to demo.realworld.io

YZ, navigate_page aracını kullanır, Chrome açılır ve Conduit ana sayfası yüklenir. Başsız modu yapılandırmadıysanız tarayıcı penceresini görürsünüz.

Gördüklerinizi belgelemek için, sadece şunu isteyin:

Take a screenshot of the homepage

YZ, take_screenshot ile mevcut sayfayı yakalar ve sonucu gösterir. Bu, görsel dokümantasyon veya bir sayfanın doğru göründüğünü doğrulamak için yararlıdır.

Öğe etkileşimi

Sayfadaki herhangi bir öğeyle CSS seçicileri yazmadan veya öğe kimliklerini incelemeden etkileşim kurabilirsiniz. İstediğinizi tarif etmeniz yeterli:

Click the Sign in link

YZ, hangi öğeden bahsettiğinizi anlar ve click aracıyla ona tıklar. Oturum açma sayfası yüklenir.

Ögelerin üzerine gelme (hover) işlemi de yapabilirsiniz:

Hover over the Sign up link

YZ, hover aracını kullanır. Bir araç ipucu veya açılır menü varsa görünür.

Form doldurma

Formlar, betik yazarak otomasyon yaparken genellikle zahmetlidir. Chrome DevTools MCP ile neyin doldurulmasını istediğinizi tarif etmeniz yeterlidir.

Fill one field at a time:
Fill in the email field with test@example.com
Fill in the password field with testpass123
Or fill multiple fields at once:
Fill out the sign-in form with email test@example.com and password testpass123

YZ, tüm alanları tek seferde ele almak için fill_form kullanır. Doldurulmuş form şöyle görünür:

YZ, tanımınıza göre doğru giriş alanlarını belirler. HTML’e dokunmazsınız.

Hata ayıklama ve inceleme

Chrome DevTools MCP, hata ayıklama için üç temel araç sunar: konsol çıktısını görmek için list_console_messages, ağ etkinliğini görmek için list_network_requests ve sayfalarda JavaScript çalıştırıp veri çıkarmak için evaluate_script.

Bu araçları yapay zekâ asistanınız üzerinden kullanırken bir sohbet yürütürsünüz. Soruları doğal dille sorarsınız, YZ bunları arka planda MCP araç çağrılarına çevirir. 

Bu şöyle görünür:

YZ asistanı niyetinizi anlar, uygun Chrome DevTools araçlarını çalıştırır ve sonuçları okunabilir bir formatta sunar. Bunların pratikte nasıl çalıştığına bakalım.

Konsol incelemesi

Bir şeyler bozulduğunda genellikle ilk bakacağınız yer konsol hatalarıdır. DevTools’u elle açmak yerine, YZ asistanınıza şunu sorun:

Navigate to demo.realworld.io and check the console for any errors

YZ, sayfayı yükler ve list_console_messages ile konsolu kontrol eder. İşte buldukları:

Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/articles'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/tags'
from origin 'https://demo.realworld.io' has been blocked by CORS policy

Bu CORS hataları (Cross-Origin Resource Sharing)—tarayıcıların web sayfalarının farklı alan adlarına istek göndermesini kısıtlayan bir güvenlik özelliğidir) ve sayfanın gerçek içerik yerine “Loading articles…” ve “Loading tags…” göstermesini açıklar:

Bu iletileri filtreleyip yorumlaması için YZ’ye daha detaylı sorular sorabilirsiniz:

Are there any errors or warnings on this page?

YZ, konsol çıktısını analiz eder ve şunu söyler: “Evet, makaleler ve etiketler için API isteklerini engelleyen iki CORS hatası var.”

Böylece DevTools konsolunu manuel olarak açmadan nelerin bozulduğunu anında görürsünüz.

Ağ isteklerine genel bakış

Konsol hataları çoğu zaman ağ sorunlarına işaret eder. İsteklerinizde gerçekte ne olduğunu anlamak için ağ etkinliğini kontrol edin:

Show me what network requests are made on the homepage

YZ, list_network_requests kullanır ve tüm isteklerin bir listesini döndürür. Başarılı istekleri (CSS, yazı tipleri, JavaScript dosyaları) ve başarısız olanları görürsünüz:

https://demo.realworld.io/ GET [success - 200]
https://demo.realworld.io/main.css GET [success - 200]
https://demo.realworld.io/main.js GET [success - 200]
https://conduit.productionready.io/api/tags GET [failed - 307]
https://conduit.productionready.io/api/articles?limit=10&offset=0 GET [failed - 307]
https://api.realworld.io/api/tags GET [failed - net::ERR_FAILED]
https://api.realworld.io/api/articles?limit=10&offset=0 GET [failed - net::ERR_FAILED]

Daha derine inmek için takip soruları sorun:

Are there any failed requests?

YZ listeyi filtreler ve sorunu tespit eder: “Evet, dört API isteği başarısız oldu. İkisi 307 yönlendirme döndürdü, ikisi ise tamamen ERR_FAILED hatalarıyla başarısız oldu.”

Bu, Ağ sekmesini elle incelemeden sorunları hızlıca fark etmenize yardımcı olur.

JavaScript Değerlendirme ve Veri Çıkarma

Konsol ve ağ verilerini görüntülemenin ötesinde, sayfanın durumunu kontrol etmek veya bilgi çıkarmak için doğrudan sayfada kod çalıştırabilirsiniz. Bunun için evaluate_script kullanın:

Check if any articles are displayed on the homepage

YZ, makale öğelerini saymak için JavaScript çalıştırır:

const articles = document.querySelectorAll('.article-preview');
return articles.length;

Sonuç: “Görüntülenen 0 makale var. Sayfa ‘Loading articles…’ gösteriyor; bu da API hatalarının içeriğin yüklenmesini engellediğini düşündürüyor.”

Daha karmaşık veriler de çıkarabilirsiniz:

Get the page title and main heading text

YZ şunu değerlendirir:

return {
 pageTitle: document.title,
 mainHeading: document.querySelector('h1')?.textContent
};

Sonuç: {pageTitle: "Home — Conduit", mainHeading: "conduit"}

Bu, sayfa içeriğini doğrulamanıza, yapılandırılmış veri çıkarmanıza veya dinamik öğelerin doğru yüklendiğini kontrol etmenize olanak tanır. take_screenshot ve take_snapshot araçları, gerektiğinde görsel ve yapısal dokümantasyon yakalayarak bunu tamamlar.

Bu üç hata ayıklama yeteneği doğal biçimde birlikte çalışır. Hataları tespit etmek için konsol iletileriyle başlayın, neyin başarısız olduğunu anlamak için ağ isteklerini kontrol edin ve ardından bu başarısızlıkların sayfayı nasıl etkilediğini doğrulamak için JavaScript değerlendirmesi yapın—tümünü YZ asistanınızla sohbet ederek; araçlar arasında geçiş yapmak veya inceleme betikleri yazmak yok.

Chrome DevTools MCP ile Web Sitesi Ön Yüzleri Oluşturma

YZ asistanları web arayüzleri oluşturabilir, ancak oluşturduklarını göremezler. Ekran görüntülerini elle alıp düzeltme istemek zorunda kalırsınız.

Chrome DevTools MCP bunu değiştirir. YZ kendi ekran görüntülerini alır, yerleşimleri doğrular ve her şey doğru görünene kadar yineler.

Streamlit kullanarak bir ChatGPT klonu oluşturalım. Bunun için bir OpenAI API anahtarına ihtiyacınız olacak. Uygulamayı doğrulayabilmesi için istemi çalıştırırken bunu YZ asistanınıza verin. İstem şu şekilde:

Build a ChatGPT clone using Streamlit. Create a clean chat interface
with message history, text input, and OpenAI API integration. Include
a sidebar for API key management and chat management features (Clear
Chat, New Chat, message counter). Use Chrome DevTools MCP to verify
the UI at each step.

YZ, bir kenar çubuğu olan uygulamayı oluşturur ve ilk yerleşimi doğrulamak için bir ekran görüntüsü alır:

Kenar çubuğunda API anahtarı girişi, Clear Chat ve New Chat düğmeleri ve 0’da olan bir mesaj sayacı bulunur. Arayüz hazır olduğuna göre, sohbet işlevinin çalışıp çalışmadığına bakalım.

Basit bir soruyla test:

Sohbet doğru yanıt verir ve sayaç (bir sonraki ekran görüntüsünde) iki mesaj gösterir. Peki çok adımlı konuşmaları yönetebiliyor mu?

Konuşma bağlamını test etme:

YZ, önceki etkileşimi hatırlar. Sırada Clear Chat özelliğini doğrulamak var.

Clear Chat düğmesine tıklama:

Sohbet başarıyla temizlenir ve sayaç 0’a sıfırlanır. 

Yeni bir sohbet başlatma:

Mükemmel. YZ, çalışan bir ChatGPT klonu oluşturdu, her adımda görünümü doğruladı ve insan müdahalesi olmadan tüm özellikleri test etti.

Bu, herhangi bir çerçeve için geçerlidir. React, Vue, Svelte, yalın HTML. YZ yerleşimleri doğrular, etkileşimleri test eder ve siz kodu görmeden önce hataları yakalar.

Sonuç ve Sonraki Adımlar

Chrome DevTools MCP, sohbet yoluyla tarayıcı otomasyonu sunar. Ne istediğinizi tarif edersiniz, yapay zekâ asistanınız teknik ayrıntıları halleder. Betik yok, seçici ayıklama yok.

Bu makale boyunca temelleri ele aldık: sunucuyu kurma, sayfalarda gezinme, form doldurma, öğelere tıklama ve ekran görüntüsü alma. Ardından konsol incelemesi, ağ izleme ve JavaScript değerlendirmesiyle hata ayıklamaya geçtik. Son olarak, bu araçların YZ’nin ne oluşturduğunu görebildiği ön yüzler inşa etmek için nasıl birlikte çalıştığını gördük.

Sırada ne var

Önce üzerinde çalıştığınız bir siteye gidin ve YZ’nize konsol hatalarını kontrol etmesini veya ağ isteklerini incelemesini isteyin. Claude Code kullanıyorsanız, Claude Code en iyi uygulamalar rehberimiz araç kullanımı için etkili istem kalıplarını kapsar. Farklı durumların ekran görüntülerini alın. Form gönderimlerini test edin.

Sonra birden fazla aracı birleştirin: bir sayfaya gidin, bir formu doldurun, gönderin ve sonucu yakalayın. Konsol iletilerini kontrol edin, başarısız ağ isteklerini listeleyin ve sayfa durumunu doğrulamak için JavaScript çalıştırın.

Temellerde rahatladıktan sonra, YZ’nizle küçük bir UI bileşeni oluşturun ve her adımda yerleşimi doğrulamasına izin verin. Elle kontrol etmeden önce nasıl görsel sorunları yakaladığını izleyin.

Performans çalışmaları için performans araçlarını (performance_start_trace, performance_stop_trace, performance_analyze_insight) kullanarak sayfa yükleme sürelerini profilleyin ve dar boğazları belirleyin. Öykünme araçlarını (emulate_cpu, emulate_network, resize_page) farklı koşullar altında test etmek için kullanın.

Chrome DevTools MCP, birçok sunucudan yalnızca biridir. Dosya sistemi sunucuları, veritabanı araçları veya API entegrasyonlarıyla birleştirerek birden çok sisteme yayılan iş akışları kurun. Daha fazla MCP örneği için Codex CLI MCP eğitimimize ve Google ADK MCP eğitimimize bakın.

Kendi MCP sunucularınızı oluşturmak istiyorsanız, FastMCP 2.0 ile MCP Sunucusu ve İstemcisi Oluşturma rehberine göz atın.