Ajanlar için Chrome Geliştirici Araçları, Chrome Geliştirici Araçları'nın gücünü yapay zeka kodlama iş akışlarınıza taşıyan bir araç paketidir. Ajanlar için Chrome Geliştirici Araçları'nı yükleyerek aşağıdaki özelliklere erişebilirsiniz:
- MCP Sunucusu: Açık kaynaklı Model Context Protocol'ü kullanarak yapay zeka aracınızı canlı bir tarayıcı örneğine bağlar.
- Chrome Geliştirici Araçları CLI: Tarayıcıyla doğrudan terminalinizden etkileşim kurmak için kullanılan bir arayüz.
- Temsilciye Özgü Beceriler: Temsilcinize erişilebilirlik veya performans hata ayıklama gibi karmaşık görevler için birden fazla aracı nasıl koordine edeceğini öğreten uzman talimatları.
Web geliştirme bağlamında, ajanlar için Chrome Geliştirici Araçları, hata ayıklama özelliklerini yapay zeka aracınıza entegre eder.
Örneğin, bir temsilci web sitesinin performansını analiz etmek ve olası iyileştirmeleri belirlemek için araçları kullanarak performans izlerini kaydedip değerlendirebilir. Geliştirici Araçları, web geliştirmenin yanı sıra statik HTML'yi almak yerine canlı web'e göz atmasına da olanak tanır.
Kurulum
Bu kılavuzda, kodlama ajanınızın canlı bir Chrome tarayıcıyı kontrol etmesine ve incelemesine yardımcı olacak şekilde Ajanlar için Chrome Geliştirici Araçları'nı nasıl ayarlayacağınız gösterilmektedir.
chrome-devtools-mcp paketini kullanarak kodlama temsilcinizden (ör. Gemini, Claude, Cursor veya Copilot) canlı bir Chrome tarayıcıyı kontrol edip inceleyin. Ajanlar için Chrome Geliştirici Araçları'nın tüm araç paketini sunduğunu, ancak CLI'nın yalnızca kabuk tabanlı otomasyon için hedeflenen bir alt grubu desteklediğini unutmayın.
Desteklenen IDE'ler ve modeller
Ajanlar için Chrome Geliştirici Araçları, MCP protokolünü destekleyen tüm araçları veya IDE'leri destekler. Antigravity, Gemini CLI, Claude Code, Cursor ve Copilot gibi hizmetler bu kapsamdadır.
Güvenlikle ilgili olarak göz önünde bulundurulması gerekenler
Aracınız, eriştiği sayfaları görüntüleyip bunlarla etkileşimde bulunabildiği için etkin ve kimliği doğrulanmış bir oturumla tarayıcıya bağlarsanız sizin adınıza etkili bir şekilde hareket edebilir. Temsilcilerle paylaşmak istemediğiniz hassas veya kişisel bilgileri paylaşmayın.
Ön koşullar
Ajanlar için Chrome Geliştirici Araçları'nı yüklemeden önce ortamınızın aşağıdaki koşulları karşıladığından emin olun:
Ajanlar için Chrome Geliştirici Araçları'nı ayarlamak üzere tercih ettiğiniz kodlama ortamına uygun yöntemi seçin. Bazı aracıların manuel olarak yüklenmesi gerekirken diğerleri araçlarla önceden entegre edilmiş olarak gelir.
Antigravity
Ajanlar için Chrome Geliştirici Araçları, Antigravity 2.0 ile birlikte gelir. Tarayıcı alt aracısı ile hemen kullanmaya başlayabilirsiniz. Aşağıdakilere benzer bir eğik çizgi komutu kullanmayı deneyin:
/browser Navigate to the Google homepage
Uzman aracı becerilerine erişmek için ilk kurulumun Google ile geliştirme adımında veya uygulama ayarlarında DevTools eklentisini yüklemenizi öneririz. Daha fazla bilgi için Antigravity Browser Subagent belgelerine göz atın.
CLI kullanarak yükleme
Aracılar için Chrome Geliştirici Araçları'nı ayarlamak üzere bir JSON yapılandırma dosyası kullanabilir veya aracınız destekliyorsa sunucuyu doğrudan yüklemek için bir CLI komutu kullanabilirsiniz. Bazı ajanlar, ajan becerilerini ve ajanın DevTools özelliklerini kullanmasına yardımcı olan uzman talimatlarını içeren resmi uzantılar veya eklentiler de sunar.
Aracınız burada listelenmiyorsa nasıl yükleneceğini Chrome DevTools for Agents GitHub deposunda bulabilirsiniz.
Ajanlar için Chrome Geliştirici Araçları'nı bir komut satırı aracısına eklemek üzere, belirli aracınız için yerleşik CLI komutlarını kullanın:
Gemini CLI
MCP paketini ve beraberindeki becerileri içeren Gemini CLI uzantısını aşağıdaki komutu kullanarak yükleyin:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Aşağıdaki komutu kullanarak yalnızca MCP paketini yükleyin:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
Ajanlar için Chrome Geliştirici Araçları'nı Claude Code eklentisi olarak yüklemek için Claude Code'da aşağıdaki eğik çizgi komutlarını kullanın. Marketplace kayıt defterini ekleyin:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Eklentiyi pazar yeri kayıt defterinden yükleyin:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Daha fazla bilgi için resmi Chrome Geliştirici Araçları Claude Eklentisi sayfasını inceleyin.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
JSON yapılandırmasını kullanarak yükleme
mcpServers yapılandırma anahtarını destekleyen diğer aracıları kullanıyorsanız bu girişi manuel olarak ekleyin ve aracıların Geliştirici Araçları'nı npm i
chrome-devtools-mcp üzerinden yüklediğinizden emin olun.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Diğer aracıları yükleme
Listelenmeyen bir aracı için yapılandırma yapmak istiyorsanız Chrome Geliştirici Araçları MCP GitHub deposuna bakın.
Kurulumunuzu test etme
Her şeyin çalıştığını kontrol etmek için aracınıza aşağıdaki istemi girin:
Check the performance of https://developers.chrome.com
Temsilciniz bir tarayıcı penceresi açıp performans izi kaydetmelidir.
Kurulumunuzla ilgili sorunları giderme
Aracınız araçları çalıştırmada başarısız olursa ve Chrome Geliştirici Araçları becerilerine erişimi varsa sorunu otomatik olarak düzeltmeye çalışabilir. Aksi takdirde, aracıya açıkça istemde bulunabilirsiniz:
Use the Chrome DevTools troubleshooting skill to fix my setup.
Dilerseniz daha ayrıntılı bilgi de verebilirsiniz:
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
Sonraki adımlar
Kurulumunuzu özelleştirmek için Yapılandırma başlıklı makaleyi inceleyin.