Temsilciler 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. 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.
- Temsilci Becerileri: 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, aracıların 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 temsilcinizin yalnızca statik HTML'yi almak yerine canlı web'e göz atmasına da olanak tanır.
Kurulum
Bu kılavuzda, Chrome Geliştirici Araçları'nı, kodlama aracınızın canlı bir Chrome tarayıcıyı kontrol etmesine ve incelemesine yardımcı olacak şekilde nasıl ayarlayacağınız gösterilmektedir.
chrome-devtools-mcp paketini kullanarak kodlama aracınızdan (ör. Gemini, Claude, Cursor veya Copilot) canlı bir Chrome tarayıcıyı kontrol edip inceleyin. Aracılar için Chrome Geliştirici Araçları'nın tam paket araçları 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
Aracılar 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
Temsilciniz, eriştiği sayfaları görüntüleyip bu sayfalarla etkileşimde bulunabileceğ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:
Aracılar 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
Temsilciler için Chrome Geliştirici Araçları, Antigravity 2.0 ile birlikte önceden paketlenmiş olarak 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
Chrome Geliştirici Araçları'nı aracı için 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ı aracılar, aracı becerilerini ve aracınızı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.
Komut satırı aracına Chrome Geliştirici Araçları'nı eklemek için aracınıza özel yerleşik CLI komutlarını kullanın:
Gemini CLI
Aşağıdaki komutu kullanarak MCP paketini ve beraberindeki becerileri içeren Gemini CLI uzantısını 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
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. Pazar yeri 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 için bu girişi manuel olarak ekleyin ve npm i
chrome-devtools-mcp aracılığıyla aracılar için Geliştirici Araçları'nı 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.
Gelişmiş yapılandırma
Ajanınızın tarayıcıya erişebileceği diğer yöntemler şunlardır:
Gözetimsiz modu yapılandırma
Arka plan görevlerini görünür bir tarayıcı penceresi olmadan gerçekleştirmek istiyorsanız Chrome'u gözetimsiz (kullanıcı arayüzü yok) modda çalıştırabilirsiniz. Sunucu bağımsız değişkenlerinize --headless işaretini ekleyin:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Mevcut bir tarayıcı oturumuna bağlanma
Varsayılan olarak, müşteri temsilcileri için Geliştirici Araçları yeni bir Chrome örneği başlatır. Ancak, --autoConnect işaretini kullanarak temsilcinizi mevcut bir tarayıcı oturumuna bağlayabilirsiniz. Bu özellik, özellikle temsilcinizin bir sorunu incelemesi gerektiğinde ve bu sorunun, oturum açma veya daha önce başlattığınız bir oturumun arkasında kaldığı durumlarda yararlıdır.
Mevcut bir oturuma bağlanmanın iki yolu vardır:
Otomatik bağlantıyı kullanma (Chrome 144 ve sonraki sürümler)
Chrome Geliştirici Araçları MCP sunucusu --autoConnect seçeneğiyle yapılandırıldığında, MCP sunucusu etkin bir Chrome örneğine bağlanır ve uzaktan hata ayıklama oturumu isteğinde bulunur.
- Çalışan Chrome tarayıcınızda, uzaktan hata ayıklamayı etkinleştirmek için
chrome://inspect/#remote-debuggingsimgesine gidin. MCP yapılandırmanızı
--autoConnectişaretini içerecek şekilde güncelleyin:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Temsilcinize bir istem gönderin. Chrome, uzaktan hata ayıklama oturumuna izin vermek için kullanıcı izni isteyen bir iletişim kutusu gösterir. İzin ver'i tıklayın.
Uzaktan hata ayıklama bağlantı noktasını kullanarak manuel olarak bağlanma
--autoConnect kullanamıyorsanız (örneğin, aracınızı korumalı bir ortamda çalıştırıyorsanız) Chrome'u hata ayıklama bağlantı noktasıyla manuel olarak başlatabilirsiniz.
Örnek (macOS'te):
Chrome tarayıcıyı uzaktan hata ayıklama bağlantı noktası etkin olarak başlatın. Güvenlik nedeniyle özel bir kullanıcı verileri dizini de belirtmeniz gerekir.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableTemsilcinizi
--browser-urlparametresini kullanarak bağlanacak şekilde yapılandırın:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }