- Server Chrome DevTools MCP ditingkatkan agar agen coding dapat terhubung langsung ke sesi browser yang aktif
- Melalui fitur ini, agen dapat menggunakan ulang sesi yang sudah login atau mengakses sesi debugging aktif di DevTools
- Di Chrome M144 (beta), penggunaan opsi
--autoConnect membuat server MCP otomatis terhubung ke instance Chrome yang sedang berjalan
- Setiap kali koneksi dilakukan, dialog persetujuan pengguna akan ditampilkan, dan selama debugging banner “automated test software” akan muncul
- Pengguna dapat beralih dengan bebas antara debugging manual dan debugging berbantuan AI, sehingga efisiensi pengembangan meningkat
Ringkasan peningkatan server Chrome DevTools MCP
- Server Chrome DevTools MCP diperbarui agar agen coding dapat terhubung langsung ke sesi browser yang aktif
- Pengguna bisa menggunakan ulang sesi yang sudah login, sehingga dapat melakukan debugging tanpa login tambahan
- Agen juga dapat diminta menyelidiki item yang dipilih di panel Network atau panel Elements pada UI DevTools
- Metode koneksi yang ada tetap dipertahankan, termasuk penggunaan profil khusus untuk server MCP, koneksi ke port remote debug, dan menjalankan banyak instance berbasis profil sementara
Cara kerjanya (How it works)
- Chrome M144 (saat ini beta) menambahkan fitur permintaan koneksi remote debugging
- Jika server MCP dijalankan dengan opsi
--autoConnect, server akan otomatis terhubung ke instance Chrome aktif dan meminta sesi remote debugging
- Untuk memperkuat keamanan, Chrome menampilkan dialog persetujuan pengguna pada setiap permintaan, dan hanya mengizinkan koneksi setelah disetujui
- Saat sesi debugging aktif, browser akan menampilkan banner “Chrome is being controlled by automated test software” di bagian atas
Memulai (Get started)
- Untuk menggunakan fitur remote debugging yang baru, Anda perlu mengaktifkan remote debugging di Chrome dan menyiapkan server MCP
Step 1: Atur remote debugging di Chrome
- Buka
chrome://inspect/#remote-debugging lalu aktifkan remote debugging
- Melalui dialog, pilih apakah akan mengizinkan koneksi debugging
Step 2: Atur koneksi otomatis server MCP
- Saat menjalankan server
chrome-devtools-mcp, tambahkan argumen --autoConnect
- Contoh konfigurasi (gemini-cli):
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--autoConnect",
"--channel=beta"
]
}
}
}
- Hingga Chrome M144 mencapai stable channel, perlu menentukan
--channel=beta
Step 3: Uji konfigurasi
Debugging terintegrasi dengan agen coding
- Dengan koneksi ke instance Chrome aktif, otomatisasi dan kontrol manual dapat digunakan bersamaan
- Setelah pengguna menemukan elemen bermasalah di DevTools, elemen itu dapat diteruskan ke agen coding untuk diminta diperbaiki
- Hal yang sama juga bisa dilakukan di panel Network dengan memilih request lalu meminta agen menganalisisnya
- Melalui server Chrome DevTools MCP, akses ke data panel tambahan akan diperluas secara bertahap
1 komentar
Komentar Hacker News
Saya menggunakan Playwright untuk mencegat semua request dan response, lalu merekam trafik yang relevan saat Claude Code menelusuri situs seperti YouTube sambil melakukan klik dan input
Berdasarkan data yang terkumpul, saya otomatis menghasilkan API bertipe kuat sehingga situs apa pun bisa diinteraksikan lewat API internalnya
Tentu ini mungkin melanggar ketentuan layanan, tetapi kelebihannya adalah tidak perlu memuat iklan, gambar, atau markup sepenuhnya
Kalau ada yang tertarik, saya berencana merilisnya minggu ini
Sebenarnya ini adalah cara yang sudah lama dipakai pembuat LLM seperti Anthropic atau OpenAI
Ironisnya, saat mereka melewati iklan atau mengunduh karya berhak cipta itu disebut ‘anugerah dari Tuhan’, tetapi kalau Zuck melakukan hal yang sama malah disebut ‘kutukan dari iblis’
Terutama untuk mereproduksi layout dan style halaman pada titik tertentu di pohon DOM, atau menangkap perilaku responsif secara otomatis
Dengan Playwright saya menyesuaikan lebar layar sambil melacak perubahan style, lalu menyimpan screenshot dan data hierarki style bersama-sama
Alat inspeksi manual memang ada, tetapi terlalu lambat dan tidak efisien
Menurut saya pribadi, membuat CLI kustom sendiri jauh lebih efisien daripada MCP
Yang benar-benar kuat adalah ketika AI bisa mengaksesnya langsung dan memakainya lewat ‘skill’
Rasanya Claude seharusnya bisa langsung menghasilkan kode deterministik hanya dengan agent-browser
Proyek DevTools MCP baru-baru ini meluncurkan CLI mandiri
Jika melihat dokumentasi chrome-devtools-cli, itu sudah termasuk dalam versi v0.20.0
Ini kabar baik bagi orang-orang yang memperhatikan masalah biaya token pada MCP
(Sebagai catatan, saya dulu bekerja di tim DevTools, dan sekarang juga masih bekerja di sana)
Saya sudah beberapa bulan terakhir memakai TideWave
tidewave.ai awalnya berbasis Elixir/LiveView, tetapi sekarang juga mendukung framework JS dan RoR
Alat ini bukan sekadar browser, tetapi juga bisa mengakses runtime aplikasi
Artinya, agent bisa langsung mengakses database dan endpoint sehingga sangat kuat
Google sangat tertinggal dalam agentic CLI coding
Gemini CLI begitu buruk sampai-sampai jelas tidak dipakai bahkan secara internal
Menurut saya MCP sudah menjadi teknologi mati. Tool CLI lebih cepat, lebih fleksibel, dan sudah ada banyak lingkungan yang terlatih untuk itu
Untuk developer yang serius, pendekatan standarnya adalah memakai Playwright dan headless Chromium
MCP hanya menarik bagi pemula
Hanya dengan CLI, kompleksitas keamanan dan operasional menjadi terlalu besar
Tapi saya setuju bahwa Gemini CLI memang buruk
Anthropic sudah mencoba memperbaikinya, tetapi masalah pembengkakan konteks tetap ada
Server MCP tetap memakan konteks bahkan saat tidak digunakan
Sekarang saatnya beralih ke agent skill
Mereka memakai layanan MCP untuk pencarian kode, akses dokumentasi, penelusuran bug, koneksi ke database RAG, dan sebagainya
(Ini saya dengar langsung dari orang internal Google)
Kalau MCP memakan konteks, apakah skill CLI gratis juga?
Sudah ada agent skill yang mengimplementasikan fungsi ini
Saya memakai chrome-cdp-skill setiap hari, dan itu benar-benar keren
Misalnya, dengan codex saya bisa mengelola perpustakaan musik lokal, membuka tab YT Music, mencari album, lalu mengirim URL-nya ke yt-dlp
Hanya saja, saat ini ini khusus Chrome, jadi kalau memakai browser lain perlu mengubah path biner
Bidang browser automation + agent sudah sangat kompetitif
DevTools MCP dan CLI barunya dipelihara oleh tim Chrome DevTools & Puppeteer, jadi kemungkinan akan lebih stabil
Meski begitu, menyenangkan melihat persaingan open source mendorong inovasi
Menurut saya lebih baik memakai tool yang stabil seperti playwriter.dev
Saya membuat proxy WebSocket + ekstensi Chrome agar agent bisa mengendalikan DOM
Saya mengaturnya agar akses dilakukan melalui browserbox dengan cookie sesi diizinkan
Saat ini saya memakainya sebagai middleware penelitian untuk meningkatkan tingkat keberhasilan penggunaan tool oleh agent
Saya sudah cukup lama memakai MCP ini, dan paling stabil saat digunakan bersama codex on opencode
Saya sangat terkesan terutama ketika memakainya sebagai REPL pengeditan SVG, karena ia bisa otomatis membuat ikon kustom yang keren
Ini juga sangat cocok untuk reverse engineering atau pekerjaan ekstensi di aplikasi Electron
Saya sudah mencoba playwriter, dan cara dia terhubung ke sesi yang sudah ada bekerja dengan sangat baik, sampai mengejutkan
Saya juga pernah membuat hal serupa dengan Playwright
Dulu biayanya besar karena konsumsi token tinggi, tetapi saya mengatasinya dengan menyimpan hasil ke disk dan membuat wrapper agar agent bisa melakukan query
Bisa dilihat di uisnap.dev
Saya penasaran apakah proyek ini sudah menyelesaikan masalah konsumsi token
Bisa dilihat di playwright-slim-mcp
Saya pernah mencoba firefox-devtools-mcp, dan itu jauh lebih cepat serta efisien dibanding MCP Chrome bawaan