Mengintegrasikan Chrome DevTools dengan MCP/Habr

Hai semuanya! Saya bersemangat untuk berbagi sesuatu yang benar-benar membawa perubahan bagi siapa saja yang menulis kode untuk web. Saya sedang berbicara tentang server Chrome DevTools Model Context Protocol (MCP) yang baru. Jika ingin tahu lebih detail, baca artikelnya sampai selesai.

Asisten pengkodean AI sangat hebat dalam menghasilkan kode. Mereka dapat menulis kode tersebut, namun mereka tidak dapat melihat apa yang sebenarnya dilakukan kode tersebut ketika dijalankan di browser. Ini berarti banyak dugaan dan bolak-balik bagi pengembang.

Tapi itu semua akan berubah. Server MCP Chrome DevTools memungkinkan agen AI untuk men-debug halaman web langsung di Chrome, menggunakan DevTools canggih yang sama. Artinya, asisten AI kini dapat mengidentifikasi dan memperbaiki masalah dengan lebih akurat.

Apa Sebenarnya MCP Chrome DevTools itu?

Server MCP Chrome DevTools adalah implementasi khusus dari Model Context Protocol (MCP) yang menambahkan kemampuan proses debug ke agen AI.

Dengan alat baru ini, asisten AI saya dapat:

• Verifikasi perubahan kode secara real-time: Ini dapat menghasilkan perbaikan dan kemudian secara otomatis memeriksa apakah kode berfungsi sebagaimana mestinya di browser.

• Mendiagnosis kesalahan jaringan dan konsol: Ini dapat menganalisis permintaan jaringan untuk mengungkap masalah seperti masalah CORS atau memeriksa log konsol untuk mencari tahu mengapa suatu fitur tidak berfungsi.

• Mensimulasikan perilaku pengguna: AI dapat menavigasi situs web, mengisi formulir, dan mengklik tombol untuk mereproduksi bug dan menguji alur pengguna yang kompleks.

• Debug masalah gaya dan tata letak langsung: Ia dapat memeriksa DOM dan CSS untuk menemukan dan menyarankan perbaikan untuk masalah tata letak.

• Mengotomatiskan audit kinerja: Anda dapat memintanya menjalankan pelacakan kinerja, menganalisis hasilnya, dan mengidentifikasi masalah kinerja tertentu.

• Dan masih banyak lagi.

Memulai dengan Chrome DevTools MCP

Anda dapat menggunakannya dengan hampir semua agen pengkodean yang tersedia. Saya akan menunjukkan cara menggunakannya dalam VS Code dengan GitHub Copilot, lalu Anda dapat menerapkannya ke agen pilihan Anda.

Persyaratan:

• VS Kode

• Kopilot GitHub

• Node.js

Cara Memasang MCP Chrome DevTools di VS Code

• Ini membuka tab baru di browser saya tempat saya dapat mencari “chrome.†Server MCP “Chrome DevTools†adalah satu-satunya hasil. Saya mengeklik “Instal” lalu “Instal di VS Code.” Sebuah pop-up di browser saya meminta izin untuk membuka VS Code, dan saya izinkan.

– Kembali ke VS Code, saya tinggal mengklik tombol “Instalâ€.

Dan itu dia! Agen AI saya kini dilengkapi dengan kecanggihan Chrome DevTools.

Jika Anda sudah memiliki file mcp.json, Anda tinggal menambahkan kode ini di sana:

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

NPM MCP Alat Pengembang Chrome

Anda juga dapat menginstal MCP melalui manajer paket npm dengan menggunakan perintah ini:

npm i chrome-devtools-mcp

Halaman resmi Chrome MCP ada di sini: https://www.npmjs.com/package/chrome-devtools-mcp

Cara Menguji MCP DevTools dalam Kode VS

Untuk melihatnya beraksi, saya membuka obrolan Copilot dan meminta agen saya memeriksa skor Largest Contentful Paint (LCP) untuk https://proflead.dev saya. Ini segera mulai berfungsi, dan saya dapat melihat kemajuannya di jendela obrolan. Ia meminta izin saya sebelum melanjutkan.

Dalam beberapa saat, saya mendapat laporan terperinci tentang skor LCP situs web saya. Namun bagian yang benar-benar menakjubkan adalah apa yang terjadi selanjutnya. Karena agen AI saya sekarang memiliki semua visibilitas ini, saya dapat memintanya untuk membantu saya meningkatkan skor. Ini bukan lagi sekadar dugaan; itu dapat melihat kinerja situs web di dunia nyata. Jika Anda tidak dapat mengikuti tutorial ini, Anda mungkin tertarik untuk menonton video tutorial langkah demi langkah saya tentang topik di bawah ini.

Video Tutorial: Penjelasan MCP Chrome DevTools

Tonton di YouTube:Â Penjelasan MCP Chrome DevTools

Kesimpulan

Ini adalah lompatan besar dalam pengembangan web. Kami beralih dari asisten AI yang hanya sekedar pembuat kode ke asisten yang dapat berpartisipasi aktif dalam keseluruhan siklus pengembangan.

Jika Anda seorang pengembang web, saya sangat menyarankan untuk memeriksa server MCP Chrome DevTools. Ini adalah alat canggih yang akan mengubah cara Anda bekerja dengan asisten pengkodean AI Anda.

Bersulang! 🙂