Cara P2ER membangun lingkungan dengan tingkat kepercayaan tinggi untuk coding agentik dengan Chrome DevTools untuk agen

Peer Weidner
Peer Weidner
GitHub LinkedIn
José Luis Zapata

Dipublikasikan: 22 Juni 2026

P2ER, sebuah agensi solusi digital, menggunakan Chrome DevTools untuk agen guna memastikan hanya software yang berfungsi dan terverifikasi yang diteruskan ke manusia untuk ditinjau akhir. Dengan mengubah alur kerja menjadi infrastruktur agentic, mereka telah memberdayakan agen AI untuk melakukan verifikasi UI empiris, sehingga meningkatkan frekuensi deployment dari seminggu sekali menjadi beberapa kali sehari.

Tantangan: Meningkatkan kualitas dalam aplikasi yang ada

P2ER menghadirkan pengalaman digital kelas atas untuk brand global, termasuk produsen mobil, brand jam tangan, dan perusahaan perhotelan. Tantangan utama mereka, seperti halnya banyak perusahaan, adalah bekerja dalam aplikasi yang kompleks dan sudah ada. Sebagai tim yang mengadopsi coding agentic, mereka menghadapi tiga kendala utama:

  • Pengujian UI yang rapuh. Suite pengujian standar mengalami kesulitan dengan data dinamis, seperti harga hotel yang berfluktuasi atau penawaran musiman di beberapa project P2ER. Data tiruan sering kali menyembunyikan kekurangan integrasi yang akan langsung ditemukan oleh penguji manusia.
  • Masalah keandalan agen. Tanpa petunjuk eksplisit, agen AI terkadang mengklaim tugas telah selesai tanpa benar-benar memverifikasinya.
  • Kehilangan konteks. Tugas yang luas dan waktu tunggu model menyebabkan agen kehilangan tujuan sesi. Hal ini menyulitkan developer untuk melacak dan melanjutkan pekerjaan yang telah dimulai oleh agen.

Solusi: Membangun infrastruktur untuk keahlian

P2ER membangun infrastruktur yang memperlakukan AI sebagai "partner sparring" yang juga dapat menangani aspek pengembangan yang berulang. Pendekatan ini memungkinkan tim meningkatkan keahlian dengan berfokus pada arsitektur dan pemecahan masalah secara kreatif.

Menerapkan verifikasi empiris dengan DevTools untuk server MCP agen

Untuk memastikan keandalan, P2ER menetapkan aturan Verifikasi Empiris Wajib. Mandat teknik ini, yang dikodifikasikan dalam file AGENTS.md project, menyatakan:

All claims regarding service availability and component rendering
MUST be empirically verified (log output, dev compiler, browser/devtools inspection)
before asserting to the user.

Alih-alih mempercayai perkataan agen, tim menggunakan Chrome DevTools untuk agen guna memberikan lingkungan yang aman kepada agen untuk menavigasi aplikasi secara visual dan interaktif.

Agen "pengujian" ini melakukan beberapa tugas utama yang tidak dilakukan oleh pengujian statis standar:

  • Pengujian data dinamis: Bahkan di lingkungan staging, agen menguji data nyata yang berfluktuasi (seperti perubahan harga hotel di berbagai musim) untuk merasakan aplikasi persis seperti yang dilakukan pengguna. Hal ini diaktifkan oleh alat interaksi DevTools untuk agen seperti new_page, navigate_page, fill, click, dan hover, yang disebut dalam keterampilan github-issue-test, sehingga agen dapat mengautentikasi dan menyimulasikan jalur klik pengguna yang realistis secara dinamis.
  • Audit visual: Agen mengidentifikasi perbedaan visual antara tata letak Figma dan implementasi sebenarnya. Dengan menggunakan alat take_screenshot dari DevTools untuk agen, keterampilan figma-validate mereka mengambil screenshot resolusi tinggi dari rendering Storybook langsung untuk melakukan perbandingan berdampingan dengan ekspor Figma.
  • Pemeriksaan kegunaan: Agen menangkap terjemahan yang tidak ada atau error kegunaan yang sering diabaikan oleh skrip otomatis. Dengan berinteraksi langsung dengan pohon aksesibilitas dan meninjau snapshot visual, yang diambil melalui take_snapshot dan take_screenshot, agen secara aktif memindai anomali UI seperti string MISSING_MESSAGE seperti yang diinstruksikan secara eksplisit dalam alur kerja verifikasi otomatis mereka.

Menguraikan dan mempertahankan subtugas

Untuk mengatasi waktu tunggu sesi dan kehilangan konteks, P2ER mengelompokkan pekerjaan secara ketat melalui sub-agen. Kemudian, mereka menginstruksikan agen untuk bertindak sebagai orkestrator seperti ini:

Rather than executing everything in the main thread, you must decompose large
or complex objectives into modular subtasks that can be delegated
to specialized subagents.

Untuk memberi tahu pemilik produk manusia dalam proses ini, tim mengintegrasikan keterampilan kustom untuk agen guna melacak pekerjaan mereka dalam masalah GitHub. Hal ini memastikan bahwa setiap tugas sub-agen dan hasilnya dipertahankan dan didokumentasikan sebagai sub-masalah menggunakan GitHub API, sehingga membuat jalur audit yang jelas dan konteks persisten yang dapat diambil oleh developer lain.

Mengisolasi lingkungan untuk eksekusi paralel

Untuk meningkatkan skala proses pengembangan sehingga beberapa agen menjalankan kode secara paralel, P2ER mewajibkan lingkungan terisolasi per tugas untuk agennya. Hal ini mencegah konflik status dan masalah jaringan selama verifikasi UI.

Penyiapan teknis untuk isolasi ini mencakup:

  • Worktree Git terisolasi: Untuk mencegah tabrakan file dan polusi ruang kerja saat beberapa agen beroperasi secara paralel, tugas dijalankan dalam worktree Git terisolasi. Setiap agen mendapatkan ruang sistem file khusus tempat variabel lingkungan disalin dan dependensi di-symlink, sehingga perubahan file tidak pernah menimpa satu sama lain.
  • Lingkungan unik: Setiap agen dan tugas menjalankan server pengembangan Next.js di port terisolasi yang unik. Menurut aturan project, server dimulai secara dinamis dengan npx next dev -p <custom_port> --turbopack untuk memastikan eksekusi paralel tanpa konflik jaringan.
  • Klon database: Untuk mencegah tabrakan data selama pengujian paralel, P2ER menduplikasi database utama secara terprogram ke dalam skema khusus tugas saat startup agen. Setelah agen menyelesaikan verifikasinya dan tugas disetujui, proses pembersihan otomatis akan menghapus database terisolasi. Siklus proses ini memastikan bahwa setiap agen beroperasi di ruang kerja yang bersih dan tidak meninggalkan data yang tidak terhubung.
  • Pengujian yang ditargetkan: Semua pengujian browser melalui Chrome DevTools untuk agen harus menargetkan port kustom yang tepat yang dialokasikan ke instance agen tertentu tersebut. Mandat pengujian mereka melarang hardcode port default, yang memerlukan target pengujian URL seperti http://localhost:<custom_port>.

Dampak: Peningkatan kecepatan pengembangan 10x dengan tetap menjaga kualitas

Pergeseran ke coding agentic dengan panduan kepercayaan tinggi mengubah output P2ER. Perubahan ini awalnya diperlukan untuk memastikan agen beroperasi dengan andal, tetapi juga menguntungkan seluruh siklus proses pengembangan:

  • Siklus kerja 10x lebih cepat: Sebagian besar masalah kini ditutup dalam satu hari, dibandingkan dengan rata-rata 1–3 hari sebelumnya. Frekuensi deployment meningkat dari seminggu sekali menjadi beberapa kali sehari.
  • Fokus strategis untuk tim QA: Karena agen kini menangkap regresi dasar dan "buah yang mudah dipetik", tim pengujian manusia dapat berfokus pada skenario pengujian yang lebih mendalam, kompleks.
  • Implementasi yang kuat untuk pemangku kepentingan: Implementasi kini lebih tangguh karena pengujian bergerak melampaui "jalur yang baik" standar programmer.
  • Komunikasi dan keterlacakan yang lebih jelas: Dengan menerapkan aturan "masalah manusia ke sub-masalah implementasi", pemangku kepentingan menerima petunjuk yang jelas tentang peningkatan logis yang dilakukan, bukan membaca tiket yang penuh dengan detail implementasi teknis dan cara mengujinya.

Sebagai contoh bagaimana hal ini memengaruhi kecepatan pengembangan, P2ER membangun platform baru dalam enam bulan yang akan memakan waktu bertahun-tahun menggunakan metode yang telah ditetapkan. Manusia tetap menjadi gerbang kualitas akhir, meninjau Permintaan Pull yang telah divalidasi oleh agen.

Insight teknis untuk tim

Saat membangun alur kerja ini, P2ER mengidentifikasi beberapa strategi yang membantu mereka bertransisi dari eksperimen ke model pengembangan yang matang dan dibantu agen.

Strategi ini dapat membantu tim lain menyempurnakan implementasi agentic mereka sendiri:

Mengoptimalkan penggunaan token dengan injeksi skrip dan batching CLI

Server MCP dapat menjadi intensif token selama sesi pengembangan yang panjang jika agen hanya mengandalkan navigasi langkah demi langkah (misalnya, mengambil snapshot, menemukan ID, mengisi input, dan menunggu). Untuk meminimalkan overhead ini, P2ER menggunakan pendekatan dua arah:

  • Injeksi skrip inline: Untuk interaksi yang ditargetkan, seperti autentikasi melalui formulir React yang kompleks, agen menggunakan alat evaluate_script untuk menyuntikkan JavaScript vanilla langsung ke browser. Hal ini melewati penggantian setter bawaan dan menjalankan beberapa tindakan sekaligus, sehingga menghemat banyak putaran percakapan.
  • Batching skrip CLI: Saat agen mengalami "masalah" atau menemukan alur browser yang sangat panjang dan berulang, mereka beralih ke penggantian batching CLI. Alih-alih menghabiskan token untuk alat MCP individual yang berulang atau menulis skrip otomatisasi kustom dari awal, P2ER meminta Chrome DevTools CLI untuk mempertahankan dan membatasi tindakan browser. Hal ini memungkinkan agen menjalankan seluruh alur multi-langkah secara terprogram dalam satu kali, sehingga mengurangi overhead komunikasi model-ke-alat yang konstan secara drastis.

Mengotomatiskan pelacakan performa dengan Analisis Pelacakan

Alih-alih hanya mengandalkan persepsi manusia, P2ER membuat keterampilan review-performance yang menggunakan DevTools untuk agen guna menjalankan audit Lighthouse otomatis dan pelacakan performa.

Agen menggunakan alat performance_start_trace dan performance_analyze_insight untuk menangkap dan menyelidiki Core Web Vitals (LCP, INP, CLS) serta mengidentifikasi bottleneck thread utama atau pergeseran tata letak. Untuk melengkapi gerbang kualitas, agen dapat menjalankan lighthouse_audit lengkap untuk secara khusus menjaga terhadap regresi dalam Aksesibilitas (a11y), SEO, dan praktik terbaik web umum, sehingga hanya kode berkualitas tinggi yang dikirimkan untuk Permintaan Pull.

Meningkatkan verifikasi dengan Chrome DevTools untuk agen

Selain keterampilan kustom, P2ER menggunakan kemampuan inti server MCP Chrome DevTools untuk agen guna melakukan verifikasi fungsional. Hal ini mencakup penggunaan server untuk mengemulasi berbagai perangkat dan menguji responsivitas, sehingga memastikan antarmuka pengguna berfungsi di berbagai ukuran layar dan perangkat.

Dengan menggunakan server MCP untuk menavigasi aplikasi, agen dapat mengidentifikasi perbedaan visual antara tata letak dan implementasi sebenarnya, sehingga mengidentifikasi error yang sering diabaikan oleh pengujian statis.

Resource

Untuk mempelajari kasus penggunaan P2ER lebih lanjut, jelajahi semua keterampilan yang disebutkan di repositori GitHub terkait.

Untuk memulai sendiri dan mempelajari lebih lanjut cara menerapkan alur kerja serupa dengan DevTools untuk agen, pelajari referensi berikut: