Mengotomatiskan alur kerja browser yang dapat diulang dengan CLI Chrome DevTools

José Luis Zapata

Matthias Rohmer

Chrome DevTools untuk agen menyertakan antarmuka command line (CLI) yang memungkinkan agen coding Anda, atau Anda, menjalankan alat DevTools sebagai perintah shell standar. Alih-alih memanggil alat secara dinamis melalui server MCP, agen Anda menulis tindakan yang sama sebagai perintah shell dan dapat merangkainya menjadi skrip yang dapat Anda jalankan ulang kapan saja. Misalnya, agen Anda mungkin membuat skrip seperti ini:

chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"

Server MCP dan CLI terhubung ke mesin yang sama: daemon latar belakang persisten yang berkomunikasi dengan Chrome melalui Chrome DevTools Protocol (CDP). Perbedaannya adalah cara agen Anda menjangkau mesin tersebut:

• Server MCP: Agen Anda terhubung melalui input/output standar menggunakan JSON-RPC dan memperlakukan setiap alat browser sebagai panggilan fungsi interaktif.
• CLI: Agen Anda menjalankan perintah shell secara langsung terhadap daemon latar belakang yang sama.

Anda dapat menggunakan CLI untuk melakukan hal berikut:

• Mempertahankan alur kerja: Ubah tindakan yang dilakukan agen Anda selama sesi proses debug eksploratif menjadi skrip yang dapat digunakan kembali.
• Mereproduksi status aplikasi: Jalankan ulang skrip untuk mengembalikan browser ke status yang diketahui sebelum melakukan proses debug lagi.
• Tindakan batch: Menjalankan urutan perintah navigasi, input, emulasi, dan pemeriksaan tanpa giliran percakapan di antara setiap langkah.
• Menjalankan skrip tanpa agen AI: Jalankan skrip yang dihasilkan dari terminal, subshell, atau container CI mana pun yang dapat menjalankan skrip shell, tanpa memerlukan sesi LLM atau klien MCP yang aktif.

Memilih antara CLI dan server MCP

Memilih antara CLI dan server MCP adalah keputusan teknis terkait biaya, konteks, dan alur kerja.

• Biaya jendela konteks: Saat Anda mendaftarkan server MCP, setiap definisi alat dan skema JSON akan dimasukkan ke dalam perintah sistem LLM Anda dalam setiap percakapan. Dengan keterampilan CLI, agen Anda hanya memuat ringkasan Markdown yang ringkas dan membayar biaya token saat memutuskan untuk membaca keterampilan lengkap dan membuat perintah yang diperlukan. Untuk sesi agen multi-turn yang panjang, perbedaan tersebut akan menambah biaya dan latensi.
• Eksplorasi versus eksekusi: Alat MCP sangat cocok untuk proses debug yang dinamis dan eksploratif, saat Anda maupun agen belum mengetahui apa yang perlu diperiksa. Karena agen Anda mengetahui semua alat yang tersedia di awal, agen tersebut lebih cenderung menggunakannya untuk mencapai sasarannya. Jika jalur sudah diketahui, CLI memungkinkan Anda hanya menjalankan langkah-langkah yang diperlukan.
• Dapat digunakan kembali: Anda dapat menyimpan skrip CLI, menggunakannya kembali dalam kemampuan, atau menjalankannya secara manual di luar agent loop. Anda tidak dapat melakukannya dengan panggilan alat MCP.

Saat menggunakan CLI, perhatikan hal-hal berikut:

• Cakupan alat: CLI mendukung sebagian besar alat Chrome DevTools untuk agen untuk otomatisasi berbasis shell. Untuk mengetahui daftar lengkap perintah, lihat referensi kemampuan CLI.
• Startup implisit: Server latar belakang dimulai secara otomatis saat pertama kali digunakan; Anda tidak perlu menjalankan start, status, atau stop sebelum setiap perintah.
• Status persisten: Status browser tetap ada di seluruh perintah, sehingga halaman yang Anda buka dalam satu perintah masih tersedia di perintah berikutnya jika tidak ditutup secara eksplisit.
• ID halaman dan UID elemen: Sebagian besar perintah menggunakan ID halaman sebagai argumen pertamanya. Jalankan chrome-devtools list_pages untuk menemukannya, dan chrome-devtools take_snapshot untuk mendapatkan UID elemen yang ingin Anda gunakan untuk berinteraksi.
• Format output: Output ditetapkan secara default ke teks biasa seperti Markdown. Teruskan --output-format=json jika Anda ingin menggunakan hasilnya di skrip lain atau pipeline CI.
• Akses file: Secara default, CLI memiliki akses sistem file penuh untuk parameter penyimpanan file dan upload_file. Teruskan --allowUnrestrictedPaths=false untuk membatasi akses file ke direktori sementara OS.
• Lighthouse di CI: Anda dapat menjalankan lighthouse_audit dari CLI, tetapi Lighthouse CLI mandiri dan GitHub Actions-nya lebih ringan jika Anda hanya memerlukan skor Lighthouse di CI.
• Abstraksi yang lebih sederhana daripada skrip otomatisasi browser: Tidak seperti menulis skrip Puppeteer atau Playwright lengkap di JavaScript atau TypeScript, DevTools CLI menyediakan platform API yang terbatas dan sangat bertarget. Sintaksis shell ini lebih mudah dibaca dan dikelola oleh manusia, dan jauh lebih mudah untuk dibuat dengan andal tanpa halusinasi, bahkan oleh model tingkat rendah.

Prasyarat

Sebelum menggunakan CLI, pastikan Anda memiliki hal berikut:

• Chrome DevTools untuk agen telah diinstal: Ikuti panduan memulai. Plugin dan ekstensi khusus agen (misalnya, ekstensi Gemini CLI) menyertakan keterampilan agentic bersama server MCP.
• CLI yang tersedia di shell Anda: Penginstalan adalah langkah satu kali dan bukan bagian dari alur kerja agen reguler. Lihat referensi penginstalan.
• Keahlian chrome-devtools-cli (diinstal dengan Chrome DevTools untuk agen): Keahlian ini mengajarkan agen Anda cara menulis skrip shell atau menjalankan perintah shell dengan CLI.

Struktur perintah

Perintah mengikuti pola chrome-devtools <tool> [arguments] [flags]. Argumen yang diperlukan bersifat posisional dan argumen opsional menggunakan flag. Gunakan --help pada perintah apa pun untuk mengetahui detailnya.

Contoh:

chrome-devtools new_page "https://example.com"      # Open a page
chrome-devtools list_pages                          # Find the page ID
chrome-devtools take_snapshot 1                     # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello"                # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"

Kasus penggunaan untuk CLI Chrome DevTools

Perintahkan agen Anda untuk merekam langkah-langkah yang telah ia ketahui sebagai skrip, bukan menyelesaikan ulang alur browser yang sama di setiap sesi.

Mempertahankan sesi proses debug sebagai skrip yang dapat digunakan kembali

Setelah sesi proses debug eksploratif melalui MCP, Anda sering kali tidak dapat menjamin masalah yang sama tidak akan muncul lagi. Daripada menjelaskan ulang langkah-langkah reproduksi di lain waktu, minta agen Anda untuk menuliskan alur yang baru saja dijalankan.

Contoh perintah:

Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.

Contoh eksekusi agen: Agen Anda meninjau langkah-langkah navigasi, input, dan pemeriksaan yang dilakukan selama sesi dan menerjemahkannya ke dalam urutan perintah chrome-devtools, misalnya new_page, take_snapshot, fill, click, dan list_console_messages. Skrip akan disimpan sebagai test.sh. Saat berikutnya Anda men-debug area ini, Anda dapat mengarahkan agen ke skrip untuk mencapai status yang sama lagi, atau menjalankannya di luar agent loop untuk men-debug secara manual.

Mereproduksi status aplikasi sebelum menyelidiki

Status yang kompleks, seperti checkout multi-langkah atau dasbor yang difilter, memerlukan biaya yang mahal bagi agen untuk membangun ulang secara percakapan setiap saat. Gunakan skrip yang disimpan sebagai titik awal untuk investigasi baru.

Contoh perintah:

Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.

Contoh eksekusi agen: Agen Anda menjalankan skrip, yang membuka halaman checkout, mengisi formulir alamat, dan memilih opsi pengiriman. Karena status browser dipertahankan di seluruh perintah, agen Anda kemudian menggunakan take_snapshot dan evaluate_script di halaman yang sama untuk memeriksa status tombol dan pengendali peristiwa yang dilampirkan ke pemilih pembayaran.

Pemeriksaan visual batch di seluruh area pandang

Memverifikasi perubahan tata letak di beberapa ukuran layar bersifat berulang dan biasanya dilakukan secara manual. Minta agen Anda membuat skrip yang menerapkan setelan emulasi dan mengambil bukti untuk setiap setelan dalam satu operasi.

Contoh perintah:

Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.

Contoh eksekusi agen: Agen Anda menulis loop yang memanggil chrome-devtools emulate 1 --viewport "<size>" diikuti dengan chrome-devtools take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png" untuk setiap area pandang. Anda dapat menjalankan ulang skrip setelah setiap perubahan CSS tanpa membuka percakapan.

Melakukan smoke test pada alur yang tidak memiliki klien MCP

Beberapa lingkungan, seperti container CI atau penyiapan perusahaan yang terkunci, tidak mendukung klien MCP. Hampir setiap terminal, subshell, container CI, dan framework agen mendukung menjalankan skrip shell standar dan membaca stdout, yang membuat CLI cocok untuk pemeriksaan ringan di tempat tersebut.

Contoh perintah:

Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.

Contoh eksekusi agen: Agen Anda menulis skrip yang menggunakan new_page, take_snapshot, fill, dan click, lalu memanggil list_console_messages 1 --types error --output-format=json dan mengurai output JSON untuk menentukan kode keluar.

Mengemas alur kerja sebagai keterampilan ringan

Jika suatu alur berguna di seluruh project atau rekan satu tim, agen Anda dapat menggabungkan skrip dalam sebuah skill. Itulah keterampilan DevTools CLI: referensi ringan yang memungkinkan agen Anda menjalankan perintah browser tertentu tanpa membayar biaya token di awal untuk semua alat.

Contoh perintah:

Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.

Contoh eksekusi agen: Agen Anda membuat SKILL.md dengan nama, deskripsi satu baris tentang kapan keahlian tersebut berlaku, dan petunjuk yang merujuk ke skrip. Dalam sesi berikutnya, agen hanya membaca keahlian lengkap saat tugas cocok dengan deskripsinya.

Langkah berikutnya

• Untuk mengetahui daftar lengkap perintah dan flag CLI, lihat referensi skill CLI.
• Untuk mengonfigurasi server yang mendasarinya (mode headless, saluran, kategori eksperimental), lihat Konfigurasi.