MCP server Chrome DevTools

Chrome DevTools MCP menempatkan panel DevTools yang sudah Anda kenal di depan AI agent. Jika sebagian besar browser server berfokus pada klik dan pengetikan, yang ini berfokus pada mencari tahu mengapa sebuah halaman lambat, apa yang dicatatnya, apa yang dimintanya, dan apa yang disimpannya di memori. Server ini diterbitkan oleh organisasi ChromeDevTools di GitHub, memiliki 55.670 bintang, dan berlisensi Apache-2.0.

Kami menginstal versi 1.13.0, yang dirilis pada 11 November 2026, dan melakukan dua hal pada 14 November 2026: mendaftar tool-nya dengan berbagai opsi melalui MCP Inspector, dan menjalankannya dengan MCP client kecil untuk merekam performance trace dan menjalankan Lighthouse di hostedmcp.org, situs kami sendiri. Angka-angka di bawah ini berasal dari proses tersebut.

Install

Anda perlu Node.js 20.19 atau lebih baru dan Chrome. Browser baru dijalankan pada tool call pertama yang membutuhkannya, bukan saat server start.

Claude Code:

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --isolated --no-usage-statistics

Cursor, Claude Desktop, Windsurf dan client lain yang dikonfigurasi lewat JSON:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--isolated", "--no-usage-statistics"]
    }
  }
}

Codex:

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --isolated --no-usage-statistics

Dua flag itu kami rekomendasikan, bukan default. --isolated memberi setiap sesi profil sementara; tanpa flag ini server menyimpan profil persisten di ~/.cache/chrome-devtools-mcp/chrome-profile yang tidak dibersihkan antar-run. --no-usage-statistics mematikan statistik penggunaan yang secara default dikirim server ke Google. Config builder kami menuliskan entri yang sama untuk beberapa client.

Prompt pertama yang disarankan di README cocok untuk uji coba: "Check the performance of https://developers.chrome.com".

Jumlah tool

tools/list pada 1.13.0 mengembalikan 33 tool tanpa opsi, dan definisi tool-nya mencapai 31.498 byte. Dengan --slim, hasilnya tiga tool: navigate, evaluate, dan screenshot, dalam 1.042 byte.

Setiap grup bisa dimatikan dengan flag seperti --categoryEmulation=false. Yang lain tetap mati sampai Anda menyalakannya: network mocking, extension, otomasi PWA, authenticator WebAuthn virtual, dan tool yang diekspos halaman itu sendiri lewat WebMCP. Nyalakan hanya yang dibutuhkan tugas Anda; 31 KB definisi memang kecil dibandingkan beberapa server lain, tapi tetap dikirim di setiap request.

Apa yang dikembalikan sebuah trace

Kami menjalankan server secara headless, membuka https://hostedmcp.org/ dengan new_page, lalu memanggil performance_start_trace dengan reload dan autoStop aktif, dan terakhir lighthouse_audit.

Panggilan trace memakan waktu sekitar 6 detik dan mengembalikan 9.436 byte teks. Hasilnya melaporkan:

Kemudian tool ini mencantumkan insight yang ditemukan, masing-masing dengan penjelasan dan, jika berlaku, estimasi penghematan: rincian LCP, render-blocking requests (25 ms untuk FCP dan LCP), network dependency tree, image delivery, third parties, cache lifetimes, dan legacy JavaScript. Agent bisa memanggil performance_analyze_insight pada salah satu insight tersebut untuk detailnya. Balasan diakhiri dengan deskripsi format call-tree miliknya sendiri, sehingga model bisa membaca data flame-chart yang menyusul.

lighthouse_audit memakan waktu sekitar 7 detik dan mengembalikan 6.687 byte: accessibility 94, best practices 100, SEO 100, dan kategori keempat, agentic browsing, di angka 67. Empat audit gagal. Yang pertama adalah color contrast: dua belas elemen, di antaranya label pencarian di header kami, dengan rasio 4,33 padahal yang disyaratkan 4,5. Jadi tool ini menjalankan tugasnya; ada satu perbaikan yang perlu kami lakukan.

Ada dua hal soal angka-angka ini. Time to first byte 0,8 ms berarti halaman diambil dari edge cache yang sudah hangat; request cold akan lebih lambat. Dan karena kami meneruskan --no-performance-crux, trace tidak melaporkan field data dari pengguna nyata; secara default server mencari URL halaman di dataset CrUX milik Google.

Jebakan pageId

Run pertama kami mengukur about:blank. Di 1.13.0, page tools menerima pageId, dan sesi baru dimulai dengan halaman kosong sebagai nomor 1. Panggilan new_page kami membuka situs sebagai halaman 2 dan menandainya sebagai terpilih, tapi kami meneruskan 1. Trace dengan patuh melaporkan CLS 0 untuk halaman kosong. Biasanya agent memanggil list_pages lebih dulu dan tidak salah soal ini; kalau sebuah trace melaporkan about:blank, inilah penyebabnya.

Pakai Chrome Anda sendiri

Secara default, server menjalankan Chrome-nya sendiri. Server juga bisa attach ke Chrome yang sudah berjalan:

• --autoConnect terhubung ke Chrome 144 atau lebih baru setelah Anda mengaktifkan remote debugging di chrome://inspect/#remote-debugging.
• --browserUrl http://127.0.0.1:9222 terhubung ke Chrome yang dijalankan dengan --remote-debugging-port=9222.

Attach ke browser harian Anda memberi agent akses ke login, cookie, dan tab yang terbuka. Itu memang tujuannya kalau Anda ingin agent men-debug halaman di balik sign-in, dan justru jadi risiko di waktu lain. Sebaiknya gunakan profil Chrome terpisah untuk ini.

Privasi dan keamanan

Server ini mencetak peringatan saat dijalankan: ia "exposes content of the browser instance to the MCP clients allowing them to inspect, debug, and modify any data in the browser or DevTools". Anggap saja itu harfiah. Ada tiga default yang sebaiknya diubah:

• Statistik penggunaan dikirim ke Google kecuali Anda menambahkan --no-usage-statistics. Statistik ini juga nonaktif saat environment variable CI di-set.
• Lookup CrUX: tool performa bisa mengirim URL yang Anda trace ke API CrUX milik Google. Pakai --no-performance-crux untuk URL internal atau staging.
• Profil: profil default akan tersimpan secara persisten. Pakai --isolated kecuali Anda memang butuh state antar sesi.

evaluate_script menjalankan JavaScript di halaman, dan halaman bisa memuat teks yang ditujukan ke model. Setujui sendiri navigasi ke situs yang belum dikenal. Kami juga mencatat bahwa 1.13.0 membatasi baca-tulis file, seperti trace dan screenshot yang disimpan, ke folder temp sistem ketika client tidak membagikan workspace root-nya; --allow-unrestricted-paths mencabut batasan itu. Biarkan saja tetap aktif. Selengkapnya di keamanan MCP.

Chrome DevTools MCP atau Playwright MCP

Belum ada proyek yang menerbitkan perbandingan, jadi pembagian ini versi kami: pakai Playwright MCP kalau tugas agent adalah menggunakan situsnya, dan Chrome DevTools MCP kalau tugasnya memahami kenapa situs berperilaku seperti itu. Keduanya bisa jalan berdampingan; panduan Playwright MCP kami membahas sisanya.

Saat tidak berjalan

Server Chrome DevTools di katalog kami, lengkap dengan skor pemeriksaan, tercantum di bagian atas halaman ini.