Trình duyệt nhúng — Tổng quan

Trình duyệt nhúng là một Chromium webview hoàn chỉnh được tích hợp vào 1DevTool dưới dạng panel có thể dock. Bạn có thể chạy development server trong terminal và xem app của mình trong panel trình duyệt — cả hai hiển thị cùng lúc, trong cùng một cửa sổ. Không còn phải Alt-Tab hay Cmd-Tab giữa terminal và Chrome nữa.

Tại Sao Nó Quan Trọng

Vòng lặp phát triển điển hình khi không có trình duyệt nhúng trông như thế này: chỉnh sửa code, chuyển sang terminal, chạy server, chuyển sang Chrome, reload trang, phát hiện lỗi, quay lại terminal, và lặp lại. Mỗi lần chuyển context đều tốn thời gian và phá vỡ sự tập trung.

Với panel trình duyệt nhúng, vòng lặp trở thành: chỉnh sửa code, quan sát terminal, liếc nhìn panel trình duyệt. Mọi thứ đều hiển thị cùng lúc. Khi AI agent đang xây dựng tính năng cho bạn, bạn có thể xem nó code trong terminal và thấy kết quả hiện ra trong panel trình duyệt mà không cần chạm vào bàn phím.

Trình duyệt nhúng hỗ trợ những gì

Panel trình duyệt sử dụng engine Chromium thực sự, nên nó hoạt động giống hệt Chrome:

• JavaScript — chạy đầy đủ, bao gồm cả tính năng ES2020+ hiện đại
• Local storage và cookies — duy trì giữa các lần load trang, nên session login và preferences hoạt động bình thường
• WebSockets — live-reload và hot module replacement (HMR) hoạt động như mong đợi với các dev server như Vite và Next.js
• CSS và animations — render mọi thứ chính xác như một trình duyệt thực sự

Đây không phải là engine preview đơn giản hóa. Nếu app của bạn hoạt động trên Chrome, nó sẽ hoạt động trong panel trình duyệt nhúng.

Cách Mở Panel Trình duyệt

Click vào icon Browser trong thanh công cụ panel ở phía trên cùng của bất kỳ khu vực panel nào. Panel trình duyệt sẽ mở và hiển thị thanh địa chỉ ở phía trên. Nhập URL và nhấn Enter để điều hướng.

Hoặc dùng menu Add Panel để thêm trình duyệt vào bất kỳ khu vực nào trong layout workspace của bạn.

Vị Trí Trong Layout Của Bạn

Panel trình duyệt có thể đặt ở bất kỳ đâu trong workspace. Các layout phổ biến:

• Cạnh nhau với terminal — terminal bên trái, trình duyệt bên phải. Tuyệt vời để xem AI agent xây dựng UI theo thời gian thực.
• Panel dưới cùng — trình duyệt bên dưới terminal. Dành nhiều không gian dọc hơn cho editor và terminal trong khi vẫn giữ trình duyệt dễ truy cập.
• Panel nổi — kéo panel trình duyệt ra ngoài để nó nổi thành một overlay riêng biệt trên workspace của bạn.

Thay đổi kích thước bất kỳ panel nào bằng cách kéo divider giữa các panel. Mở rộng trình duyệt để đọc, hoặc thu hẹp để kiểm tra nhanh responsive behavior.