Membuka insight runtime: Memperkenalkan alat developer pihak ketiga untuk Chrome DevTools bagi agen

Wolfgang Beyer
Wolfgang Beyer
X GitHub

Dipublikasikan: 18 Juni 2026

Untuk men-debug aplikasi web modern secara efektif, agen AI memerlukan lebih dari sekadar kode sumber Anda; agen AI perlu memahami perilaku aplikasi saat runtime.

Dengan senang hati kami memperkenalkan alat developer pihak ketiga untuk Chrome DevTools bagi agen. Kini, aplikasi dan framework Anda dapat memberikan tampilan langsung status internalnya kepada agen AI. Hal ini membantu agen menghubungkan titik-titik antara apa yang terjadi di layar dan logika yang berjalan di balik layar.

Tujuannya: Melampaui analisis statis

Pengembangan web modern dibangun berdasarkan abstraksi—framework seperti Angular, React, atau Vue; platform CMS seperti WordPress atau Shopify; dan library untuk CSS, grafis 3D, atau animasi. Meskipun DevTools memiliki akses langsung ke DOM yang dirender akhir, "kebenaran" aplikasi sering kali berada di dalam status internal framework: hierarki komponen, sinyal JavaScript, atau status backend.

Tujuan kami dengan alat developer pihak ketiga adalah menyediakan jalur bagi library mana pun untuk membagikan konteks yang kaya dan dapat ditindaklanjuti ini kepada agen AI. Dengan demikian, agen dapat men-debug masalah yang sebelumnya "tidak terlihat" oleh mereka, misalnya:

  • Hierarki komponen: Memetakan elemen DOM di halaman langsung ke komponen framework dan status internal yang sesuai.
  • Pemeriksaan status internal: Mengakses status sisi server atau konten database langsung dalam sesi proses debug.

Cara kerjanya: Discovery API

Alat developer pihak ketiga menggunakan JavaScript API berbasis peristiwa. Server MCP Chrome DevTools menemukan alat ini dengan mengirimkan peristiwa devtoolstooldiscovery pada objek window global. Peristiwa devtoolstooldiscovery otomatis dikirimkan pada setiap navigasi halaman, atau jika halaman yang dipilih diubah, dan dapat dikirimkan secara eksplisit menggunakan alat MCP list_3p_developer_tools.

Menerapkan alat Anda sendiri

Untuk mengekspos alat dari library atau aplikasi Anda, Anda harus memproses peristiwa penemuan ini dan merespons dengan ToolGroup.

window.addEventListener('devtoolstooldiscovery', (event) => {
  event.respondWith({
    name: "My Library Tools",
    description: "Tools for inspecting internal library state",
    tools: [
      {
        name: "getInternalState",
        description: "Returns the current internal state of the framework.",
        inputSchema: {
          type: "object",
          properties: {
            componentId: { type: "string" }
          }
        },
        execute: async (input) => {
          // Access your framework's internal registry
          return myFramework.getState(input.componentId);
        }
      }
    ]
  });
});

Implementasinya adalah sebagai berikut:

  1. Menentukan skema: Gunakan Skema JSON untuk menentukan input yang diharapkan alat Anda.
  2. Menangani logika: Menerapkan fungsi execute yang berjalan dalam konteks halaman dan menampilkan data yang dapat diserialisasi.
  3. Elemen DOM: Objek yang tidak dapat diserialisasi tidak dapat dikirim antara halaman dan DevTools untuk agen. Elemen DOM adalah pengecualian. Saat alat Anda menampilkan elemen DOM, DevTools untuk agen akan otomatis memetakannya ke UID yang sama yang digunakan oleh alat take_snapshot. Hal ini memungkinkan agen Anda berinteraksi dengan semua elemen halaman (baik yang berasal dari framework maupun dari snapshot halaman) dengan cara yang sama.

Berinteraksi dengan alat menggunakan MCP

Setelah Anda mendaftarkan alat, agen coding Anda dapat berinteraksi dengan alat tersebut melalui DevTools untuk agen. Alat MCP list_3p_developer_tools menampilkan deskripsi alat pihak ketiga yang tersedia di halaman. Selain itu, saat halaman yang dipilih berubah (misalnya, setelah navigasi), DevTools akan menambahkan daftar alat yang tersedia ke respons alat MCP.

Untuk menggunakan alat ini, agen Anda memanggil execute_3p_developer_tool. DevTools otomatis memvalidasi parameter input untuk memastikan parameter tersebut cocok dengan definisi alat.

Anda juga dapat memanggil alat menggunakan alat MCP evaluate_script. Agen Anda menyediakan cuplikan JavaScript yang dijalankan DevTools di halaman. Cuplikan ini dapat memanggil alat developer pihak ketiga dan langsung menggunakan output-nya untuk perhitungan lebih lanjut.

Penggunaan evaluate_script efektif untuk proses debug yang kompleks karena memungkinkan agen:

  • Menyusun operasi: Menggabungkan beberapa langkah menjadi satu eksekusi.
  • Menangani nilai yang tidak dapat diserialisasi: Memproses objek atau sinyal khusus framework langsung dalam konteks halaman.
  • Mengoptimalkan performa: Meminimalkan overhead serialisasi dan menghindari beberapa perjalanan pulang pergi antara agen dan browser.

Keberhasilan awal: Integrasi Angular

Kami telah berkolaborasi dengan tim Angular, yang menerapkan dua alat developer pihak ketiga:

  1. Alat Grafik Sinyal: Memberikan kemampuan kepada agen untuk memvisualisasikan hubungan antara status dan tampilan, sehingga membantu mereka mengidentifikasi dependensi yang menyebabkan loop tak terbatas atau pembaruan yang gagal.
  2. Alat Grafik Injeksi Dependensi (DI): Mengekspos injektor elemen, yang memungkinkan agen melihat dengan tepat tempat layanan disediakan atau tempat layanan tidak ada. Karena grafik DI Angular adalah konstruksi khusus runtime, analisis statis saja tidak dapat men-debug error penyedia.
Screencast yang menampilkan agen AI menggunakan alat Grafik Sinyal Angular untuk men-debug loop reaktif.

Tim React juga telah mulai bereksperimen dengan alat developer pihak ketiga.

Bangun masa depan proses debug agentic bersama kami

Fitur eksperimental ini tersedia di Chrome DevTools untuk agen mulai versi 0.25.0. Untuk mengaktifkannya, gunakan flag command line --categoryExperimentalThirdParty.

Jika Anda mengelola framework, library, atau alat dan ingin meningkatkan pengalaman proses debug untuk agen coding, kami akan senang berkolaborasi:

Bergabunglah bersama kami dalam membangun masa depan pengembangan web agentic!