Chrome DevTools MCP

Ajanlar için Chrome DevTools

Ajanlar için Chrome DevTools (chrome-devtools-mcp), kodlama ajanınızın (Antigravity, Claude, Cursor veya Copilot gibi) canlı bir Chrome tarayıcısını kontrol etmesini ve incelemesini sağlar. Bir Model-Bağlam-Protokolü (MCP) sunucusu olarak görev yaparak, yapay zeka kodlama asistanınıza güvenilir otomasyon, derinlemesine hata ayıklama ve performans analizi için Chrome DevTools'un tüm gücüne erişim verir. MCP olmadan kullanım için bir CLI da sağlanmıştır.

Araç referansı | Değişiklik Günlüğü | Katkıda Bulunma | Sorun Giderme | Tasarım İlkeleri

Temel özellikler

• Performans içgörüleri edinin: İzleri kaydetmek ve eyleme dönüştürülebilir performans içgörüleri çıkarmak için Chrome DevTools kullanır.
• Gelişmiş tarayıcı hata ayıklama: Ağ isteklerini analiz edin, ekran görüntüleri alın ve tarayıcı konsol mesajlarını kontrol edin (kaynak eşlemeli yığın izleri ile).
• Güvenilir otomasyon. Chrome'da eylemleri otomatikleştirmek ve eylem sonuçlarını otomatik olarak beklemek için puppeteer kullanır.

Sorumluluk Reddi Beyanları

chrome-devtools-mcp, tarayıcı örneğinin içeriğini MCP istemcilerine sunarak tarayıcı veya DevTools'taki herhangi bir veriyi incelemelerine, hata ayıklamalarına ve değiştirmelerine olanak tanır. MCP istemcileriyle paylaşmak istemediğiniz hassas veya kişisel bilgileri paylaşmaktan kaçının.

chrome-devtools-mcp yalnızca Google Chrome ve Chrome for Testing tarayıcılarını resmi olarak destekler. Diğer Chromium tabanlı tarayıcılar çalışabilir, ancak bu garanti edilmez ve beklenmeyen davranışlarla karşılaşabilirsiniz. Kendi takdirinize bağlı olarak kullanın. Extended Stable Chrome tarayıcısının en son sürümü için düzeltmeler ve destek sağlamaya kararlıyız.

Performans araçları, gerçek kullanıcı deneyimi verilerini almak için Google CrUX API'sine izleme URL'leri gönderebilir. Bu, laboratuvar verilerinin yanında saha verilerini sunarak bütünsel bir performans resmi sağlamaya yardımcı olur. Bu veriler Chrome Kullanıcı Deneyimi Raporu (CrUX) tarafından toplanır. Bunu devre dışı bırakmak için --no-performance-crux bayrağı ile çalıştırın.

Kullanım istatistikleri

Google, Chrome DevTools MCP'nin güvenilirliğini ve performansını artırmak için kullanım istatistikleri (araç çağrı başarı oranları, gecikme süresi ve ortam bilgileri gibi) toplar.

Veri toplama varsayılan olarak etkindir. Sunucuyu başlatırken --no-usage-statistics bayrağını ileterek devre dışı bırakabilirsiniz:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google bu verileri Google Gizlilik Politikası uyarınca işler.

Google'ın Chrome DevTools MCP için kullanım istatistikleri toplaması, Chrome tarayıcısının kullanım istatistiklerinden bağımsızdır. Chrome metriklerini devre dışı bırakmak sizi bu araçtan otomatik olarak devre dışı bırakmaz ve bunun tersi de geçerlidir.

CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS veya CI ortam değişkenleri ayarlanmışsa toplama devre dışı bırakılır.

Güncelleme kontrolleri

Sunucu varsayılan olarak npm kayıt defterini periyodik olarak güncellemeler için kontrol eder ve daha yeni bir sürüm mevcut olduğunda bir bildirim günlüğe kaydeder. CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS ortam değişkenini ayarlayarak bu güncelleme kontrollerini devre dışı bırakabilirsiniz.

Gereksinimler

• Node.js LTS sürümü.
• Chrome mevcut kararlı sürüm veya daha yenisi.
• npm

Başlarken

MCP istemcinize aşağıdaki yapılandırmayı ekleyin:

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

[!NOTE] chrome-devtools-mcp@latest kullanmak, MCP istemcinizin her zaman Chrome DevTools MCP sunucusunun en son sürümünü kullanmasını sağlar.

Yalnızca temel tarayıcı görevleri yapmakla ilgileniyorsanız, --slim modunu kullanın:

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

Bkz. Slim araç referansı.

MCP İstemci yapılandırması

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

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

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

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

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

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

copilot

/mcp add

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'

droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"

# Either MCP only:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

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

mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest

[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["chrome-devtools-mcp@latest"]

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
    }
  }
}

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

qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest

Her şeyin çalışıp çalışmadığını kontrol etmek için MCP İstemcinize aşağıdaki istemi girin:

Check the performance of https://developers.chrome.com

MCP istemciniz tarayıcıyı açmalı ve bir performans izi kaydetmelidir.

[!NOTE] MCP istemcisi, çalışan bir tarayıcı örneği gerektiren bir araç kullandığında MCP sunucusu tarayıcıyı otomatik olarak başlatacaktır. Chrome DevTools MCP sunucusuna tek başına bağlanmak tarayıcıyı otomatik olarak başlatmayacaktır.

Araçlar

Herhangi bir sorunla karşılaşırsanız, sorun giderme kılavuzumuza göz atın.

• Girdi otomasyonu (10 araç)
  • click
  • drag
  • fill
  • fill_form
  • handle_dialog
  • hover
  • press_key
  • type_text
  • upload_file
  • click_at
• Navigasyon otomasyonu (6 araç)
  • close_page
  • list_pages
  • navigate_page
  • new_page
  • select_page
  • wait_for
• Öykünme (2 araç)
  • emulate
  • resize_page
• Performans (3 araç)
  • performance_analyze_insight
  • performance_start_trace
  • performance_stop_trace
• Ağ (2 araç)
  • get_network_request
  • list_network_requests
• Hata ayıklama (8 araç)
  • evaluate_script
  • get_console_message
  • lighthouse_audit
  • list_console_messages
  • take_screenshot
  • take_snapshot
  • screencast_start
  • screencast_stop
• Bellek (11 araç)
  • take_heapsnapshot
  • close_heapsnapshot
  • compare_heapsnapshots
  • get_heapsnapshot_class_nodes
  • get_heapsnapshot_details
  • get_heapsnapshot_dominators
  • get_heapsnapshot_duplicate_strings
  • get_heapsnapshot_edges
  • get_heapsnapshot_retainers
  • get_heapsnapshot_retaining_paths
  • get_heapsnapshot_summary
• Uzantılar (5 araç)
  • install_extension
  • list_extensions
  • reload_extension
  • trigger_extension_action
  • uninstall_extension
• Üçüncü taraf (2 araç)
  • execute_3p_developer_tool
  • list_3p_developer_tools
• WebMCP (2 araç)
  • execute_webmcp_tool
  • list_webmcp_tools

Yapılandırma

Chrome DevTools MCP sunucusu aşağıdaki yapılandırma seçeneğini destekler:

• --autoConnect/ --auto-connect Belirtilirse, kanal parametresiyle tanımlanan kullanıcı veri dizininden (varsayılan kanal kararlıdır) yerel olarak çalışan bir tarayıcıya (Chrome 144+) otomatik olarak bağlanır. Chrome örneğinde chrome://inspect/#remote-debugging aracılığıyla uzaktan hata ayıklama sunucusunun başlatılmış olmasını gerektirir.

  • Tür: boolean
  • Varsayılan: false

• --browserUrl/ --browser-url, -u Çalışan, hata ayıklanabilir bir Chrome örneğine bağlanın (örn. http://127.0.0.1:9222). Daha fazla ayrıntı için bkz: https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.

  • Tür: string
  • Varsayılan: false

• --wsEndpoint/ --ws-endpoint, -w Çalışan bir Chrome örneğine bağlanmak için WebSocket uç noktası (örn., ws://127.0.0.1:9222/devtools/browser/). --browserUrl'ye alternatif.

  • Tür: string
  • Varsayılan: false

• --wsHeaders/ --ws-headers JSON biçiminde WebSocket bağlantısı için özel başlıklar (örn., '{"Authorization":"Bearer token"}'). Yalnızca --wsEndpoint ile çalışır.

  • Tür: string
  • Varsayılan: false

• --headless Başsız (UI olmadan) modda çalıştırılıp çalıştırılmayacağı.

  • Tür: boolean
  • Varsayılan: false

• --executablePath/ --executable-path, -e Özel Chrome yürütülebilir dosyasının yolu.

  • Tür: string
  • Varsayılan: false

• --isolated Belirtilirse, tarayıcı kapatıldıktan sonra otomatik olarak temizlenen geçici bir kullanıcı-veri-dizini oluşturur. Varsayılan false.

  • Tür: boolean
  • Varsayılan: false

• --userDataDir/ --user-data-dir Chrome için kullanıcı veri dizininin yolu. Varsayılan $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE

  • Tür: string
  • Varsayılan: false

• --channel Kullanılması gereken farklı bir Chrome kanalı belirtin. Varsayılan, kararlı kanal sürümüdür.

  • Tür: string
  • Seçenekler: canary, dev, beta, stable
  • Varsayılan: false

• --logFile/ --log-file Hata ayıklama günlüklerinin yazılacağı bir dosyanın yolu. Ayrıntılı günlükleri etkinleştirmek için DEBUG ortam değişkenini * olarak ayarlayın. Hata raporları göndermek için kullanışlıdır.

  • Tür: string
  • Varsayılan: false

• --viewport Sunucu tarafından başlatılan Chrome örnekleri için başlangıç görünüm alanı boyutu. Örneğin, 1280x720. Başsız modda maksimum boyut 3840x2160px'dir.

  • Tür: string
  • Varsayılan: false

• --proxyServer/ --proxy-server Tarayıcı başlatılırken --proxy-server olarak iletilen Chrome için proxy sunucu yapılandırması. Ayrıntılar için https://www.chromium.org/developers/design-documents/network-settings/ adresine bakın.

  • Tür: string
  • Varsayılan: false

• --acceptInsecureCerts/ --accept-insecure-certs Etkinleştirilirse, kendinden imzalı ve süresi dolmuş sertifikalarla ilgili hataları yok sayar. Dikkatli kullanın.

  • Tür: boolean
  • Varsayılan: false

• --experimentalPageIdRouting/ --experimental-page-id-routing Sayfa kapsamlı araçlarda pageId'nin gösterilip gösterilmeyeceği ve isteklerin sayfa kimliğine göre yönlendirilip yönlendirilmeyeceği (eşzamanlı aracı oturumları için kullanışlıdır).

  • Tür: boolean
  • Varsayılan: false

• --experimentalDevtools/ --experimental-devtools DevTools hedefleri üzerinde otomasyonun etkinleştirilip etkinleştirilmeyeceği

  • Tür: boolean
  • Varsayılan: false

• --experimentalVision/ --experimental-vision click_at(x,y) gibi koordinat tabanlı araçların etkinleştirilip etkinleştirilmeyeceği. Genellikle ekran görüntülerine bakarak doğru koordinatlar üretebilen bir bilgisayar kullanım modeli gerektirir.

  • Tür: boolean
  • Varsayılan: false

• --memoryDebugging/ --memory-debugging, -experimentalMemory Bellek hata ayıklama araçlarının etkinleştirilip etkinleştirilmeyeceği.

  • Tür: boolean
  • Varsayılan: false

• --experimentalStructuredContent/ --experimental-structured-content Yapılandırılmış biçimlendirilmiş içeriğin çıktılanıp çıktılanmayacağı.

  • Tür: boolean
  • Varsayılan: false

• --experimentalIncludeAllPages/ --experimental-include-all-pages Web görünümleri veya arka plan sayfaları gibi her türlü sayfanın sayfa olarak dahil edilip edilmeyeceği.

  • Tür: boolean
  • Varsayılan: false

• --experimentalScreencast/ --experimental-screencast Deneysel ekran yayını araçlarını kullanıma sunar (ffmpeg gerektirir). ffmpeg'i https://www.ffmpeg.org/download.html yükleyin ve MCP sunucusu PATH'inde mevcut olduğundan emin olun.

  • Tür: boolean
  • Varsayılan: false

• --experimentalFfmpegPath/ --experimental-ffmpeg-path Ekran yayını kaydı için ffmpeg yürütülebilir dosyasının yolu.

  • Tür: string
  • Varsayılan: false

• --categoryExperimentalWebmcp/ --category-experimental-webmcp WebMCP araçlarında hata ayıklamayı etkinleştirmek için true olarak ayarlayın. Şu bayraklarla Chrome 149+ gerektirir: --enable-features=WebMCP,DevToolsWebMCPSupport

  • Tür: boolean
  • Varsayılan: false

• --chromeArg/ --chrome-arg Chrome için ek argümanlar. Yalnızca Chrome, chrome-devtools-mcp tarafından başlatıldığında geçerlidir.

  • Tür: array
  • Varsayılan: false

• --blockedUrlPattern/ --blocked-url-pattern Belirtilen URL desenlerini engelleyerek tarayıcının ağ erişimini kısıtlar (https://urlpattern.spec.whatwg.org/ kullanır). Bağlantı sırasında engellenen URL'lere sahip hedeflerden sessizce ayrılır ve çalışma zamanı isteklerini (gezinmeler ve alt kaynaklar dahil) engeller. Bir desen dizisi kabul eder.

  • Tür: array
  • Varsayılan: false

• --allowedUrlPattern/ --allowed-url-pattern Yalnızca belirtilen URL desenlerine izin vererek tarayıcının ağ erişimini kısıtlar (https://urlpattern.spec.whatwg.org/ kullanır). Chrome 149+ gerektirir. Bağlantı sırasında izin verilmeyen URL'lere sahip hedeflerden sessizce ayrılır ve çalışma zamanı isteklerini (gezinmeler ve alt kaynaklar dahil) engeller. Bir desen dizisi kabul eder.

  • Tür: array
  • Varsayılan: false

• --ignoreDefaultChromeArg/ --ignore-default-chrome-arg Chrome için varsayılan argümanları açıkça devre dışı bırakın. Yalnızca Chrome, chrome-devtools-mcp tarafından başlatıldığında geçerlidir.

  • Tür: array
  • Varsayılan: false

• --categoryEmulation/ --category-emulation Öykünme ile ilgili araçları hariç tutmak için false olarak ayarlayın.

  • Tür: boolean
  • Varsayılan: true

• --categoryPerformance/ --category-performance Performans ile ilgili araçları hariç tutmak için false olarak ayarlayın.

  • Tür: boolean
  • Varsayılan: true

• --categoryNetwork/ --category-network Ağ ile ilgili araçları hariç tutmak için false olarak ayarlayın.

  • Tür: boolean
  • Varsayılan: true

• --categoryExtensions/ --category-extensions Uzantılarla ilgili araçları dahil etmek için true olarak ayarlayın. Not: Bu özellik şu anda yalnızca bir pipe bağlantısıyla desteklenmektedir. autoConnect, browserUrl ve wsEndpoint, 149 sürümüne kadar bu özellikle desteklenmez.

  • Tür: boolean
  • Varsayılan: false

• --categoryExperimentalThirdParty/ --category-experimental-third-party İncelenen sayfanın kendisi tarafından sunulan üçüncü taraf geliştirici araçlarını etkinleştirmek için true olarak ayarlayın

  • Tür: boolean
  • Varsayılan: false

• --performanceCrux/ --performance-crux Saha performans verilerini almak için performans izlerinden URL'lerin CrUX API'ye gönderilmesini devre dışı bırakmak için false olarak ayarlayın.

  • Tür: boolean
  • Varsayılan: true

• --usageStatistics/ --usage-statistics Kullanım istatistikleri toplamayı reddetmek için false olarak ayarlayın. Google, aracı iyileştirmek için kullanım verilerini toplar ve bu veriler Google Gizlilik Politikası (https://policies.google.com/privacy) kapsamında işlenir. Bu, Chrome tarayıcı metriklerinden bağımsızdır. CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS veya CI ortam değişkenleri ayarlanmışsa devre dışı bırakılır.

  • Tür: boolean
  • Varsayılan: true

• --screenshotFormat/ --screenshot-format Arayan kişi bir tane belirtmediğinde take_screenshot tarafından kullanılan varsayılan çıktı biçimini geçersiz kılın. JPEG ve WebP, PNG'den ~3-5 kat daha küçüktür, bu da AI konuşmalarındaki bağlam boyutunu azaltmaya yardımcı olur. Ayarlanmaması mevcut varsayılanı ("png") korur.

  • Tür: string
  • Seçenekler: jpeg, png, webp
  • Varsayılan: false

• --screenshotQuality/ --screenshot-quality Arayan kişi bir tane belirtmediğinde take_screenshot tarafından JPEG ve WebP için kullanılan varsayılan sıkıştırma kalitesini (0-100) geçersiz kılın. Daha düşük değerler daha küçük dosyalar anlamına gelir. PNG için yok sayılır. Ayarlanmaması Puppeteer varsayılanını korur.

  • Tür: number
  • Varsayılan: false

• --screenshotMaxWidth/ --screenshot-max-width Ekran görüntüleri için piksel cinsinden maksimum genişlik. Yakalanan görüntü daha genişse, döndürülmeden önce (en boy oranı korunarak) küçültülür. AI konuşmalarındaki bağlam boyutunu azaltır. Ayarlanmaması yeniden boyutlandırma yapılmaması anlamına gelir.

  • Tür: number
  • Varsayılan: false

• --screenshotMaxHeight/ --screenshot-max-height Ekran görüntüleri için piksel cinsinden maksimum yükseklik. Yakalanan görüntü daha uzunsa, döndürülmeden önce (en-boy oranı korunarak) küçültülür. --screenshot-max-width ile birleştirilebilir; daha küçük ölçek faktörü geçerli olur. Ayarlanmazsa yeniden boyutlandırma yapılmaz.

  • Tür: number
  • Varsayılan: false

• --slim Yalnızca gezinme, betik çalıştırma ve ekran görüntülerini kapsayan "ince" bir 3 araç seti sunar. Temel tarayıcı görevleri için kullanışlıdır.

  • Tür: boolean
  • Varsayılan: false

• --redactNetworkHeaders/ --redact-network-headers true ise, istemciye döndürülmeden önce hassas kabul edilen bazı ağ başlıklarını gizler.

  • Tür: boolean
  • Varsayılan: false

• --allowUnrestrictedPaths/ --allow-unrestricted-paths Ayarlanırsa, MCP istemcisi kök yeteneğini müzakere etmediğinde uygulanan varsayılan yol kısıtlamasını devre dışı bırakır. Varsayılan olarak, hiçbir kök yapılandırılmadığında dosya yazma araçları işletim sistemi geçici diziniyle sınırlıdır. Bunu yalnızca MCP köklerini uygulamayan ve geçici dizin dışındaki yollara erişmesi gereken güvenilir bir yerel istemci bağlarken kullanın.

  • Tür: boolean
  • Varsayılan: false

Bunları JSON yapılandırmasındaki args özelliği aracılığıyla iletin. Örneğin:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

Özel başlıklarla WebSocket üzerinden bağlanma

Doğrudan bir Chrome WebSocket uç noktasına bağlanabilir ve özel başlıklar (ör. kimlik doğrulama için) ekleyebilirsiniz:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

Çalışan bir Chrome örneğinden WebSocket uç noktasını almak için http://127.0.0.1:9222/json/version adresini ziyaret edin ve webSocketDebuggerUrl alanını arayın.

Mevcut tüm yapılandırma seçeneklerini görmek için npx chrome-devtools-mcp@latest --help komutunu da çalıştırabilirsiniz.

Kavramlar

Eşzamanlı oturumlar

Çoğu MCP istemcisi, konuşma başına bir Chrome DevTools MCP sunucusu başlatır. İstemciniz eşzamanlı aracılar veya alt aracılar arasında tek bir sunucu örneğini paylaşıyorsa, sunucuyu --experimentalPageIdRouting ile başlatın. Bu, sayfa kapsamlı araçlarda pageId özelliğini sunar, böylece her aracı araç çağrılarını üzerinde çalıştığı sekmeye yönlendirebilir.

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

Birden çok bağımsız MCP istemci oturumu çalıştırıyorsanız ve her oturumun kendi geçici Chrome profilini başlatmasını istiyorsanız, ayrıca --isolated iletin. Bu, varsayılan Chrome DevTools MCP kullanıcı veri dizininin bu sunucu örnekleri arasında paylaşılmasını önler.

Kullanıcı veri dizini

chrome-devtools-mcp aşağıdaki kullanıcı veri dizinini kullanarak bir Chrome kararlı kanal örneği başlatır:

• Linux / macOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

Kullanıcı veri dizini çalıştırmalar arasında temizlenmez ve chrome-devtools-mcp öğesinin tüm örnekleri arasında paylaşılır. Tarayıcı kapatıldıktan sonra otomatik olarak temizlenecek geçici bir kullanıcı veri dizini kullanmak için isolated seçeneğini true olarak ayarlayın.

Çalışan bir Chrome örneğine bağlanma

Varsayılan olarak, Chrome DevTools MCP sunucusu özel bir profille yeni bir Chrome örneği başlatır. Bu, her durumda ideal olmayabilir:

• Manuel site testi ile aracı güdümlü test arasında geçiş yaparken aynı uygulama durumunu korumak istiyorsanız.
• MCP'nin bir web sitesinde oturum açması gerektiğinde. Bazı hesaplar, tarayıcı WebDriver (Chrome DevTools MCP sunucusu için varsayılan başlatma mekanizması) aracılığıyla kontrol edildiğinde oturum açmayı engelleyebilir.
• LLM'nizi korumalı alan ortamında çalıştırıyorsanız, ancak korumalı alan dışında çalışan bir Chrome örneğine bağlanmak istiyorsanız.

Bu durumlarda, önce Chrome'u başlatın ve Chrome DevTools MCP sunucusunun ona bağlanmasına izin verin. Bunu yapmanın iki yolu vardır:

• Otomatik bağlantı (Chrome 144'te mevcuttur): manuel ve aracı güdümlü test arasında durum paylaşımı için en iyisidir.
• Uzaktan hata ayıklama bağlantı noktası aracılığıyla manuel bağlantı: korumalı alan ortamında çalışırken en iyisidir.

Çalışan bir Chrome örneğine otomatik olarak bağlanma

Adım 1: Chrome'da uzaktan hata ayıklamayı ayarlayın

Chrome'da (>= M144), uzaktan hata ayıklamayı ayarlamak için aşağıdakileri yapın:

1. Uzaktan hata ayıklamayı etkinleştirmek için chrome://inspect/#remote-debugging adresine gidin.
2. Gelen hata ayıklama bağlantılarına izin vermek veya reddetmek için iletişim kutusu kullanıcı arayüzünü izleyin.

Adım 2: Chrome DevTools MCP sunucusunu çalışan bir Chrome Örneğine otomatik olarak bağlanacak şekilde yapılandırın

chrome-devtools-mcp sunucusunu çalışan Chrome örneğine bağlamak için, MCP sunucusu için --autoConnect komut satırı argümanını kullanın.

Aşağıdaki kod parçacığı, gemini-cli için örnek bir yapılandırmadır:

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

Adım 3: Kurulumunuzu test edin

Tarayıcınızın çalıştığından emin olun. gemini-cli'ı açın ve aşağıdaki istemi çalıştırın:

Check the performance of https://developers.chrome.com

[!NOTE] autoConnect seçeneği, kullanıcının Chrome'u başlatmasını gerektirir. Kullanıcının birden çok etkin profili varsa, MCP sunucusu varsayılan profile (Chrome tarafından belirlendiği şekilde) bağlanır. MCP sunucusu, seçilen profil için tüm açık pencerelere erişebilir.

Chrome DevTools MCP sunucusu, çalışan Chrome örneğinize bağlanmaya çalışacaktır. Kullanıcıdan izin isteyen bir iletişim kutusu gösterir.

İzin Ver düğmesine tıklamak, Chrome DevTools MCP sunucusunun developers.chrome.com adresini açmasına ve bir performans izi almasına neden olur.

Bağlantı noktası yönlendirme kullanarak manuel bağlantı

--browser-url seçeneğini kullanarak çalışan bir Chrome örneğine bağlanabilirsiniz. Bu, yeni bir Chrome örneği başlatmaya izin vermeyen korumalı alan ortamında MCP sunucusunu çalıştırıyorsanız kullanışlıdır.

Çalışan bir Chrome örneğine nasıl bağlanılacağına dair adım adım bir kılavuz:

Adım 1: MCP istemcisini yapılandırın

MCP istemci yapılandırmanıza --browser-url seçeneğini ekleyin. Bu seçeneğin değeri, çalışan Chrome örneğinin URL'si olmalıdır. http://127.0.0.1:9222 yaygın bir varsayılandır.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

Adım 2: Chrome tarayıcısını başlatın

[!WARNING] Uzaktan hata ayıklama bağlantı noktasını etkinleştirmek, çalışan tarayıcı örneğinde bir hata ayıklama bağlantı noktası açar. Makinenizdeki herhangi bir uygulama bu bağlantı noktasına bağlanabilir ve tarayıcıyı kontrol edebilir. Hata ayıklama bağlantı noktası açıkken hassas web sitelerinde gezinmediğinizden emin olun.

Chrome tarayıcısını uzaktan hata ayıklama bağlantı noktası etkinken başlatın. Hata ayıklama bağlantı noktası etkinken yeni bir tane başlatmadan önce çalışan tüm Chrome örneklerini kapattığınızdan emin olun. Seçtiğiniz bağlantı noktası numarası, MCP istemci yapılandırmanızdaki --browser-url seçeneğinde belirttiğiniz numarayla aynı olmalıdır.

Güvenlik nedeniyle, Chrome, uzaktan hata ayıklama bağlantı noktasını etkinleştirirken varsayılan olmayan bir kullanıcı veri dizini kullanmanızı gerektirir. --user-data-dir bayrağını kullanarak özel bir dizin belirtebilirsiniz. Bu, normal tarama profilinizin ve verilerinizin hata ayıklama oturumuna maruz kalmamasını sağlar.

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

Adım 3: Kurulumunuzu test edin

MCP istemcisini yapılandırdıktan ve Chrome tarayıcısını başlattıktan sonra, MCP istemcinizde basit bir istem çalıştırarak kurulumunuzu test edebilirsiniz:

Check the performance of https://developers.chrome.com

MCP istemciniz çalışan Chrome örneğine bağlanmalı ve bir performans raporu almalıdır.

VM'den ana makineye bağlantı noktası yönlendirme sorunlarıyla karşılaşırsanız, docs/troubleshooting.md belgesindeki "Sanal makine (VM) ile ana makine arasında uzaktan hata ayıklama başarısız oluyor" bölümüne bakın.

Uzaktan hata ayıklama hakkında daha fazla ayrıntı için Chrome DevTools belgelerine bakın.

Android'de Chrome'da Hata Ayıklama

Lütfen bu talimatlara bakın.

Bilinen sınırlamalar

Bkz. Sorun Giderme.

Tarayıcı alt aracısı olarak entegre etme

Aracı araçları geliştiriyorsanız ve ürününüzün bir parçası olarak entegre bir tarayıcı alt aracısı sağlamak istiyorsanız, aracılar için Chrome DevTools üzerine inşa etmenizi öneririz.

Referans bir uygulama için Gemini CLI tarayıcı aracı belgelerine bakın.