Cara Menggunakan Chrome DevTools MCP Server

Debugging selalu menjadi inti dari pengembangan web, tetapi dengan munculnya asisten pengkodean AI, pengembang menghadapi tantangan baru: bagaimana agen-agen ini dapat benar-benar melihat dan berinteraksi dengan kode yang mereka hasilkan? Memperkenalkan chrome dev tools mcp server—cara baru untuk menghubungkan asisten pengkodean AI Anda dengan DevTools Chrome untuk debugging real-time, wawasan kinerja, dan pengujian alur pengguna.

Panduan ini akan memandu Anda memahami apa itu server MCP Chrome DevTools, cara kerjanya, mengapa itu penting, dan yang terpenting, cara menginstal dan menggunakannya di VS Code, gemini cli, dan Cursor. Pada akhirnya, Anda akan tahu cara mengintegrasikan lingkungan debugging Chrome yang canggih ke dalam alur kerja pengembangan yang dibantu AI Anda.

💡

Ingin alat Pengujian API hebat yang menghasilkan Dokumentasi API yang indah?

Ingin platform terintegrasi, All-in-One agar Tim Pengembang Anda dapat bekerja sama dengan produktivitas maksimum?

Apidog memenuhi semua permintaan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau!

button

Apa itu Server MCP Chrome Dev Tools?

Model Context Protocol (MCP) adalah standar sumber terbuka yang memungkinkan model bahasa besar (LLM) untuk terhubung ke alat eksternal dan sumber data. chrome dev tools mcp server membawa kekuatan debugging Chrome DevTools langsung ke agen AI Anda.

Alih-alih menghasilkan kode “secara buta,” asisten AI Anda kini dapat:

Meluncurkan Chrome dan membuka situs web.
Mengumpulkan jejak kinerja langsung.
Memeriksa DOM, CSS, dan runtime JavaScript.
Melakukan debug masalah tata letak, jaringan, dan konsol.
Mensimulasikan perilaku pengguna seperti klik, pengiriman formulir, dan navigasi.

Ini membuat agen pengkodean AI jauh lebih efektif karena dapat memvalidasi, menguji, dan mengoptimalkan perubahan kode secara real time, alih-alih menebak apa yang mungkin berhasil.

Mengapa Menggunakan Server MCP Chrome Dev Tools?

Berikut adalah kasus penggunaan utama untuk mengintegrasikan server MCP chrome dev tools ke dalam alur kerja Anda:

1. Verifikasi Perubahan Kode secara Real-Time
Hasilkan perbaikan dengan asisten AI Anda dan konfirmasi bahwa perbaikan tersebut berfungsi secara instan di browser.

Contoh prompt: “Verifikasi di browser bahwa perubahan Anda berfungsi seperti yang diharapkan.”

2. Diagnosis Kesalahan Jaringan dan Konsol
Identifikasi masalah CORS, kegagalan API, atau peringatan runtime yang tidak terduga.

Contoh prompt: “Beberapa gambar di localhost:8080 tidak dimuat. Apa yang terjadi?”

3. Simulasi Perilaku Pengguna
Otomatiskan alur pengguna seperti pengiriman formulir atau navigasi untuk mereproduksi bug.

Contoh prompt: “Mengapa pengiriman formulir gagal setelah memasukkan alamat email?”

4. Debug Masalah Gaya dan Tata Letak Langsung
Periksa DOM dan CSS untuk bug overflow, ketidaksejajaran, atau masalah rendering.

Contoh prompt: “Halaman di localhost:8080 terlihat aneh. Periksa apa yang terjadi di sana.”

5. Otomatisasi Audit Kinerja
Memicu pemeriksaan gaya Lighthouse langsung melalui asisten AI.

Contoh prompt: “Localhost:8080 memuat dengan lambat. Buatlah memuat lebih cepat.”

Cara Menginstal Server MCP Chrome Dev Tools

Instalasi mudah baik Anda menggunakan VS Code, Gemini CLI, maupun Cursor.

1. Menginstal di VS Code

Buka VS Code
Tekan Ctrl + Shift + P (di Windows atau Linux) atau Cmd + Shift + P (untuk Mac).
Sekarang, cari “MCP” dan klik “Add MCP Server.”
Pilih “Browse MCP Servers.”

Di bilah sisi di bawah Ekstensi, klik “Browse MCP Servers” lagi. Anda akan diarahkan ke halaman web yang mencantumkan server MCP yang tersedia.
Di halaman web itu, cari “Chrome Dev Tools MCP Server” menggunakan kata kunci "chrome."

Klik Install, lalu pilih “Install in VS Code.”

Setelah terinstal, asisten AI VS Code Anda akan dapat terhubung ke Chrome untuk debugging langsung.

Instal Server MCP Chrome Dev Tools di VS Code

2. Menginstal di Cursor

Buka Cursor Editor.
Buka Settings > Tools & MCP.

Gulir ke bawah dan klik New MCP Server.
Ini akan membuka file JSON konfigurasi MCP, di mana Anda harus menempelkan konfigurasi MCP berikut:

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

Kemudian simpan dan mulai ulang Cursor.

Sekarang, Cursor akan mengenali server MCP chrome dev tools dan menghubungkannya ke asisten pengkodean AI Anda untuk debugging.

3. Menginstal di Gemini (Direkomendasikan)

Jika Anda menggunakan Gemini, Anda juga dapat menghubungkannya ke chrome dev tools mcp server. Faktanya, Chrome secara khusus merekomendasikan untuk mengaktifkan fitur ini di Gemini untuk memanfaatkan sepenuhnya kemampuan debugging dan inspeksinya.

Pertama, temukan filesettings.json di folder .gemini di direktori root pengguna Anda. Di sinilah kita akan menambahkan konfigurasi MCP kita. Anda dapat melakukannya dengan dua cara:

1. Navigasi melalui folder Anda secara manual:

Cari folder .gemini di bawah profil pengguna Anda lalu buka file settings.json dengan editor kode Anda (misalnya vs code).

2. Menggunakan terminal:

Masuk ke direktori root dan buka folder .gemini menggunakan perintah di bawah ini:

cd ~
cd .gemini

Di dalam folder .gemini, buka file settings.json dengan vs code menggunakan perintah:

code settings.json

3. Tambahkan Server MCP Chrome DevTools ke Gemini CLI

Tempel konfigurasi berikut ke dalam file untuk menambahkan Server MCP Chrome DevTools:

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

Simpan file dan tutup.

File Konfigurasi akan terlihat seperti ini:

Sekarang buka Gemini dan jalankan perintah berikut untuk mengonfirmasi server telah terinstal:

/mcp

Anda sekarang akan melihat chrome dev tools mcp server terdaftar di antara server yang tersedia. Dari sini, Gemini dapat terhubung langsung ke Chrome DevTools, sehingga lebih mudah untuk melakukan debug aplikasi langsung dengan bantuan AI.

Cara Menggunakan Server MCP Chrome Dev Tools

Setelah terinstal, Anda dapat mulai berinteraksi dengannya secara langsung melalui prompt di asisten AI Anda. Misalnya:

1. Analisis Kinerja
“Tolong periksa LCP (Largest Contentful Paint) dari web.dev.”

menggunakan server mcp chrome devtools untuk analisis kinerja

2. Debugging Masalah CSS
“Periksa localhost:8080 dan perbaiki elemen yang meluap di header.”

3. Log Konsol & Jaringan
“Analisis kesalahan konsol saat mengirimkan formulir login di localhost:3000.”

4. Mensimulasikan Alur Pengguna
“Navigasikan ke halaman pendaftaran, isi formulir, dan beri tahu saya mengapa pengiriman gagal.”

Asisten AI Anda sekarang tidak hanya menulis kode tetapi juga menguji dan men-debugnya seperti yang dilakukan pengembang manusia, langsung di Chrome.

Fitur Lanjutan

1. Pelacakan Otomatis
Alat performance_start_trace memungkinkan agen AI Anda untuk merekam jejak dan menganalisis hambatan kinerja secara otomatis.

2. Inspeksi DOM & CSS
Asisten AI dapat memeriksa struktur DOM langsung dan memberikan perbaikan CSS atau HTML yang ditargetkan.

3. Alur Kerja Skalabel
Karena didukung oleh MCP, pengaturan yang sama berfungsi di berbagai editor dan agen yang mendukung MCP, memastikan konsistensi.

Terlibat dan Prospek Masa Depan

Server MCP chrome dev tools masih dalam pratinjau publik. Itu berarti ia berkembang pesat, dan Google secara aktif mencari umpan balik pengembang. Peningkatan di masa mendatang dapat meliputi:

Integrasi yang lebih dalam dengan Lighthouse dan Core Web Vitals.
Simulasi input pengguna yang lebih kaya (alur multi-langkah).
Visualisasi yang lebih kuat dari masalah yang terdeteksi AI.
Dukungan yang diperluas untuk debugging multi-tab dan multi-perangkat.

Anda dapat mengikuti pembaruan di Blog Pengembang Chrome dan menyumbangkan masalah atau saran di GitHub.

Kesimpulan

Chrome dev tools mcp server lebih dari sekadar alat pengembang lainnya—ini adalah jembatan antara alur kerja debugging tradisional dan dunia pengkodean yang dibantu AI yang sedang berkembang. Dengan memberikan agen pengkodean kemampuan untuk melihat, menguji, dan men-debug secara real-time, ia mengubah mereka dari pembuat kode menjadi mitra debugging yang lengkap.

Apakah Anda seorang pengembang profesional yang menggunakan VS Code, seorang siswa yang bereksperimen di Cursor, atau seorang penggemar AI yang menjelajahi otomatisasi, menginstal dan menggunakan Server MCP Chrome DevTools dapat secara signifikan meningkatkan produktivitas dan kualitas kode.

Sekarang setelah Chrome DevTools dapat berkomunikasi langsung dengan agen AI Anda, satu-satunya pertanyaan yang tersisa adalah: apa yang akan Anda bangun, uji, dan perbaiki selanjutnya?

button