00:00:00Jadi, tim Chrome akhirnya merilis pembaruan yang memungkinkan server MCP Chrome DevTools
00:00:06berkomunikasi dengan instans Chrome yang sedang berjalan untuk melakukan hal-hal seperti menelusuri masalah di balik halaman login,
00:00:12melakukan analisis pada sesi langsung, bahkan melakukan hal-hal debugging yang sangat keren seperti mengakses
00:00:17elemen yang telah dipilih, kesalahan spesifik, dan bahkan aktivitas jaringan.
00:00:21Tetapi dengan alat debugging browser AI lainnya seperti Agent Browser dan Playwright, yang menambahkan CLI
00:00:26dengan keterampilan serta server MCP, apakah ini sesuatu yang harus ditambahkan oleh MCP Chrome DevTools
00:00:31di masa depan?
00:00:33Klik subscribe dan mari kita cari tahu.
00:00:35Beberapa bulan lalu, Anjis membuat video yang memberikan tinjauan luar biasa tentang server MCP
00:00:44Chrome DevTools, tetapi pada saat itu ia hanya bisa meluncurkan sesi Chrome baru, atau Anda juga bisa menghubungkannya
00:00:49ke port debugging jarak jauh, namun itu memerlukan banyak pengaturan manual.
00:00:53Tapi sekarang di Chrome versi 144 ke atas, dengan bendera debugging jarak jauh dinyalakan, alat
00:00:58MCP Chrome sekarang akan mendeteksi sesi terbuka secara otomatis, yang dapat digunakan untuk debugging, yang mengubah
00:01:04segalanya bagi saya pribadi karena saya lebih suka menggunakan kode Claude di terminal dan itu berarti
00:01:09saya tidak harus menggunakan browser AI seperti Deer, Comet, bahkan ekstensi Chrome Claude
00:01:15atau pun alat debugging AI yang berguna seperti React Grab.
00:01:18Mari kita lihat fitur-fitur baru MCP Chrome DevTools ini beraksi.
00:01:22Pertama-tama Anda harus menginstal server MCP dengan opsi koneksi otomatis yang tersedia.
00:01:27Saya menggunakan kode terbuka, tetapi ini mendukung banyak alat agen, dan di dalam Chrome Anda harus
00:01:31menavigasi ke URL ini dan memastikan Anda telah menyalakan opsi ini.
00:01:36Sekarang sebelumnya Anda harus memulai sesi dengan perintah seperti ini dan agen akan
00:01:40terhubung ke port yang terbuka via HTTP.
00:01:43Tetapi dengan cara baru di dalam UI ini, Anda dapat memulai Chrome seperti biasa dengan akses
00:01:48ke semua cookie, riwayat, dan sebagainya, dan Anda dapat mematikannya kapan pun Anda selesai.
00:01:53Sekarang jika Anda peduli dengan keamanan, nanti di video ini, saya dapat menunjukkan cara menghubungkan
00:01:57ke versi Chrome yang lebih privat.
00:01:59Tetapi setelah Anda melakukan dua hal tersebut, yaitu menyalakan opsi ini dan terhubung ke
00:02:04server MCP dengan opsi koneksi otomatis, seharusnya itu saja.
00:02:08Saya bisa meminta agen saya untuk memeriksa performa Betastack dan di dalam Chrome, saya akan melihat
00:02:12pop-up yang menanyakan apakah saya ingin mengizinkan debugging jarak jauh dan kemudian saya akan melihat spanduk di atas sini.
00:02:17Sekarang agen telah berhasil menavigasi ke situs web Betastack dan sekarang ia menggunakan
00:02:21alat audit Lighthouse untuk memberi saya data web vital yang keren, skor Lighthouse, dan beberapa detail lainnya.
00:02:27Tapi sekarang mari kita lakukan sesuatu yang berguna.
00:02:29Ini adalah aplikasi pembelajaran bahasa yang sedang saya kerjakan.
00:02:31Saya telah masuk sebagai admin, menavigasi ke konten, unit tertentu, dan pergi ke latihan ini.
00:02:37Dan saya menyadari pada modal latihan bahwa tombol simpan di bawah sini berbeda dari
00:02:42tombol lainnya di situs ini.
00:02:44Jadi, alih-alih memberitahu agen secara manual untuk mengikuti langkah saya, seperti masuk dan menavigasi
00:02:49ke halaman spesifik ini, saya akan memilih tombol simpan ini di alat inspeksi dan kemudian
00:02:55bertanya kepada agen apakah mereka dapat melihat elemen yang telah saya pilih.
00:02:58Dan setelah beberapa saat, ia dapat melihat bahwa saya telah memilih tombol simpan.
00:03:02Jadi sekarang saya akan memintanya untuk mengubah gaya tombol simpan agar terlihat seperti tombol latihan
00:03:06baru, yaitu tombol yang ada di sebelah sini jika Anda bisa melihatnya.
00:03:09Dan setelah beberapa detik, ia mengubah gaya tombolnya persis seperti yang saya inginkan.
00:03:13Tetapi jika Anda menjalankan server MCP di lingkungan sandbox, Anda harus menggunakan opsi
00:03:18URL browser dengan port untuk debugging jarak jauh sebagai HTTP, bukan WebSockets.
00:03:23Dan jika Anda peduli dengan keamanan, Anda perlu menambahkan direktori data pengguna dengan lokasi
00:03:28tertentu ke server MCP sebagai opsi, yang berarti agen tidak akan memiliki akses ke
00:03:33cookie, kata sandi, riwayat browser yang sudah ada, dan banyak lagi.
00:03:36Dan Anda harus masuk kembali ke situs-situs tersebut jika ingin agen memiliki akses ke sana.
00:03:41Nah meskipun ini keren, jika Anda telah menonton video saya sebelumnya, Anda akan tahu bahwa saya bukan
00:03:46penggemar berat server MCP karena mereka menghabiskan banyak konteks jika Anda memiliki banyak
00:03:51server tersebut.
00:03:52Tapi untungnya, server MCP Chrome DevTools memungkinkan Anda melakukan segalanya dengan CLI,
00:03:59yang tidak banyak orang tahu karena itu agak tersembunyi karena Anda harus masuk ke
00:04:04direktori skills dan kemudian Chrome DevTools CLI untuk mengetahui fitur eksperimental ini,
00:04:10yang memberikan informasi kepada agen Anda tentang cara menggunakannya.
00:04:12Dan juga beberapa instruksi instalasi jika Anda belum menginstalnya.
00:04:16Ini pada dasarnya adalah pembungkus tipis di sekitar server MCP.
00:04:20Dan jika Anda sudah menjalankannya di dalam alat agen, CLI ini tidak akan menggunakannya karena
00:04:24ia menggunakan daemon-nya sendiri.
00:04:26Perintah ini memberi Anda informasi tentang daemon default yang berjalan dan Anda sudah bisa
00:04:30melihatnya menyetel bendera URL browser dengan beberapa bendera lain seperti headless dan isolated.
00:04:34Tetapi Anda juga akan menyadari bahwa tidak ada koneksi otomatis di dalam opsi CLI yang tersedia.
00:04:39Jadi jika Anda belum menjalankan Chrome melalui terminal, Anda harus keluar dari yang sudah ada dan kemudian
00:04:43menjalankannya seperti ini dengan memastikan jika Anda memiliki bendera port debugging jarak jauh, Anda harus
00:04:48memiliki bendera data pengguna.
00:04:50Jadi sekarang dengan hal itu, saya bisa memulai daemon seperti ini, mendapatkan daftar halaman, yang
00:04:54hanya menunjukkan satu tab baru karena tidak banyak aktivitas saat ini.
00:04:57Tetapi tentu saja, kekuatan aslinya muncul saat Anda menggunakannya dengan agen.
00:05:01Jadi jika saya mematikan alat MCP Chrome, pilih tombol ini di DevTools dan minta agen untuk
00:05:06menggunakan CLI guna mencari tahu elemen apa yang dipilih dan kita bisa melihat ia telah berhasil mengetahuinya
00:05:10seperti itu.
00:05:11Perhatikan bahwa informasi dalam direktori data pengguna tetap tersimpan di antara sesi.
00:05:15Jadi ini menyimpan semua cookie, informasi browser saya, dan seterusnya.
00:05:19Selain itu ada banyak hal lain yang dapat dilakukan oleh CLI Chrome DevTools.
00:05:22Jadi saya sarankan Anda memeriksanya dan mungkin di masa depan, mereka akan memperkenalkan
00:05:26fitur koneksi otomatis.
00:05:28Jadi begitulah, ulasan singkat dari beberapa fitur keren baru dari server
00:05:32MCP Chrome DevTools dan CLI, yang pasti akan meningkatkan pengalaman debugging Anda dengan asisten
00:05:38pemrograman.
00:05:39Sebagai pengguna Arc, ya saya masih menggunakan Arc, saya sangat berharap fitur ini akan hadir di sana di masa depan.
00:05:45Tapi sampai saat itu, saya senang menggunakan browser agen Vassal, yang telah bekerja dengan sangat
00:05:50baik bagi saya.
00:05:51Dan jika Anda tidak tahu apa-apa tentang browser agen, tontonlah video yang saya buat beberapa waktu lalu, meskipun
00:05:55itu sudah banyak berkembang sejak saat itu.
00:05:58Jadi mungkin ini saatnya bagi saya untuk membuat video lainnya.