Embedded Browser — Ringkasan

Preview aplikasi yang berjalan di dalam 1DevTool — tidak perlu pindah ke Chrome.

Embedded browser adalah webview Chromium lengkap yang terpasang di 1DevTool sebagai panel yang bisa di-dock. Anda bisa menjalankan development server di terminal dan melihat aplikasi di panel browser — keduanya terlihat bersamaan, di jendela yang sama. Tidak perlu lagi Alt-Tab atau Cmd-Tab antara terminal dan Chrome.

Mengapa Ini Penting

Loop development tipikal tanpa embedded browser terlihat seperti ini: edit kode, pindah ke terminal, jalankan server, pindah ke Chrome, reload halaman, lihat ada yang rusak, kembali ke terminal, dan ulangi. Setiap context switch memakan waktu dan memecah fokus.

Dengan panel embedded browser, loop menjadi: edit kode, pantau terminal, lihat sekilas panel browser. Semua terlihat sekaligus. Saat AI agent membangun fitur untuk Anda, Anda bisa melihatnya menulis kode di terminal dan melihat hasilnya muncul di panel browser tanpa menyentuh keyboard.

Apa yang Didukung Embedded Browser

Panel browser menggunakan engine Chromium asli, jadi perilakunya persis seperti Chrome:

  • JavaScript — berjalan penuh, termasuk fitur ES2020+ modern
  • Local storage dan cookies — persist antar page load, sehingga session login dan preferensi berfungsi
  • WebSockets — live-reload dan hot module replacement (HMR) bekerja seperti yang diharapkan dengan dev server seperti Vite dan Next.js
  • CSS dan animasi — merender semuanya persis seperti browser

Ini bukan preview engine yang disederhanakan. Jika aplikasi Anda bekerja di Chrome, itu juga bekerja di panel embedded browser.

Cara Membuka Panel Browser

Klik ikon Browser di toolbar panel di bagian atas area panel mana pun. Panel browser terbuka dan menampilkan address bar di bagian atas. Ketik URL dan tekan Enter untuk navigasi.

Alternatifnya, gunakan menu Add Panel untuk menambahkan browser ke area mana pun di layout workspace Anda.

Embedded browser panel

Penempatan di Layout Anda

Panel browser bisa ditempatkan di mana saja di workspace Anda. Layout umum:

  • Berdampingan dengan terminal — terminal di kiri, browser di kanan. Cocok untuk menonton AI agent membangun UI secara real time.
  • Panel bawah — browser di bawah terminal. Memberikan lebih banyak ruang vertikal ke editor dan terminal sambil tetap menjaga browser tetap terjangkau.
  • Panel floating — drag panel browser keluar untuk membuatnya mengambang sebagai overlay terpisah di atas workspace Anda.

Ubah ukuran panel apa pun dengan menarik divider antar panel. Buat browser lebar untuk membaca, atau sempit untuk mengecek responsive behavior dengan cepat.