Izinkan Agen Pengodean Anda men-debug sesi browser Anda dengan MCP Chrome DevTools

Sebastian Benz
Alex Rudenko
Alex Rudenko
X GitHub

Dipublikasikan: 11 Desember 2025

Kami mengirimkan peningkatan pada server MCP Chrome DevTools yang telah diminta oleh banyak pengguna kami: kemampuan agen coding untuk terhubung langsung ke sesi browser aktif.

Dengan peningkatan ini, agen coding dapat:

  1. Menggunakan kembali sesi browser yang ada: Bayangkan Anda ingin agen pengodean Anda memperbaiki masalah yang dibatasi oleh login. Agen coding Anda kini dapat mengakses sesi penjelajahan Anda saat ini secara langsung tanpa memerlukan login tambahan.
  2. Mengakses sesi penelusuran bug yang aktif: Agen coding kini dapat mengakses sesi penelusuran bug yang aktif di UI DevTools. Misalnya, saat Anda menemukan permintaan jaringan yang gagal di panel jaringan Chrome DevTools, pilih permintaan tersebut dan minta agen coding Anda untuk menyelidikinya. Hal yang sama juga berfungsi dengan elemen yang dipilih di panel Elements. Kami sangat antusias dengan kemampuan baru ini untuk bertransisi dengan lancar antara penelusuran bug manual dan yang dibantu AI.

Lihat cara kerjanya:

Fitur koneksi otomatis adalah tambahan untuk cara yang ada agar MCP Chrome DevTools terhubung ke instance Chrome. Perhatikan bahwa Anda masih dapat:

  • Jalankan Chrome dengan profil pengguna khusus server MCP Chrome DevTools (default saat ini).
  • Hubungkan ke instance Chrome yang sedang berjalan dengan port debug jarak jauh.
  • Jalankan beberapa instance Chrome secara terpisah dengan setiap instance berjalan di profil sementara.

Cara kerjanya

Kami telah menambahkan fitur baru ke Chrome M145 (saat ini di Canary) yang memungkinkan server MCP Chrome DevTools meminta koneksi debug jarak jauh. Alur baru ini dibangun di atas kemampuan debug jarak jauh Chrome yang sudah ada. Secara default, koneksi pen-debugan jarak jauh dinonaktifkan di Chrome. Developer harus mengaktifkan fitur ini secara eksplisit terlebih dahulu dengan membuka chrome://inspect#remote-debugging.

Jika server MCP Chrome DevTools dikonfigurasi dengan opsi --autoConnect option, server MCP akan terhubung ke instance Chrome yang aktif dan meminta sesi pen-debug jarak jauh. Untuk menghindari penyalahgunaan oleh pelaku kejahatan, setiap kali server MCP Chrome DevTools meminta sesi penelusuran bug jarak jauh, Chrome akan menampilkan dialog kepada pengguna dan meminta izin mereka untuk mengizinkan sesi penelusuran bug jarak jauh. Selain itu, saat sesi penelusuran bug aktif, Chrome menampilkan banner "Chrome sedang dikontrol oleh software uji otomatis" di bagian atas.

Alur proses debug jarak jauh: Aktifkan fitur proses debug jarak jauh terlebih dahulu. Kemudian, konfirmasi permintaan koneksi debug jarak jauh. Sesi debug akan ditunjukkan oleh teks banner.
Alur dan UI pen-debug-an jarak jauh baru di Chrome.

Mulai

Untuk menggunakan kemampuan proses debug jarak jauh yang baru. Anda harus mengaktifkan terlebih dahulu proses debug jarak jauh di Chrome, lalu mengonfigurasi server MCP Chrome DevTools untuk menggunakan fitur koneksi otomatis baru.

Langkah 1: Siapkan penelusuran bug jarak jauh di Chrome

Di Chrome, lakukan langkah-langkah berikut untuk menyiapkan proses debug jarak jauh:

  1. Buka chrome://inspect/#remote-debugging untuk mengaktifkan proses debug jarak jauh.
  2. Ikuti UI dialog untuk mengizinkan atau tidak mengizinkan koneksi proses debug masuk.
Screenshot yang menunjukkan cara mengaktifkan proses debug jarak jauh di Chrome
Proses debug jarak jauh harus diaktifkan sebelum klien dapat meminta koneksi proses debug jarak jauh.

Langkah 2: Konfigurasi server MCP Chrome DevTools agar otomatis terhubung ke Instance Chrome yang sedang berjalan

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

Cuplikan kode berikut adalah contoh konfigurasi untuk gemini-cli:

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

Langkah 3: Uji penyiapan Anda

Sekarang buka gemini-cli dan jalankan perintah berikut:

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

Server MCP Chrome DevTools akan mencoba terhubung ke instance Chrome yang sedang berjalan. Aplikasi ini menampilkan dialog yang meminta izin pengguna:

Dialog Chrome yang meminta pengguna untuk mengaktifkan sesi proses debug jarak jauh.
Chrome meminta izin pengguna untuk memulai sesi pen-debug-an jarak jauh.

Mengklik Izinkan akan menyebabkan server MCP Chrome DevTools membuka developers.chrome.com dan mengambil rekaman aktivitas performa.

Untuk mengetahui petunjuk lengkapnya, lihat README di GitHub.

Mengizinkan agen coding mengambil alih sesi penelusuran kesalahan Anda

Dengan dapat terhubung ke instance Chrome aktif, Anda tidak perlu memilih antara otomatisasi dan kontrol manual. Anda dapat menggunakan DevTools sendiri atau menyerahkan tugas pen-debug-an kepada agen coding Anda. Jika menemukan masalah di situs Anda, Anda dapat membuka DevTools untuk melihat dan mengidentifikasi elemen yang menyebabkan masalah. Jika Anda ingin agen coding memperbaiki masalah, Anda kini dapat melakukannya dengan Server MCP Chrome DevTools. Anda dapat memilih elemen di panel Elemen dan meminta agen coding untuk menyelidiki masalah tersebut.

Hal yang sama juga berlaku untuk panel Jaringan. Anda dapat memilih permintaan jaringan dan meminta agen coding untuk menyelidikinya.

Namun, ini hanyalah langkah pertama. Kami berencana untuk mengekspos data panel secara bertahap dan lebih banyak ke agen coding melalui Server MCP Chrome DevTools. Nantikan kabar terbarunya.