Chrome DevTools MCP

Chrome DevTools untuk agen

Chrome DevTools untuk agen (chrome-devtools-mcp) memungkinkan agen pengkodean Anda (seperti Antigravity, Claude, Cursor, atau Copilot) mengontrol dan memeriksa browser Chrome yang sedang berjalan. Ini bertindak sebagai server Model-Context-Protocol (MCP), memberikan asisten pengkodean AI Anda akses ke kekuatan penuh Chrome DevTools untuk otomatisasi yang andal, debugging mendalam, dan analisis performa. Sebuah CLI juga disediakan untuk penggunaan tanpa MCP.

Referensi alat | Changelog | Berkontribusi | Pemecahan Masalah | Prinsip Desain

Fitur utama

• Dapatkan wawasan performa: Menggunakan Chrome DevTools untuk merekam trace dan mengekstrak wawasan performa yang dapat ditindaklanjuti.
• Debugging browser tingkat lanjut: Menganalisis permintaan jaringan, mengambil tangkapan layar, dan memeriksa pesan konsol browser (dengan stack trace yang telah dipetakan sumbernya).
• Otomatisasi yang andal. Menggunakan puppeteer untuk mengotomatiskan tindakan di Chrome dan secara otomatis menunggu hasil tindakan.

Penyangkalan

chrome-devtools-mcp mengekspos konten instance browser ke klien MCP yang memungkinkan mereka untuk memeriksa, men-debug, dan memodifikasi data apa pun di browser atau DevTools. Hindari membagikan informasi sensitif atau pribadi yang tidak ingin Anda bagikan dengan klien MCP.

chrome-devtools-mcp secara resmi hanya mendukung Google Chrome dan Chrome for Testing. Browser berbasis Chromium lainnya mungkin berfungsi, tetapi ini tidak dijamin, dan Anda mungkin mengalami perilaku yang tidak terduga. Gunakan dengan kebijaksanaan Anda sendiri. Kami berkomitmen untuk menyediakan perbaikan dan dukungan untuk versi terbaru Extended Stable Chrome.

Alat performa dapat mengirim URL trace ke Google CrUX API untuk mengambil data pengalaman pengguna nyata. Ini membantu memberikan gambaran performa holistik dengan menyajikan data lapangan bersama data lab. Data ini dikumpulkan oleh Chrome User Experience Report (CrUX). Untuk menonaktifkan ini, jalankan dengan flag --no-performance-crux.

Statistik penggunaan

Google mengumpulkan statistik penggunaan (seperti tingkat keberhasilan pemanggilan alat, latensi, dan informasi lingkungan) untuk meningkatkan keandalan dan performa Chrome DevTools MCP.

Pengumpulan data diaktifkan secara default. Anda dapat memilih keluar dengan memberikan flag --no-usage-statistics saat memulai server:

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

Google menangani data ini sesuai dengan Kebijakan Privasi Google.

Pengumpulan statistik penggunaan Google untuk Chrome DevTools MCP tidak bergantung pada statistik penggunaan browser Chrome. Memilih keluar dari metrik Chrome tidak secara otomatis membuat Anda keluar dari alat ini, dan sebaliknya.

Pengumpulan dinonaktifkan jika variabel env CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS atau CI disetel.

Pemeriksaan pembaruan

Secara default, server secara berkala memeriksa registri npm untuk pembaruan dan mencatat pemberitahuan ketika versi yang lebih baru tersedia. Anda dapat menonaktifkan pemeriksaan pembaruan ini dengan menyetel variabel lingkungan CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS.

Persyaratan

• Node.js versi LTS.
• Chrome versi stabil saat ini atau lebih baru.
• npm

Memulai

Tambahkan konfigurasi berikut ke klien MCP Anda:

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

[!CATATAN] Menggunakan chrome-devtools-mcp@latest memastikan bahwa klien MCP Anda akan selalu menggunakan versi terbaru dari server Chrome DevTools MCP.

Jika Anda hanya tertarik untuk melakukan tugas browser dasar, gunakan mode --slim:

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

Lihat Referensi alat ringkas.

Konfigurasi Klien MCP

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

Masukkan prompt berikut di Klien MCP Anda untuk memeriksa apakah semuanya berfungsi:

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

Klien MCP Anda seharusnya membuka browser dan merekam rekam jejak performa.

[!NOTE] Server MCP akan memulai browser secara otomatis setelah klien MCP menggunakan alat yang memerlukan instans browser yang berjalan. Menghubungkan ke server Chrome DevTools MCP saja tidak akan memulai browser secara otomatis.

Alat

Jika Anda mengalami masalah, lihat panduan pemecahan masalah kami.

• Otomatisasi input (10 alat)
  • click
  • drag
  • fill
  • fill_form
  • handle_dialog
  • hover
  • press_key
  • type_text
  • upload_file
  • click_at
• Otomatisasi navigasi (6 alat)
  • close_page
  • list_pages
  • navigate_page
  • new_page
  • select_page
  • wait_for
• Emulasi (2 alat)
  • emulate
  • resize_page
• Performa (3 alat)
  • performance_analyze_insight
  • performance_start_trace
  • performance_stop_trace
• Jaringan (2 alat)
  • get_network_request
  • list_network_requests
• Debugging (8 alat)
  • evaluate_script
  • get_console_message
  • lighthouse_audit
  • list_console_messages
  • take_screenshot
  • take_snapshot
  • screencast_start
  • screencast_stop
• Memori (12 alat)
  • 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_object_details
  • get_heapsnapshot_retainers
  • get_heapsnapshot_retaining_paths
  • get_heapsnapshot_summary
• Ekstensi (5 alat)
  • install_extension
  • list_extensions
  • reload_extension
  • trigger_extension_action
  • uninstall_extension
• Pihak ketiga (2 alat)
  • execute_3p_developer_tool
  • list_3p_developer_tools
• WebMCP (2 alat)
  • execute_webmcp_tool
  • list_webmcp_tools

Konfigurasi

Server Chrome DevTools MCP mendukung opsi konfigurasi berikut:

• --autoConnect/ --auto-connect Jika ditentukan, secara otomatis terhubung ke browser (Chrome 144+) yang berjalan secara lokal dari direktori data pengguna yang diidentifikasi oleh parameter channel (channel default adalah stable). Memerlukan server remote debugging untuk dimulai di instans Chrome melalui chrome://inspect/#remote-debugging.

  • Tipe: boolean
  • Default: false

• --browserUrl/ --browser-url, -u Terhubung ke instans Chrome yang sedang berjalan dan dapat di-debug (mis. http://127.0.0.1:9222). Untuk detail lebih lanjut lihat: https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.

  • Tipe: string
  • Default: false

• --wsEndpoint/ --ws-endpoint, -w Endpoint WebSocket untuk terhubung ke instans Chrome yang sedang berjalan (mis., ws://127.0.0.1:9222/devtools/browser/). Alternatif untuk --browserUrl.

  • Tipe: string
  • Default: false

• --wsHeaders/ --ws-headers Header khusus untuk koneksi WebSocket dalam format JSON (mis., '{"Authorization":"Bearer token"}'). Hanya berfungsi dengan --wsEndpoint.

  • Tipe: string
  • Default: false

• --headless Apakah akan dijalankan dalam mode headless (tanpa UI).

  • Tipe: boolean
  • Default: false

• --executablePath/ --executable-path, -e Jalur ke file Chrome yang dapat dieksekusi kustom.

  • Tipe: string
  • Default: false

• --isolated Jika ditentukan, membuat direktori data pengguna sementara yang secara otomatis dibersihkan setelah browser ditutup. Default ke false.

  • Tipe: boolean
  • Default: false

• --userDataDir/ --user-data-dir Jalur ke direktori data pengguna untuk Chrome. Default adalah $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE

  • Tipe: string
  • Default: false

• --channel Tentukan channel Chrome berbeda yang harus digunakan. Default adalah versi channel stable.

  • Tipe: string
  • Pilihan: canary, dev, beta, stable
  • Default: false

• --logFile/ --log-file Jalur ke file untuk menulis log debug. Atur variabel env DEBUG ke * untuk mengaktifkan log verbose. Berguna untuk mengirimkan laporan bug.

  • Tipe: string
  • Default: false

• --viewport Ukuran viewport awal untuk instans Chrome yang dimulai oleh server. Misalnya, 1280x720. Dalam mode headless, ukuran maks adalah 3840x2160px.

  • Tipe: string
  • Default: false

• --proxyServer/ --proxy-server Konfigurasi server proxy untuk Chrome yang diteruskan sebagai --proxy-server saat meluncurkan browser. Lihat https://www.chromium.org/developers/design-documents/network-settings/ untuk detailnya.

  • Tipe: string
  • Default: false

• --acceptInsecureCerts/ --accept-insecure-certs Jika diaktifkan, mengabaikan kesalahan terkait sertifikat self-signed dan kedaluwarsa. Gunakan dengan hati-hati.

  • Tipe: boolean
  • Default: false

• --experimentalPageIdRouting/ --experimental-page-id-routing Apakah akan mengekspos pageId pada alat dengan cakupan halaman dan merutekan permintaan berdasarkan ID halaman (berguna untuk sesi agen bersamaan).

  • Tipe: boolean
  • Default: false

• --experimentalDevtools/ --experimental-devtools Apakah akan mengaktifkan otomatisasi melalui target DevTools

  • Tipe: boolean
  • Default: false

• --experimentalVision/ --experimental-vision Apakah akan mengaktifkan alat berbasis koordinat seperti click_at(x,y). Biasanya memerlukan model computer-use yang mampu menghasilkan koordinat akurat dengan melihat tangkapan layar.

  • Tipe: boolean
  • Default: false

• --memoryDebugging/ --memory-debugging, -experimentalMemory Apakah akan mengaktifkan alat debugging memori.

  • Tipe: boolean
  • Default: false

• --experimentalStructuredContent/ --experimental-structured-content Apakah akan menghasilkan konten terformat terstruktur.

  • Tipe: boolean
  • Default: false

• --experimentalIncludeAllPages/ --experimental-include-all-pages Apakah akan menyertakan semua jenis halaman seperti webview atau halaman latar belakang sebagai halaman.

  • Tipe: boolean
  • Default: false

• --experimentalScreencast/ --experimental-screencast Mengekspos alat screencast eksperimental (memerlukan ffmpeg). Instal ffmpeg https://www.ffmpeg.org/download.html dan pastikan tersedia di PATH server MCP.

  • Tipe: boolean
  • Default: false

• --experimentalFfmpegPath/ --experimental-ffmpeg-path Jalur ke file ffmpeg yang dapat dieksekusi untuk perekaman screencast.

  • Tipe: string
  • Default: false

• --categoryExperimentalWebmcp/ --category-experimental-webmcp Atur ke true untuk mengaktifkan debugging alat WebMCP. Memerlukan Chrome 149+ dengan flag berikut: --enable-features=WebMCP,DevToolsWebMCPSupport

  • Tipe: boolean
  • Default: false

• --chromeArg/ --chrome-arg Argumen tambahan untuk Chrome. Hanya berlaku saat Chrome diluncurkan oleh chrome-devtools-mcp.

  • Tipe: array
  • Default: false

• --blockedUrlPattern/ --blocked-url-pattern Membatasi akses jaringan browser dengan memblokir pola URL yang ditentukan (menggunakan https://urlpattern.spec.whatwg.org/). Secara diam-diam melepaskan dari target dengan URL yang diblokir saat koneksi, dan memblokir permintaan runtime (termasuk navigasi dan sub-sumber daya). Menerima array pola.

  • Tipe: array
  • Default: false

• --allowedUrlPattern/ --allowed-url-pattern Membatasi akses jaringan browser dengan hanya mengizinkan pola URL yang ditentukan (menggunakan https://urlpattern.spec.whatwg.org/). Memerlukan Chrome 149+. Secara diam-diam melepaskan dari target dengan URL yang tidak diizinkan saat koneksi, dan memblokir permintaan runtime (termasuk navigasi dan sub-sumber daya). Menerima array pola.

  • Tipe: array
  • Default: false

• --ignoreDefaultChromeArg/ --ignore-default-chrome-arg Secara eksplisit menonaktifkan argumen default untuk Chrome. Hanya berlaku saat Chrome diluncurkan oleh chrome-devtools-mcp.

  • Tipe: array
  • Default: false

• --categoryEmulation/ --category-emulation Atur ke false untuk mengecualikan alat yang terkait dengan emulasi.

  • Tipe: boolean
  • Default: true

• --categoryPerformance/ --category-performance Atur ke false untuk mengecualikan alat yang terkait dengan performa.

  • Tipe: boolean
  • Default: true

• --categoryNetwork/ --category-network Atur ke false untuk mengecualikan alat yang terkait dengan jaringan.

  • Tipe: boolean
  • Default: true

• --categoryExtensions/ --category-extensions Atur ke true untuk menyertakan alat yang terkait dengan ekstensi. Catatan: Fitur ini saat ini hanya didukung dengan koneksi pipe. autoConnect, browserUrl, dan wsEndpoint tidak didukung dengan fitur ini hingga 149 dirilis.

  • Tipe: boolean
  • Default: false

• --categoryExperimentalThirdParty/ --category-experimental-third-party Atur ke true untuk mengaktifkan alat pengembang pihak ketiga yang diekspos oleh halaman yang diinspeksi itu sendiri

  • Tipe: boolean
  • Default: false

• --performanceCrux/ --performance-crux Atur ke false untuk menonaktifkan pengiriman URL dari rekam jejak performa ke CrUX API untuk mendapatkan data performa lapangan.

  • Tipe: boolean
  • Default: true

• --usageStatistics/ --usage-statistics Atur ke false untuk tidak ikut serta dalam pengumpulan statistik penggunaan. Google mengumpulkan data penggunaan untuk meningkatkan alat, ditangani berdasarkan Kebijakan Privasi Google (https://policies.google.com/privacy). Ini independen dari metrik browser Chrome. Dinonaktifkan jika variabel env CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS atau CI diatur.

  • Tipe: boolean
  • Default: true

• --screenshotFormat/ --screenshot-format Timpa format output default yang digunakan oleh take_screenshot saat pemanggil tidak menentukannya. JPEG dan WebP ~3-5x lebih kecil dari PNG, yang membantu mengurangi ukuran konteks dalam percakapan AI. Tidak diatur mempertahankan default yang ada ("png").

  • Tipe: string
  • Pilihan: jpeg, png, webp
  • Default: false

• --screenshotQuality/ --screenshot-quality Timpa kualitas kompresi default (0-100) yang digunakan oleh take_screenshot untuk JPEG dan WebP saat pemanggil tidak menentukannya. Nilai lebih rendah berarti file lebih kecil. Diabaikan untuk PNG. Tidak diatur mempertahankan default Puppeteer.

  • Tipe: number
  • Default: false

• --screenshotMaxWidth/ --screenshot-max-width Lebar maksimum dalam piksel untuk tangkapan layar. Jika gambar yang ditangkap lebih lebar, gambar tersebut diperkecil (mempertahankan rasio aspek) sebelum dikembalikan. Mengurangi ukuran konteks dalam percakapan AI. Tidak diatur berarti tidak ada pengubahan ukuran.

  • Tipe: number
  • Default: false

• --screenshotMaxHeight/ --screenshot-max-height Tinggi maksimum dalam piksel untuk tangkapan layar. Jika gambar yang ditangkap lebih tinggi, gambar akan diperkecil (mempertahankan rasio aspek) sebelum dikembalikan. Dapat digabungkan dengan --screenshot-max-width; faktor skala yang lebih kecil yang menang. Tidak disetel berarti tidak ada pengubahan ukuran.

  • Tipe: number
  • Default: false

• --slim Mengekspos set alat "ramping" yang terdiri dari 3 alat yang hanya mencakup navigasi, eksekusi skrip, dan tangkapan layar. Berguna untuk tugas-tugas peramban dasar.

  • Tipe: boolean
  • Default: false

• --redactNetworkHeaders/ --redact-network-headers Jika true, menyunting beberapa header jaringan yang dianggap sensitif sebelum dikembalikan ke klien.

  • Tipe: boolean
  • Default: false

• --allowUnrestrictedPaths/ --allow-unrestricted-paths Jika disetel, menonaktifkan pembatasan jalur default yang berlaku ketika klien MCP tidak menegosiasikan kemampuan roots. Secara default, alat penulisan file dibatasi ke direktori temp OS ketika tidak ada roots yang dikonfigurasi. Gunakan ini hanya saat menghubungkan klien lokal tepercaya yang tidak mengimplementasikan roots MCP dan memerlukan akses ke jalur di luar direktori temp.

  • Tipe: boolean
  • Default: false

Berikan melalui properti args dalam konfigurasi JSON. Contohnya:

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

Menghubungkan melalui WebSocket dengan header kustom

Anda dapat terhubung langsung ke endpoint WebSocket Chrome dan menyertakan header kustom (misalnya, untuk autentikasi):

{
  "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\"}"
      ]
    }
  }
}

Untuk mendapatkan endpoint WebSocket dari instance Chrome yang sedang berjalan, kunjungi http://127.0.0.1:9222/json/version dan cari field webSocketDebuggerUrl.

Anda juga dapat menjalankan npx chrome-devtools-mcp@latest --help untuk melihat semua opsi konfigurasi yang tersedia.

Konsep

Sesi konkuren

Sebagian besar klien MCP memulai satu server Chrome DevTools MCP per percakapan. Jika klien Anda membagikan satu instance server di antara agen atau subagen konkuren, mulai server dengan --experimentalPageIdRouting. Ini mengekspos pageId pada alat dengan cakupan halaman sehingga setiap agen dapat mengarahkan panggilan alat ke tab yang sedang dikerjakannya.

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

Jika Anda menjalankan beberapa sesi klien MCP independen dan ingin setiap sesi meluncurkan profil Chrome sementaranya sendiri, berikan juga --isolated. Ini menghindari berbagi direktori data pengguna default Chrome DevTools MCP di antara instance server tersebut.

Direktori data pengguna

chrome-devtools-mcp memulai instance saluran stabil Chrome menggunakan direktori data pengguna berikut:

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

Direktori data pengguna tidak dibersihkan di antara proses dan dibagikan di semua instance chrome-devtools-mcp. Setel opsi isolated ke true untuk menggunakan direktori data pengguna sementara yang akan dibersihkan secara otomatis setelah peramban ditutup.

Menghubungkan ke instance Chrome yang sedang berjalan

Secara default, server Chrome DevTools MCP akan memulai instance Chrome baru dengan profil khusus. Ini mungkin tidak ideal dalam semua situasi:

• Jika Anda ingin mempertahankan status aplikasi yang sama saat bergantian antara pengujian situs manual dan pengujian yang digerakkan oleh agen.
• Ketika MCP perlu masuk ke situs web. Beberapa akun mungkin mencegah masuk saat peramban dikendalikan melalui WebDriver (mekanisme peluncuran default untuk server Chrome DevTools MCP).
• Jika Anda menjalankan LLM di dalam lingkungan sandbox, tetapi Anda ingin terhubung ke instance Chrome yang berjalan di luar sandbox.

Dalam kasus ini, mulai Chrome terlebih dahulu dan biarkan server Chrome DevTools MCP terhubung ke sana. Ada dua cara untuk melakukannya:

• Koneksi otomatis (tersedia di Chrome 144): terbaik untuk berbagi status antara pengujian manual dan yang digerakkan oleh agen.
• Koneksi manual melalui port remote debugging: terbaik saat berjalan di dalam lingkungan sandbox.

Menghubungkan secara otomatis ke instance Chrome yang sedang berjalan

Langkah 1: Siapkan remote debugging di Chrome

Di Chrome (>= M144), lakukan hal berikut untuk menyiapkan remote debugging:

1. Navigasikan ke chrome://inspect/#remote-debugging untuk mengaktifkan remote debugging.
2. Ikuti UI dialog untuk mengizinkan atau menolak koneksi debugging masuk.

Langkah 2: Konfigurasikan server Chrome DevTools MCP untuk terhubung secara otomatis ke instance Chrome yang sedang berjalan

Untuk menghubungkan server chrome-devtools-mcp ke instance Chrome yang sedang berjalan, gunakan argumen baris perintah --autoConnect untuk server MCP.

Cuplikan kode berikut adalah contoh konfigurasi untuk gemini-cli:

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

Langkah 3: Uji pengaturan Anda

Pastikan peramban Anda sedang berjalan. Buka gemini-cli dan jalankan prompt berikut:

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

[!NOTE] Opsi autoConnect mengharuskan pengguna untuk memulai Chrome. Jika pengguna memiliki beberapa profil aktif, server MCP akan terhubung ke profil default (seperti yang ditentukan oleh Chrome). Server MCP memiliki akses ke semua jendela yang terbuka untuk profil yang dipilih.

Server Chrome DevTools MCP akan mencoba terhubung ke instance Chrome Anda yang sedang berjalan. Ini menampilkan dialog yang meminta izin pengguna.

Mengklik Izinkan mengakibatkan server Chrome DevTools MCP membuka developers.chrome.com dan mengambil rekaman performa.

Koneksi manual menggunakan penerusan porta

Anda dapat terhubung ke instance Chrome yang sedang berjalan dengan menggunakan opsi --browser-url. Ini berguna jika Anda menjalankan server MCP di lingkungan sandbox yang tidak mengizinkan memulai instance Chrome baru.

Berikut adalah panduan langkah demi langkah tentang cara terhubung ke instance Chrome yang sedang berjalan:

Langkah 1: Konfigurasikan klien MCP

Tambahkan opsi --browser-url ke konfigurasi klien MCP Anda. Nilai opsi ini harus berupa URL dari instance Chrome yang sedang berjalan. http://127.0.0.1:9222 adalah default yang umum.

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

Langkah 2: Mulai peramban Chrome

[!WARNING] Mengaktifkan porta remote debugging membuka porta debugging pada instance peramban yang sedang berjalan. Aplikasi apa pun di mesin Anda dapat terhubung ke porta ini dan mengendalikan peramban. Pastikan Anda tidak menjelajahi situs web sensitif apa pun saat porta debugging terbuka.

Mulai peramban Chrome dengan porta remote debugging diaktifkan. Pastikan untuk menutup semua instance Chrome yang sedang berjalan sebelum memulai yang baru dengan porta debugging diaktifkan. Nomor porta yang Anda pilih harus sama dengan yang Anda tentukan di opsi --browser-url dalam konfigurasi klien MCP Anda.

Untuk alasan keamanan, Chrome mengharuskan Anda menggunakan direktori data pengguna non-default saat mengaktifkan porta remote debugging. Anda dapat menentukan direktori kustom menggunakan flag --user-data-dir. Ini memastikan bahwa profil dan data penjelajahan reguler Anda tidak terpapar ke sesi debugging.

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"

Langkah 3: Uji pengaturan Anda

Setelah mengonfigurasi klien MCP dan memulai peramban Chrome, Anda dapat menguji pengaturan Anda dengan menjalankan prompt sederhana di klien MCP Anda:

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

Klien MCP Anda harus terhubung ke instance Chrome yang sedang berjalan dan menerima laporan performa.

Jika Anda mengalami masalah penerusan porta VM-ke-host, lihat bagian “Remote debugging antara mesin virtual (VM) dan host gagal” di docs/troubleshooting.md.

Untuk detail lebih lanjut tentang remote debugging, lihat dokumentasi Chrome DevTools.

Men-debug Chrome di Android

Silakan lihat instruksi ini.

Batasan yang diketahui

Lihat Pemecahan Masalah.

Mengintegrasikan sebagai subagen peramban

Jika Anda mengembangkan peralatan agentik dan ingin menyediakan subagen peramban terintegrasi sebagai bagian dari produk Anda, kami sarankan untuk membangun di atas Chrome DevTools untuk agen.

Untuk implementasi referensi, lihat dokumentasi agen peramban Gemini CLI.