Chrome Geliştirici Araçları MCP Sunucusu Nasıl Kullanılır

Hata ayıklama her zaman web geliştirmenin kalbinde yer almıştır, ancak yapay zeka kodlama asistanlarının yükselişiyle geliştiriciler yeni bir zorlukla karşı karşıya: bu aracıların ürettikleri kodu gerçekten *nasıl görebildikleri* ve onunla nasıl etkileşim kurabildikleri? Karşınızda Chrome Geliştirici Araçları MCP sunucusu—yapay zeka kodlama asistanlarınızı Chrome'un DevTools'una gerçek zamanlı hata ayıklama, performans analizleri ve kullanıcı akışı testi için bağlamanın yeni bir yolu.

Bu rehber, Chrome Geliştirici Araçları MCP sunucusunun ne olduğunu, nasıl çalıştığını, neden önemli olduğunu ve en önemlisi VS Code, Gemini CLI ve Cursor'da nasıl kurulup kullanılacağını size anlatacaktır. Rehberin sonunda, Chrome'un güçlü hata ayıklama ortamını yapay zeka destekli geliştirme iş akışınıza nasıl entegre edeceğinizi öğrenmiş olacaksınız.

💡

Güzel API Dokümantasyonu oluşturan harika bir API Test aracına mı ihtiyacınız var?

Geliştirici Ekibinizin maksimum verimlilikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılar ve Postman'i çok daha uygun bir fiyata değiştirir!

button

Chrome Geliştirici Araçları MCP Sunucusu Nedir?

Model Bağlam Protokolü (MCP), büyük dil modellerinin (BDM'ler) harici araçlara ve veri kaynaklarına bağlanmasına olanak tanıyan açık kaynaklı bir standarttır. Chrome Geliştirici Araçları MCP sunucusu, Chrome DevTools'un hata ayıklama gücünü doğrudan yapay zeka aracınıza getirir.

"Körlemesine" kod üretmek yerine, yapay zeka asistanınız artık şunları yapabilir:

Chrome'u başlatmak ve bir web sitesi açmak.
Canlı performans izlerini toplamak.
DOM, CSS ve JavaScript çalışma zamanını incelemek.
Düzen, ağ ve konsol sorunlarında hata ayıklamak.
Tıklamalar, form gönderimleri ve navigasyon gibi kullanıcı davranışlarını simüle etmek.

Bu, yapay zeka kodlama aracısını çok daha etkili hale getirir, çünkü neyin işe yarayacağını tahmin etmek yerine, kod değişikliklerini gerçek zamanlı olarak doğrulayabilir, test edebilir ve optimize edebilir.

Chrome Geliştirici Araçları MCP Sunucusu Neden Kullanılmalı?

İş akışınıza Chrome Geliştirici Araçları MCP sunucusunu entegre etmenin temel kullanım durumları şunlardır:

1. Kod Değişikliklerini Gerçek Zamanlı Doğrulama
Yapay zeka asistanınızla düzeltmeler oluşturun ve tarayıcıda anında çalıştıklarını onaylayın.

Örnek komut istemi: "Değişikliğinizin tarayıcıda beklendiği gibi çalıştığını doğrulayın."

2. Ağ ve Konsol Hatalarını Teşhis Etme
CORS sorunlarını, API hatalarını veya beklenmeyen çalışma zamanı uyarılarını belirleyin.

Örnek komut istemi: "localhost:8080 üzerindeki birkaç görsel yüklenmiyor. Ne oluyor?"

3. Kullanıcı Davranışını Simüle Etme
Hataları yeniden üretmek için form gönderimleri veya navigasyon gibi kullanıcı akışlarını otomatikleştirin.

Örnek komut istemi: "Bir e-posta adresi girdikten sonra form gönderimi neden başarısız oluyor?"

4. Canlı Stil ve Düzen Sorunlarında Hata Ayıklama
Taşma hataları, hizalama sorunları veya render sorunları için DOM ve CSS'i inceleyin.

Örnek komut istemi: "localhost:8080'deki sayfa garip görünüyor. Orada ne olduğunu kontrol edin."

5. Performans Denetimlerini Otomatikleştirme
Doğrudan yapay zeka asistanı aracılığıyla Lighthouse tarzı kontrolleri tetikleyin.

Örnek komut istemi: "Localhost:8080 yavaş yükleniyor. Daha hızlı yüklenmesini sağlayın."

Chrome Geliştirici Araçları MCP Sunucusu Nasıl Kurulur?

İster VS Code, Gemini CLI veya Cursor kullanıyor olun, kurulum basittir.

1. VS Code'a Kurulum

VS Code'u açın
Ctrl + Shift + P (Windows veya Linux'ta) veya Cmd + Shift + P (Mac için) tuşlarına basın.
Şimdi, "MCP" araması yapın ve "MCP Sunucusu Ekle"ye tıklayın.
"MCP Sunucularına Göz At"ı seçin.

Uzantılar altındaki kenar çubuğunda, tekrar "MCP Sunucularına Göz At"a tıklayın.
Mevcut MCP sunucularını listeleyen bir web sayfasına yönlendirileceksiniz.
Bu web sayfasında, "chrome" anahtar kelimesini kullanarak "Chrome Geliştirici Araçları MCP Sunucusu"nu arayın.

Chrome Geliştirici Araçları MCP Sunucusu

Yükle'ye tıklayın, ardından "VS Code'a Yükle"yi seçin.

Kurulduktan sonra, VS Code yapay zeka asistanınız canlı hata ayıklama için Chrome'a bağlanabilecektir.

VS Code'a Chrome Geliştirici Araçları MCP Sunucusu Kurulumu

2. Cursor'a Kurulum

Cursor Düzenleyiciyi açın.
Ayarlar > Araçlar ve MCP'ye gidin.

Aşağı kaydırın ve Yeni MCP Sunucusu'na tıklayın.
Bu, MCP yapılandırma JSON dosyasını açar ve buraya aşağıdaki MCP yapılandırmasını yapıştırmanız gerekecektir:

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

Ardından kaydedin ve Cursor'ı yeniden başlatın.

Artık Cursor, Chrome Geliştirici Araçları MCP sunucusunu tanıyacak ve hata ayıklama için yapay zeka kodlama asistanınıza bağlayacaktır.

3. Gemini'ye Kurulum (Önerilen)

Gemini kullanıyorsanız, onu Chrome Geliştirici Araçları MCP sunucusuna da bağlayabilirsiniz. Aslında, Chrome, hata ayıklama ve inceleme yeteneklerinden tam olarak yararlanmak için bu özelliği Gemini'de etkinleştirmenizi özellikle önerir.

İlk olarak, kullanıcınızın kök dizinindeki .gemini klasöründe settings.json dosyasını bulun. MCP yapılandırmamızı buraya ekleyeceğiz. Bunu iki şekilde yapabilirsiniz:

1. Klasörlerinizde manuel olarak gezinin:

Kullanıcı profilinizin altındaki .gemini klasörünü arayın ve ardından settings.json dosyasını kod düzenleyicinizle (örn. vs code) açın.

2. Terminali kullanarak:

Kök dizine gidin ve aşağıdaki komutları kullanarak .gemini klasörünü açın:

cd ~
cd .gemini

.gemini klasörünün içinde, settings.json dosyasını vs code ile aşağıdaki komutu kullanarak açın:

code settings.json

3. Chrome Geliştirici Araçları MCP Sunucusunu Gemini CLI'ye Ekleme

Chrome Geliştirici Araçları MCP Sunucusunu eklemek için aşağıdaki yapılandırmayı dosyaya yapıştırın:

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

Dosyayı kaydedin ve kapatın.

Yapılandırma dosyası şöyle görünmelidir:

Şimdi Gemini'yi açın ve sunucunun kurulu olduğunu onaylamak için aşağıdaki komutu çalıştırın:

/mcp

Artık Chrome Geliştirici Araçları MCP sunucusunu mevcut sunucular arasında listelenmiş olarak görmelisiniz. Buradan itibaren Gemini, doğrudan Chrome Geliştirici Araçları'na bağlanabilir ve yapay zeka yardımıyla canlı uygulamalarda hata ayıklamayı kolaylaştırır.

Chrome Geliştirici Araçları MCP Sunucusu Nasıl Kullanılır?

Kurulduktan sonra, yapay zeka asistanınızdaki komut istemleri aracılığıyla doğrudan onunla etkileşime geçmeye başlayabilirsiniz. Örneğin:

1. Performans Analizi
"Lütfen web.dev'in LCP'sini (Largest Contentful Paint) kontrol edin."

performans analizi için chrome geliştirici araçları mcp sunucusunu kullanma

2. CSS Sorunlarında Hata Ayıklama
"localhost:8080'i inceleyin ve başlıktaki taşan öğeleri düzeltin."

3. Konsol ve Ağ Günlükleri
"localhost:3000'deki giriş formunu gönderirken oluşan konsol hatalarını analiz edin."

4. Kullanıcı Akışlarını Simüle Etme
"Kayıt sayfasına gidin, formu doldurun ve gönderimin neden başarısız olduğunu söyleyin."

Yapay zeka asistanınız artık sadece kod yazmakla kalmıyor, aynı zamanda tıpkı bir insan geliştiricinin yapacağı gibi, doğrudan Chrome'da kodu *test ediyor ve hatalarını ayıklıyor*.

Gelişmiş Özellikler

1. Otomatik İzleme
performance_start_trace aracı, yapay zeka aracınızın izleri kaydetmesine ve performans darboğazlarını otomatik olarak analiz etmesine olanak tanır.

2. DOM ve CSS İncelemesi
Yapay zeka asistanları, canlı DOM yapılarını inceleyebilir ve hedeflenmiş CSS veya HTML düzeltmeleri sağlayabilir.

3. Ölçeklenebilir İş Akışları
MCP tarafından desteklendiği için, aynı kurulum MCP'yi destekleyen farklı düzenleyiciler ve aracılar arasında çalışır ve tutarlılık sağlar.

Katılım ve Gelecek Görünümü

Chrome Geliştirici Araçları MCP sunucusu hala genel önizlemededir. Bu, hızla geliştiği ve Google'ın aktif olarak geliştirici geri bildirimi aradığı anlamına gelir. Gelecekteki iyileştirmeler şunları içerebilir:

Lighthouse ve Temel Web Verileri ile daha derin entegrasyonlar.
Kullanıcı girdisinin daha zengin simülasyonu (çok adımlı akışlar).
Yapay zeka tarafından tespit edilen sorunların daha güçlü görselleştirilmesi.
Çoklu sekme ve çoklu cihaz hata ayıklama için genişletilmiş destek.

Güncellemeleri Chrome Geliştiriciler Blogu'ndan takip edebilir ve GitHub'da sorun veya önerilerde bulunabilirsiniz.

Sonuç

Chrome Geliştirici Araçları MCP sunucusu sadece başka bir geliştirici aracından daha fazlasıdır; geleneksel hata ayıklama iş akışları ile yapay zeka destekli kodlamanın yükselen dünyası arasında bir köprüdür. Kodlama aracılarının gerçek zamanlı olarak görme, test etme ve hata ayıklama yeteneği kazandırarak, onları kod üreticilerinden tam teşekküllü hata ayıklama ortaklarına dönüştürür.

İster VS Code kullanan profesyonel bir geliştirici, ister Cursor'da deney yapan bir öğrenci, ister otomasyonu keşfeden bir yapay zeka meraklısı olun, Chrome Geliştirici Araçları MCP Sunucusunu kurmak ve kullanmak üretkenliği ve kod kalitesini önemli ölçüde artırabilir.

Artık Chrome DevTools yapay zeka aracınızla doğrudan konuşabildiğine göre, geriye kalan tek soru şudur: sırada ne inşa edecek, test edecek ve düzelteceksiniz?

button