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.
- Chrome DevTools CLI: Antarmuka untuk berinteraksi dengan browser secara langsung dari terminal Anda.
- Keahlian Agentic: Petunjuk pakar 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 agar agen dapat 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 tersedia dalam paket 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 keahlian 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 bagi 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 untuk 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 Plugin Claude Chrome DevTools resmi 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.
Langkah berikutnya
Untuk menyesuaikan penyiapan, lihat Konfigurasi.