Chrome DevTools untuk agen adalah serangkaian alat yang menghadirkan kecanggihan Chrome DevTools ke alur kerja coding AI Anda. Dengan menginstal Chrome DevTools untuk agen, Anda mendapatkan akses ke:
- Server MCP: Menghubungkan agen AI Anda ke instance browser aktif menggunakan Model Context Protocol open source.
- CLI Chrome DevTools: Antarmuka untuk berinteraksi langsung dengan browser dari terminal Anda.
- Keterampilan Agentic: Petunjuk ahli yang mengajarkan cara mengoordinasikan beberapa alat untuk tugas kompleks seperti aksesibilitas atau penelusuran bug performa.
Dalam konteks pengembangan web, Chrome DevTools untuk agen mengintegrasikan kemampuan penelusuran bug ke dalam agen AI Anda.
Misalnya, agen dapat menggunakan alat untuk merekam dan mengevaluasi rekaman aktivitas performa guna menganalisis performa situs dan mengidentifikasi potensi peningkatan. Selain pengembangan web, DevTools untuk agen juga memungkinkan agen Anda menjelajahi web aktif, bukan hanya mengambil HTML statis.
Penyiapan
Panduan ini menunjukkan cara menyiapkan Chrome DevTools bagi agen untuk membantu agen pengodean Anda mengontrol dan memeriksa browser Chrome aktif.
Gunakan paket chrome-devtools-mcp untuk mengontrol dan memeriksa browser Chrome aktif dari agen coding Anda (seperti Gemini, Claude, Cursor, atau Copilot). Perhatikan bahwa meskipun Chrome DevTools untuk agen menyediakan rangkaian lengkap alat, CLI hanya mendukung subset yang ditargetkan untuk otomatisasi berbasis shell.
IDE dan model yang didukung
Chrome DevTools untuk agen mendukung alat atau IDE apa pun yang mendukung protokol MCP. Hal ini mencakup Antigravity, Gemini CLI, Claude Code, Cursor, Copilot, dan banyak lagi.
Pertimbangan keamanan
Karena agen Anda akan dapat melihat dan berinteraksi dengan halaman yang diaksesnya, agen tersebut dapat bertindak secara efektif atas nama Anda jika Anda menghubungkannya ke browser dengan sesi yang aktif dan diautentikasi. Hindari berbagi informasi sensitif atau pribadi yang tidak ingin Anda bagikan kepada agen.
Prasyarat
Sebelum menginstal Chrome DevTools untuk agen, pastikan lingkungan Anda memenuhi persyaratan berikut:
Untuk menyiapkan Chrome DevTools bagi agen, pilih metode yang sesuai dengan lingkungan coding pilihan Anda. Meskipun beberapa agen memerlukan penginstalan manual, agen lainnya sudah terintegrasi dengan alat.
Antigravity
Chrome DevTools untuk agen sudah di-bundle dengan Antigravity 2.0. Anda dapat langsung menggunakannya dengan sub-agen browser. Coba gunakan perintah garis miring seperti:
/browser Navigate to the Google homepage
Untuk mengakses keterampilan agen khusus, sebaiknya instal plugin DevTools selama langkah Bangun dengan Google pada penyiapan awal atau dalam setelan aplikasi. Untuk mengetahui informasi selengkapnya, lihat dokumentasi Subagen Antigravity Browser.
Menginstal menggunakan CLI
Untuk menyiapkan Chrome DevTools untuk agen, Anda dapat menggunakan file konfigurasi JSON atau perintah CLI untuk menginstal server secara langsung jika agen Anda mendukungnya. Beberapa agen juga menawarkan ekstensi atau plugin resmi yang mencakup keterampilan agen, petunjuk pakar yang membantu agen Anda menggunakan fitur DevTools.
Jika agen Anda tidak tercantum di sini, Anda dapat menemukan cara menginstalnya di repositori Chrome DevTools for Agents GitHub.
Untuk menambahkan Chrome DevTools bagi agen ke agen command line, gunakan perintah CLI bawaan untuk agen tertentu:
Gemini CLI
Instal ekstensi Gemini CLI yang mencakup paket MCP dan skill terkait menggunakan perintah berikut:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Instal hanya paket MCP dengan perintah berikut:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
Untuk menginstal Chrome DevTools untuk agen sebagai Plugin Claude Code, gunakan perintah garis miring berikut di Claude Code. Tambahkan registry marketplace:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Lalu, instal plugin dari registry marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Lihat halaman resmi Plugin Claude Chrome DevTools untuk mengetahui informasi selengkapnya.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Menginstal menggunakan konfigurasi JSON
Untuk agen lain yang mendukung kunci konfigurasi mcpServers, tambahkan entri ini secara manual dan pastikan untuk menginstal DevTools untuk agen melalui npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Menginstal di agen lain
Untuk mengonfigurasi agen yang tidak tercantum, lihat repositori GitHub MCP Chrome DevTools.
Menguji penyiapan Anda
Masukkan perintah berikut di agen Anda untuk memeriksa apakah semuanya berfungsi:
Check the performance of https://developers.chrome.com
Agen Anda harus membuka jendela browser dan merekam rekaman aktivitas performa.
Memecahkan masalah penyiapan Anda
Jika agen Anda gagal menjalankan alat dan memiliki akses ke keterampilan Chrome DevTools, agen tersebut mungkin mencoba memperbaiki masalah secara otomatis. Jika tidak, Anda dapat memberikan perintah eksplisit kepada agen:
Use the Chrome DevTools troubleshooting skill to fix my setup.
Atau, Anda bisa lebih spesifik:
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.
Konfigurasi lanjutan
Berikut beberapa cara lain agar agen Anda dapat mengakses browser.
Mengonfigurasi mode headless
Jika ingin menjalankan tugas latar belakang tanpa jendela browser yang terlihat, Anda
dapat menjalankan Chrome dalam mode headless (tanpa UI). Tambahkan tanda --headless ke argumen server Anda:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Menghubungkan ke sesi browser yang ada
Secara default, DevTools untuk agen memulai instance Chrome baru. Namun, Anda dapat
menghubungkan agen ke sesi browser yang ada menggunakan flag --autoConnect. Hal ini sangat berguna jika agen Anda perlu menyelidiki masalah yang dibatasi di balik proses login atau sesi yang telah Anda mulai.
Ada dua cara untuk terhubung ke sesi yang ada:
Menggunakan koneksi otomatis (Chrome 144+)
Jika server MCP Chrome DevTools dikonfigurasi dengan opsi --autoConnect
option, server MCP akan terhubung ke instance Chrome yang aktif dan meminta sesi
pen-debug-an jarak jauh.
- Di browser Chrome yang sedang berjalan, buka
chrome://inspect/#remote-debugginguntuk mengaktifkan proses debug jarak jauh. Perbarui konfigurasi MCP Anda untuk menyertakan tanda
--autoConnect:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Berikan perintah kepada agen Anda. Chrome akan menampilkan dialog yang meminta izin pengguna untuk mengizinkan sesi pen-debug-an jarak jauh. Klik Izinkan.
Menghubungkan secara manual menggunakan port proses debug jarak jauh
Jika Anda tidak dapat menggunakan --autoConnect (misalnya, jika Anda menjalankan agen di dalam lingkungan sandbox), Anda dapat memulai Chrome secara manual dengan port pen-debug.
Berikut contohnya (di macOS):
Mulai browser Chrome dengan mengaktifkan port pen-debugan jarak jauh. Untuk alasan keamanan, Anda juga harus menentukan direktori data pengguna kustom.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableKonfigurasi agen Anda agar terhubung menggunakan parameter
--browser-url:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }