Chrome DevTools MCP

Chrome DevTools untuk agen

Chrome DevTools untuk agen (chrome-devtools-mcp) memungkinkan agen pengkodean Anda (seperti Antigravity, Claude, Cursor, atau Copilot) untuk mengontrol dan memeriksa browser Chrome yang sedang berjalan. Ini berfungsi 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 kinerja. CLI juga disediakan untuk penggunaan tanpa MCP.

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

Fitur utama

• Dapatkan wawasan kinerja: Menggunakan Chrome DevTools untuk merekam jejak dan mengekstrak wawasan kinerja yang dapat ditindaklanjuti.
• Debugging browser tingkat lanjut: Menganalisis permintaan jaringan, mengambil tangkapan layar, dan memeriksa pesan konsol browser (dengan jejak tumpukan yang dipetakan sumber).
• 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 berbagi informasi sensitif atau pribadi yang tidak ingin Anda bagikan dengan klien MCP.

chrome-devtools-mcp secara resmi mendukung Google Chrome dan Chrome for Testing saja. 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 dari Extended Stable Chrome.

Alat kinerja dapat mengirim URL jejak ke API Google CrUX untuk mengambil data pengalaman pengguna nyata. Ini membantu memberikan gambaran kinerja yang holistik dengan menyajikan data lapangan bersama dengan data laboratorium. 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 kinerja Chrome DevTools MCP.

Pengumpulan data diaktifkan secara default. Anda dapat memilih keluar dengan meneruskan 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 memilih keluar dari alat ini, dan sebaliknya.

Pengumpulan dinonaktifkan jika variabel lingkungan CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS atau CI diatur.

Pemeriksaan pembaruan

Secara default, server secara berkala memeriksa registry npm untuk pembaruan dan mencatat notifikasi ketika versi yang lebih baru tersedia. Anda dapat menonaktifkan pemeriksaan pembaruan ini dengan mengatur 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 tertarik untuk melakukan hanya tugas browser dasar, gunakan mode --slim:

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

Lihat Referensi alat ramping.

Konfigurasi klien MCP

Untuk petunjuk pengaturan khusus untuk editor atau agen Anda (misalnya Antigravity, Claude Code, Cursor, VS Code), silakan lihat Panduan Konfigurasi Klien.

Prompt pertama Anda

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

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

Klien MCP Anda harus membuka browser dan merekam jejak kinerja.

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

Alat

Jika Anda mengalami masalah, periksa panduan pemecahan masalah kami. Lihat Referensi Alat lengkap untuk daftar lengkap semua kemampuan MCP yang didukung.

Konfigurasi

Temukan daftar lengkap parameter server (misalnya, --headless, --isolated, --slim) dan cara mengonfigurasi koneksi WebSocket di Panduan Konfigurasi.

Penggunaan Lanjutan

Untuk fitur lanjutan seperti menangani sesi bersamaan, direktori data pengguna persisten, menghubungkan ke instance Chrome yang sedang berjalan alih-alih memulai yang baru, atau debugging di Android, lihat Panduan Penggunaan Lanjutan.

Integrasi sebagai subagen browser

Jika Anda mengembangkan alat agen dan ingin menyediakan subagen browser terintegrasi sebagai bagian dari produk Anda, kami merekomendasikan untuk membangun di atas Chrome DevTools untuk agen.

Untuk implementasi referensi, lihat dokumentasi agen browser Gemini CLI.