Preview Aplikasi Lokal Anda

Penggunaan paling umum dari embedded browser adalah preview aplikasi saat berjalan secara lokal. Berikut cara mulai dari nol hingga aplikasi berjalan terlihat di workspace Anda.

Setup Langkah demi Langkah

Langkah 1: Mulai dev server di terminal.

Buka terminal di 1DevTool dan mulai development server Anda. Command bergantung pada tech stack Anda:

• React / Next.js / Vite: npm run dev
• Django: python manage.py runserver
• Rails: rails server
• Rust (dengan web framework): cargo run
• Go: go run main.go

Tunggu server mengeluarkan URL lokalnya — biasanya sesuatu seperti http://localhost:3000, http://localhost:8000, atau http://localhost:8080.

Langkah 2: Buka panel Browser.

Klik ikon Browser di toolbar panel, atau buka dari menu Add Panel. Panel browser muncul dengan address bar kosong.

Langkah 3: Navigasi ke URL lokal Anda.

Klik address bar, ketik URL tempat dev server Anda berjalan (misalnya http://localhost:3000), dan tekan Enter. Aplikasi Anda dimuat di panel.

Langkah 4: Refresh saat diperlukan.

Tekan Cmd+R (macOS) atau Ctrl+R (Windows/Linux) untuk reload halaman. Jika dev server Anda mendukung hot module replacement (HMR) — seperti Vite atau Next.js — halaman update otomatis saat file berubah, tanpa perlu refresh manual.

Langkah 5: Resize untuk test layout.

Drag divider panel untuk membuat panel browser lebih sempit atau lebih lebar. Ini cara cepat untuk melihat bagaimana aplikasi Anda terlihat di lebar berbeda tanpa setup tool responsive testing terpisah.

Test Layout Responsive

Drag divider panel untuk membuat browser sempit dan cek layout mobile Anda. Untuk testing responsive yang lebih presisi, 1DevTool menyertakan Mobile Simulator: klik ikon telepon di header panel browser untuk preview aplikasi di breakpoint mobile standar (375px untuk iPhone, 768px untuk tablet, dll.).

Mobile Simulator juga memungkinkan Anda toggle orientasi device antara portrait dan landscape, sehingga Anda bisa memverifikasi layout bekerja di kedua mode tanpa device fisik.

Gunakan dengan AI Agent

Embedded browser benar-benar bersinar saat bekerja bersama AI agent. Berikut workflow yang menghilangkan hampir semua context switching:

1. Buka terminal Claude Code dan berikan tugas: "Buat halaman login dengan form yang memvalidasi field email dan password."
2. Pantau terminal saat Claude menulis kode.
3. Saat Claude melaporkan selesai, tekan Cmd+R di panel browser untuk reload.
4. Halaman login muncul di panel. Jika ada yang terlihat salah, jelaskan ke Claude tanpa pindah aplikasi: "Tombol submit terlalu dekat dengan field password, tambahkan spacing."
5. Claude memperbaikinya. Reload. Ulangi.

Loop ini — kode di terminal, verifikasi di browser, jelaskan perbaikan — jauh lebih cepat daripada berpindah antara jendela terminal, code editor, dan tab browser.

Tip: Posisikan panel browser dan terminal berdampingan sehingga Anda bisa melihat agent bekerja dan melihat hasilnya sekilas. Untuk project dengan hot reload, Anda bahkan tidak perlu menekan refresh.