Chrome DevTools MCP: Otomatisasi dan Debugging Browser Bertenaga AI

Untuk memperdalam pemahaman Anda tentang agen AI dan bagaimana alat seperti Chrome DevTools MCP masuk dalam gambaran yang lebih besar, jelajahi kursus Introduction to AI Agents dari DataCamp atau jalur keterampilan AI Agent Fundamentals.

Chrome DevTools MCP adalah server Model Context Protocol resmi dari tim Chrome DevTools yang memungkinkan asisten pengodean AI mengontrol Chrome melalui bahasa natural. Alih-alih menulis skrip, Anda memberi tahu asisten AI apa yang Anda inginkan (“navigasikan ke halaman ini dan periksa error di konsol” atau “isi formulir ini dan ambil tangkapan layar”), dan asisten menangani detail teknisnya.

Server ini memberi Anda akses ke alat otomatisasi dan debugging browser yang andal. Dibangun di atas Puppeteer, sehingga andal dan berjalan sepenuhnya di mesin Anda. Anda tidak perlu menulis satu baris kode Puppeteer pun.

Dalam tutorial ini, Anda akan mempelajari cara menggunakan server MCP ini dengan asisten pengodean AI seperti Claude, Cursor, dan Cline. Kita akan membahas instalasi dan konfigurasi, lalu masuk ke kemampuan inti: otomatisasi browser, debugging, dan inspeksi. Sepanjang artikel, kita akan menggunakan Conduit (demo.realworld.io), sebuah platform blogging bergaya Medium, untuk menunjukkan contoh nyata.

Jika Anda baru mengenal Model Context Protocol, saya sarankan membaca panduan MCP komprehensif ini untuk memahami secara mendalam bagaimana MCP menghubungkan model AI ke alat eksternal. Anda juga dapat melihat tutorial Claude untuk Chrome kami dan panduan tentang browser AI terbaik. Untuk pendekatan berbeda pada otomatisasi browser AI, baca tutorial ChatGPT Atlas kami.

Ringkasnya

• Chrome DevTools MCP adalah server MCP resmi yang memungkinkan asisten pengodean AI mengontrol Chrome melalui bahasa natural

• Server ini menyediakan 26 alat dalam 6 kategori: otomatisasi input, navigasi, debugging, jaringan, performa, dan emulasi

• Instal dengan claude mcp add chrome-devtools npx chrome-devtools-mcp@latest untuk Claude Code (klien lain memiliki pengaturan serupa)

• Otomatiskan tugas browser seperti navigasi, pengisian formulir, dan pengambilan tangkapan layar tanpa menulis skrip Puppeteer

• Debug aplikasi web dengan memeriksa error konsol, permintaan jaringan, dan menjalankan JavaScript—semuanya melalui percakapan

• Bangun frontend secara iteratif dengan membiarkan AI mengambil tangkapan layar untuk memverifikasi pekerjaannya sendiri di setiap langkah

Apa itu Chrome DevTools MCP?

Begini cara arsitekturnya bekerja di balik layar.

Server ini menyediakan 26 alat yang diorganisasi dalam 6 kategori:

• Otomatisasi input (7 alat): click, drag, fill, fill_form, handle_dialog, hover, upload_file
• Navigasi (7 alat): navigate_page, new_page, list_pages, select_page, close_page, navigate_page_history, wait_for
• Debugging (4 alat): evaluate_script, list_console_messages, take_screenshot, take_snapshot
• Jaringan (2 alat): list_network_requests, get_network_request
• Performa (3 alat): performance_start_trace, performance_stop_trace, performance_analyze_insight
• Emulasi (3 alat): emulate_cpu, emulate_network, resize_page

Otomatisasi browser menjadi percakapan. Alih-alih menulis skrip Puppeteer dan men-debug selektor CSS, Anda menjelaskan apa yang diinginkan dalam bahasa natural. Asisten AI yang menentukan detail teknisnya.

Chrome DevTools MCP vs. pendekatan tradisional

Dengan alat-alat ini, asisten AI Anda dapat membantu Anda:

• Membangun frontend secara iteratif dengan membiarkan agen Anda mengambil tangkapan layar di setiap langkah
• Menguji alur pengguna end-to-end, seperti mendaftar, menavigasi fitur, dan memverifikasi bahwa setiap langkah berfungsi
• Men-debug masalah dengan memeriksa error konsol dan permintaan jaringan tanpa perlu membuka DevTools secara manual
• Mengotomatiskan dokumentasi visual dengan mengambil tangkapan layar dari berbagai halaman atau status aplikasi
• Mengekstrak data dari halaman web dengan menjalankan JavaScript langsung dalam konteks halaman

Semua ini dipicu melalui perintah bahasa natural alih-alih menulis skrip Puppeteer.

Chrome DevTools MCP bekerja dengan Claude Desktop, Cursor, Cline, dan VSCode Copilot. Karena ini adalah salah satu server MCP di antara banyak lainnya, Anda dapat menggabungkannya dengan server lain—seperti akses sistem berkas, alat basis data, dan API—untuk membangun alur kerja yang mencakup banyak alat.

Instalasi dan Penyiapan Chrome DevTools MCP

Anda memerlukan beberapa hal:

• Node.js dan npm terpasang di mesin Anda
• Asisten pengodean AI yang kompatibel dengan MCP (kita akan menggunakan Claude Code dalam tutorial ini)
• Browser Chrome (Puppeteer menangani ini secara otomatis, jadi Anda tidak perlu mengonfigurasi apa pun)

Pemahaman dasar tentang DevTools browser membantu, tetapi tidak wajib.

Menginstal Chrome DevTools MCP

Chrome DevTools MCP berjalan melalui konfigurasi MCP asisten AI Anda. Penyiapan sedikit bervariasi tergantung asisten pengodean AI yang Anda gunakan. Kami akan menunjukkan cara memasangnya untuk Claude Code, tetapi editor lain seperti Cursor, Cline, dan VSCode Copilot memiliki pendekatan serupa.

Untuk Claude Code, jalankan perintah ini di terminal Anda:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Perintah ini mendaftarkan server Chrome DevTools MCP ke Claude Code. Server berjalan melalui npx, yang mengunduh dan mengeksekusi paket tanpa memerlukan instalasi permanen. @latest memastikan Anda mendapatkan versi terkini.

Setelah menjalankan perintah, mulai ulang Claude Code untuk memuat server baru.

Jika Anda menggunakan asisten pengodean AI yang berbeda

Klien MCP lain memiliki metode instalasi serupa—sebagian menggunakan perintah, sebagian menggunakan berkas konfigurasi, atau tombol instal sekali klik. Lihat halaman GitHub Chrome DevTools MCP untuk petunjuk spesifik bagi Cursor, Cline, Gemini CLI, Windsurf, dan klien lain yang didukung.

Menguji penyiapan Anda

Mari verifikasi semuanya berfungsi dengan perintah sederhana:

Navigasikan ke demo.realworld.io dan ambil tangkapan layar

Anda akan melihat:

• Chrome diluncurkan (Anda akan melihat jendela browser kecuali Anda mengonfigurasi mode headless)
• Beranda Conduit dimuat
• Asisten AI Anda menangkap dan menampilkan tangkapan layar

Jika terjadi masalah, periksa isu umum berikut:

• Versi Node.js: Chrome DevTools MCP memerlukan Node.js v20.19 atau lebih baru
• Izin npm: Pastikan npm dapat memasang paket
• Perlu mulai ulang: Asisten AI Anda perlu dimulai ulang setelah perubahan konfigurasi
• Lokasi berkas konfigurasi: Pastikan Anda mengedit berkas pengaturan MCP yang benar untuk asisten Anda

Dasar-dasar Otomatisasi Browser

Chrome DevTools MCP memberi Anda enam alat inti untuk berinteraksi dengan halaman web. Gunakan navigate_page untuk memuat URL, click untuk berinteraksi dengan elemen, fill dan fill_form untuk memasukkan teks, hover untuk memicu efek hover, dan take_screenshot untuk menangkap tampilan saat ini. Alat-alat ini mencakup sebagian besar tugas otomatisasi browser yang akan Anda temui.

Navigasi dan tangkapan layar

Mari muat sebuah halaman. Katakan kepada asisten AI Anda:

Navigasikan ke demo.realworld.io

AI menggunakan alat navigate_page, Chrome terbuka, dan beranda Conduit dimuat. Anda akan melihat jendela browser kecuali Anda mengonfigurasi mode headless.

Untuk mendokumentasikan apa yang Anda lihat, cukup minta:

Ambil tangkapan layar beranda

AI menangkap halaman saat ini dengan take_screenshot dan menampilkan hasilnya. Ini berguna untuk dokumentasi visual atau memverifikasi bahwa halaman terlihat benar.

Interaksi elemen

Anda dapat berinteraksi dengan elemen apa pun di halaman tanpa menulis selektor CSS atau memeriksa ID elemen. Cukup jelaskan apa yang Anda inginkan:

Klik tautan Sign in

AI menentukan elemen yang Anda maksud dan mengkliknya menggunakan alat click. Halaman masuk dimuat.

Anda juga dapat melakukan hover pada elemen:

Arahkan kursor ke tautan Sign up

AI menggunakan alat hover. Jika ada tooltip atau dropdown, akan muncul.

Pengisian formulir

Formulir adalah bagian yang mudah membosankan dalam otomatisasi browser jika Anda menulis skrip. Dengan Chrome DevTools MCP, Anda cukup menjelaskan apa yang ingin diisi.

Isi satu kolom sekaligus:
Isi kolom email dengan test@example.com
Isi kolom kata sandi dengan testpass123
Atau isi beberapa kolom sekaligus:
Isi formulir masuk dengan email test@example.com dan kata sandi testpass123

AI menggunakan fill_form untuk menangani semua kolom sekaligus. Berikut tampilan formulir yang sudah diisi:

AI mengidentifikasi kolom input yang tepat berdasarkan deskripsi Anda. Anda tidak menyentuh HTML.

Debugging dan inspeksi

Chrome DevTools MCP memberi Anda tiga alat inti untuk debugging: list_console_messages untuk melihat output konsol, list_network_requests untuk melihat aktivitas jaringan, dan evaluate_script untuk menjalankan JavaScript dan mengekstrak data dari halaman.

Saat Anda menggunakan alat ini melalui asisten AI, Anda sedang melakukan percakapan. Anda bertanya dengan bahasa natural, dan AI menerjemahkannya menjadi panggilan alat MCP di balik layar.

Berikut tampilannya:

Asisten AI memahami maksud Anda dan mengeksekusi alat Chrome DevTools yang sesuai, lalu menyajikan hasilnya dalam format yang mudah dibaca. Mari lihat cara kerjanya dalam praktik.

Inspeksi konsol

Error konsol biasanya menjadi tempat pertama untuk melihat saat sesuatu bermasalah. Alih-alih membuka DevTools secara manual, cukup minta asisten AI Anda:

Navigasikan ke demo.realworld.io dan periksa konsol untuk error apa pun

AI memuat halaman dan memeriksa konsol menggunakan list_console_messages. Berikut temuannya:

Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/articles'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/tags'
from origin 'https://demo.realworld.io' has been blocked by CORS policy

Error CORS (Cross-Origin Resource Sharing)—adalah fitur keamanan browser yang membatasi halaman web untuk membuat permintaan ke domain berbeda) dan menjelaskan mengapa halaman menampilkan “Loading articles…” dan “Loading tags…” alih-alih konten sebenarnya:

Anda dapat menggali lebih dalam dengan meminta AI memfilter dan menafsirkan pesan-pesan ini:

Apakah ada error atau peringatan di halaman ini?

AI menganalisis output konsol dan memberi tahu Anda: “Ya, ada dua error CORS yang memblokir permintaan API untuk artikel dan tag.”

Ini memberi Anda visibilitas langsung atas apa yang rusak tanpa membuka konsol DevTools secara manual.

Gambaran permintaan jaringan

Error konsol sering mengarah ke masalah jaringan. Untuk memahami apa yang sebenarnya terjadi dengan permintaan Anda, periksa aktivitas jaringan:

Tunjukkan permintaan jaringan apa yang dibuat di beranda

AI menggunakan list_network_requests dan mengembalikan daftar semua permintaan. Anda akan melihat permintaan yang berhasil (CSS, font, berkas JavaScript) dan yang gagal:

https://demo.realworld.io/ GET [success - 200]
https://demo.realworld.io/main.css GET [success - 200]
https://demo.realworld.io/main.js GET [success - 200]
https://conduit.productionready.io/api/tags GET [failed - 307]
https://conduit.productionready.io/api/articles?limit=10&offset=0 GET [failed - 307]
https://api.realworld.io/api/tags GET [failed - net::ERR_FAILED]
https://api.realworld.io/api/articles?limit=10&offset=0 GET [failed - net::ERR_FAILED]

Ajukan pertanyaan lanjutan untuk menggali lebih dalam:

Apakah ada permintaan yang gagal?

AI memfilter daftar dan mengidentifikasi masalahnya: “Ya, empat permintaan API gagal. Dua mengembalikan pengalihan 307, dan dua benar-benar gagal dengan error ERR_FAILED.”

Ini membantu Anda menemukan masalah dengan cepat tanpa memeriksa tab Network secara manual.

Evaluasi JavaScript dan Ekstraksi Data

Selain melihat data konsol dan jaringan, Anda dapat menjalankan kode langsung di halaman untuk memeriksa statusnya atau mengekstrak informasi. Gunakan evaluate_script untuk ini:

Periksa apakah ada artikel yang ditampilkan di beranda

AI menjalankan JavaScript untuk menghitung elemen artikel:

const articles = document.querySelectorAll('.article-preview');
return articles.length;

Hasil: “Tidak ada 0 artikel yang ditampilkan. Halaman menampilkan ‘Loading articles…’ yang menunjukkan error API mencegah konten dimuat.”

Anda juga dapat mengekstrak data yang lebih kompleks:

Dapatkan judul halaman dan teks heading utama

AI mengevaluasi:

return {
 pageTitle: document.title,
 mainHeading: document.querySelector('h1')?.textContent
};

Hasil: {pageTitle: "Home — Conduit", mainHeading: "conduit"}

Ini memungkinkan Anda memverifikasi konten halaman, mengekstrak data terstruktur, atau memeriksa apakah elemen dinamis dimuat dengan benar. Alat take_screenshot dan take_snapshot melengkapi ini dengan menangkap dokumentasi visual dan struktural saat dibutuhkan.

Ketiga kemampuan debugging ini bekerja saling melengkapi secara natural. Mulailah dengan pesan konsol untuk menemukan error, periksa permintaan jaringan untuk memahami apa yang gagal, lalu gunakan evaluasi JavaScript untuk memverifikasi bagaimana kegagalan tersebut memengaruhi halaman—semuanya melalui percakapan dengan asisten AI Anda, tanpa berpindah antar alat atau menulis skrip inspeksi.

Membangun Frontend Situs Web Menggunakan Chrome DevTools MCP

Asisten AI dapat membangun antarmuka web, tetapi mereka tidak dapat melihat apa yang mereka buat. Anda akhirnya harus mengambil tangkapan layar secara manual dan meminta penyesuaian.

Chrome DevTools MCP mengubah ini. AI mengambil tangkapan layarnya sendiri, memverifikasi tata letak, dan beriterasi hingga semuanya terlihat benar.

Mari bangun klon ChatGPT menggunakan Streamlit. Anda akan memerlukan kunci API OpenAI untuk ini. Berikan kepada asisten AI Anda saat menjalankan prompt agar dapat memverifikasi aplikasi berfungsi dengan benar. Berikut promptnya:

Bangun klon ChatGPT menggunakan Streamlit. Buat antarmuka chat yang rapi
dengan riwayat pesan, input teks, dan integrasi API OpenAI. Sertakan
sidebar untuk manajemen kunci API dan fitur manajemen chat (Clear
Chat, New Chat, penghitung pesan). Gunakan Chrome DevTools MCP untuk memverifikasi
UI di setiap langkah.

AI membuat aplikasi dengan sidebar dan mengambil tangkapan layar untuk memverifikasi tata letak awal:

Sidebar mencakup input kunci API, tombol Clear Chat dan New Chat, serta penghitung pesan di angka 0. Dengan antarmuka siap, mari lihat apakah fungsi chat bekerja.

Pengujian dengan pertanyaan sederhana:

Chat merespons dengan benar, dan penghitung menunjukkan dua pesan (pada tangkapan layar berikutnya). Namun, apakah bisa menangani percakapan multi-giliran?

Pengujian konteks percakapan:

AI mengingat percakapan sebelumnya. Selanjutnya, kita perlu memverifikasi fitur Clear Chat.

Mengklik tombol Clear Chat:

Chat berhasil dibersihkan, dan penghitung direset ke 0.

Memulai chat baru:

Sempurna. AI membangun klon ChatGPT yang berfungsi, memverifikasi tampilan di setiap langkah, dan menguji semua fitur tanpa intervensi manusia.

Ini berfungsi untuk kerangka kerja apa pun. React, Vue, Svelte, HTML murni. AI memverifikasi tata letak, menguji interaksi, dan menangkap bug sebelum Anda melihat kodenya.

Kesimpulan dan Langkah Selanjutnya

Chrome DevTools MCP memberi Anda otomatisasi browser melalui percakapan. Anda menjelaskan apa yang diinginkan, dan asisten AI Anda menangani detail teknisnya. Tidak ada skrip untuk ditulis, tidak ada selektor untuk di-debug.

Sepanjang artikel ini, kita membahas dasar-dasarnya: memasang server, menavigasi halaman, mengisi formulir, mengeklik elemen, dan mengambil tangkapan layar. Lalu kita beralih ke debugging dengan inspeksi konsol, pemantauan jaringan, dan evaluasi JavaScript. Terakhir, kita melihat bagaimana alat-alat ini bekerja bersama untuk membangun frontend di mana AI dapat melihat apa yang dibuatnya.

Apa yang dicoba selanjutnya

Mulailah dengan menavigasi ke situs yang sedang Anda kerjakan dan minta AI Anda memeriksa error konsol atau menginspeksi permintaan jaringan. Jika Anda menggunakan Claude Code, panduan praktik terbaik Claude Code kami membahas pola pemicu yang efektif untuk penggunaan alat. Ambil tangkapan layar berbagai status. Uji pengiriman formulir.

Lalu gabungkan beberapa alat: navigasikan ke halaman, isi formulir, kirim, dan tangkap hasilnya. Periksa pesan konsol, daftar permintaan jaringan yang gagal, dan jalankan JavaScript untuk memverifikasi status halaman.

Setelah Anda nyaman dengan dasar-dasarnya, buat komponen UI kecil dengan AI Anda dan biarkan ia memverifikasi tata letak di setiap langkah. Perhatikan bagaimana ia menangkap masalah visual sebelum Anda memeriksanya secara manual.

Untuk pekerjaan performa, gunakan alat performa (performance_start_trace, performance_stop_trace, performance_analyze_insight) untuk memprofil waktu muat halaman dan mengidentifikasi bottleneck. Gunakan alat emulasi (emulate_cpu, emulate_network, resize_page) untuk pengujian dalam berbagai kondisi.

Chrome DevTools MCP adalah salah satu server di antara banyak lainnya. Gabungkan dengan server sistem berkas, alat basis data, atau integrasi API untuk membangun alur kerja yang mencakup banyak sistem. Untuk lebih banyak contoh MCP, lihat tutorial Codex CLI MCP dan tutorial Google ADK MCP.

Jika Anda ingin membangun server MCP sendiri, lihat Building an MCP Server and Client with FastMCP 2.0.