Preview App Local Của Bạn

Cách dùng phổ biến nhất của trình duyệt nhúng là preview app của bạn khi đang chạy local. Đây là cách đi từ con số 0 đến một app đang chạy hiển thị trong workspace của bạn.

Hướng Dẫn Từng Bước

Bước 1: Khởi động dev server trong terminal.

Mở terminal trong 1DevTool và khởi động development server. Lệnh phụ thuộc vào tech stack của bạn:

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

Chờ server output URL local của nó — thường là http://localhost:3000, http://localhost:8000, hoặc http://localhost:8080.

Bước 2: Mở panel Browser.

Click vào icon Browser trong thanh công cụ panel, hoặc mở từ menu Add Panel. Panel trình duyệt sẽ hiện ra với thanh địa chỉ trống.

Bước 3: Điều hướng đến URL local của bạn.

Click vào thanh địa chỉ, nhập URL mà dev server đang chạy (ví dụ http://localhost:3000), và nhấn Enter. App của bạn sẽ load trong panel.

Bước 4: Refresh khi cần.

Nhấn Cmd+R (macOS) hoặc Ctrl+R (Windows/Linux) để reload trang. Nếu dev server của bạn hỗ trợ hot module replacement (HMR) — như Vite hoặc Next.js — trang sẽ tự động cập nhật khi file thay đổi, không cần refresh thủ công.

Bước 5: Resize để test layout.

Kéo divider panel để làm cho panel trình duyệt hẹp hơn hoặc rộng hơn. Đây là cách nhanh để xem app của bạn trông như thế nào ở các độ rộng khác nhau mà không cần thiết lập công cụ responsive testing riêng.

Test Responsive Layouts

Kéo divider panel để thu hẹp trình duyệt và kiểm tra mobile layout của bạn. Để test responsive chính xác hơn, 1DevTool tích hợp Mobile Simulator: click icon điện thoại trong header panel trình duyệt để preview app của bạn ở các mobile breakpoint tiêu chuẩn (375px cho iPhone, 768px cho tablet, v.v.).

Mobile Simulator cũng cho phép bạn chuyển đổi orientation thiết bị giữa portrait và landscape, để bạn xác minh layout hoạt động ở cả hai chế độ mà không cần thiết bị vật lý.

Dùng Với AI Agents

Trình duyệt nhúng thực sự tỏa sáng khi làm việc cùng AI agents. Đây là workflow loại bỏ gần như toàn bộ việc chuyển context:

1. Mở terminal Claude Code và giao nhiệm vụ: "Xây trang login với form validate email và password."
2. Quan sát terminal khi Claude viết code.
3. Khi Claude báo xong, nhấn Cmd+R trong panel trình duyệt để reload.
4. Trang login hiện ra trong panel. Nếu có gì đó sai, mô tả cho Claude mà không cần chuyển app: "Nút submit quá gần trường password, thêm khoảng cách."
5. Claude sửa. Reload. Lặp lại.

Vòng lặp này — code trong terminal, xác minh trong trình duyệt, mô tả fix — nhanh hơn nhiều so với việc chuyển đổi giữa cửa sổ terminal, code editor, và tab trình duyệt.

Mẹo: Đặt panel trình duyệt và terminal cạnh nhau để bạn có thể quan sát agent làm việc và thấy kết quả ngay lập tức. Với các project có hot reload, bạn thậm chí không cần nhấn refresh.