Troubleshooting: Browser

Perbaiki masalah umum dengan panel embedded browser.

Aplikasi Localhost Tidak Mau Dimuat

Gejala: Anda menavigasi ke http://localhost:3000 di panel browser tapi melihat error koneksi atau halaman kosong.

Perbaikan:

  • Pastikan dev server Anda benar-benar berjalan. Cek terminal — cari pesan startup (misalnya, ready on http://localhost:3000 dari Next.js, atau Local: http://localhost:5173/ dari Vite). Jika server tidak berjalan, mulai dengan command biasa Anda (npm run dev, yarn dev, dll.).
  • Coba 127.0.0.1 alih-alih localhost. Beberapa sistem resolve localhost berbeda dari yang diharapkan. Ganti localhost dengan 127.0.0.1 di URL bar — misalnya, http://127.0.0.1:3000.
  • Header Content-Security-Policy. Jika aplikasi Anda set header CSP ketat yang mencegah embedding di webview, panel browser akan menolak menampilkannya. Di mode development, Anda bisa melonggarkan header ini. Misalnya, di Next.js Anda bisa menghapus atau melonggarkan direktif frame-ancestors di next.config.js Anda untuk dev lokal saja.

Tinggi Panel Browser Collapse

Gejala: panel browser menyusut menjadi strip tipis dan Anda tidak bisa melihat aplikasi Anda.

Perbaikan: drag panel divider (bar tipis antara panel browser dan panel di atas atau di bawahnya) untuk resize browser. Klik dan drag ke atas untuk memberi browser lebih banyak ruang vertikal.

Jika Anda ingin browser mengambil ruang sebanyak mungkin, gunakan mode fullscreen: tekan Cmd+Shift+F (atau Ctrl+Shift+F di Windows/Linux) untuk memperluas panel browser mengisi jendela. Tekan shortcut yang sama untuk kembali ke layout normal.

Video atau Audio Tidak Diputar

Panel embedded browser tidak mendukung semua codec media. Format video tertentu atau stream audio mungkin gagal diputar di dalam panel.

Perbaikan: klik kanan di mana saja di panel browser dan pilih Open in External Browser. Ini membuka URL saat ini di browser default sistem Anda (Safari, Chrome, Firefox, dll.), yang memiliki dukungan codec penuh. Gunakan ini untuk halaman yang berat media, video player, atau apa pun yang memerlukan plugin browser.

Halaman Menampilkan Layar Kosong / Putih

Layar putih kosong biasanya berarti halaman dimuat tapi ada yang salah di JavaScript sebelum konten apa pun bisa ditampilkan.

Perbaikan:

  1. Klik tombol DevTools di toolbar panel browser (ikon wrench atau </>).
  2. Buka tab Console.
  3. Cari pesan error merah.

Penyebab paling umum untuk development lokal adalah error CORS — frontend Anda membuat request ke API lokal, dan API menolaknya karena request berasal dari origin webview alih-alih localhost. Untuk memperbaiki ini di development, konfigurasi server API Anda untuk mengizinkan semua origin:

  • Express / Node: tambahkan app.use(cors()) dengan package cors.
  • FastAPI: tambahkan CORSMiddleware dengan allow_origins=["*"] untuk dev.
  • Next.js API routes: tambahkan Access-Control-Allow-Origin: * ke response header di route handler Anda.

Ingat untuk membatasi origin lagi sebelum deploy ke production.