DevTools

Embedded browser memberi Anda akses ke Chrome DevTools lengkap — inspector, console, dan network monitor yang sama seperti yang Anda gunakan di jendela Chrome biasa. Gunakan untuk debug apa yang dibangun AI agent Anda, cek error JavaScript, atau inspeksi bagaimana sebuah request terbentuk.

Membuka DevTools

Klik tombol DevTools (🔧) di header panel browser. Chrome DevTools terbuka di jendela terpisah di samping workspace Anda. Anda bisa menempatkan jendela ini di mana saja yang nyaman — kebanyakan developer menaruhnya di monitor kedua atau dock di bawah panel browser.

Anda juga bisa membuka DevTools seperti di Chrome: klik kanan di mana saja pada halaman di dalam panel browser dan pilih Inspect. DevTools terbuka dengan tab Elements yang fokus pada elemen yang Anda klik kanan.

Apa Saja yang Tersedia

Seluruh toolset DevTools tersedia:

• Elements — inspeksi dan modifikasi HTML dan CSS dari elemen mana pun di halaman. Klik elemen di tree untuk highlight di browser, atau klik elemen di halaman untuk menemukannya di tree. Edit style inline untuk mencoba perubahan tanpa menyentuh file sumber.
• Console — lihat output console.log, error JavaScript, dan warning. Jalankan ekspresi JavaScript langsung di console untuk menguji sesuatu tanpa mengedit file.
• Network — monitor setiap HTTP request yang dibuat aplikasi Anda. Lihat request header, response body, timing, dan status code. Berguna untuk memastikan API call dikirim dengan benar dan response terlihat sesuai.
• Sources — telusuri JavaScript dengan breakpoint. Set breakpoint, picu aksi di browser, dan eksekusi berhenti sehingga Anda bisa inspeksi nilai variabel.
• Application — inspeksi local storage, session storage, cookies, dan IndexedDB. Berguna untuk debugging state autentikasi atau apa pun yang disimpan di browser.

Skenario Debugging Umum

Mengecek apa yang dibangun AI agent: Buka panel Elements dan jelajahi struktur HTML. Ini memberi tahu Anda apakah agent merangkai semuanya dengan benar — nama class yang tepat, nesting yang benar, dan atribut yang sesuai.

Menemukan error JavaScript: Buka Console sebelum memuat halaman. Error yang tidak tertangkap muncul di sini dengan nama file dan nomor baris. Bagikan pesan error ke AI agent Anda agar bisa memperbaiki akar masalahnya.

Debugging API call: Buka tab Network dan klik aksi di aplikasi Anda yang memicu request (seperti mengklik tombol login). Request muncul di daftar. Klik untuk melihat request dan response lengkap — berguna untuk mendiagnosis masalah autentikasi atau request body yang salah format.

Tip: Biarkan tab Console terbuka saat AI agent membuat perubahan. Error muncul di sini sebelum terlihat di halaman, memberi Anda feedback lebih awal tentang apa yang perlu diperbaiki.