Browser Previews: Lấy Context Trực tiếp từ Trình duyệt

Browser Previews là một tính năng đột phá, cho phép Agentic IDE "nhìn" và tương tác trực tiếp với nội dung trên trình duyệt của bạn. Thay vì chỉ dựa vào mã nguồn, Agent có thể thu thập context phong phú từ giao diện người dùng đang chạy, giúp nó hiểu rõ hơn về các vấn đề frontend và gỡ lỗi một cách hiệu quả.

Đây là một cách mạnh mẽ để kết nối những gì đang xảy ra trên màn hình của người dùng với codebase tương ứng.

Tình trạng tính năng

Đây là một tính năng rất hứa hẹn và đang trong giai đoạn phát triển. Một số Agentic IDE như Windsurf đã có phiên bản beta chính thức.

Đối với các IDE khác như Cursor, tính năng tương tự có thể được cung cấp thông qua các extension do cộng đồng phát triển. Rất có thể trong tương lai gần, đây sẽ trở thành một tính năng tiêu chuẩn trong hầu hết các Agentic IDE.

Các loại context có thể thu thập

Tính năng này cho phép bạn gửi các loại context sau từ trình duyệt đến Agent:

1. Context từ Element (HTML)

Bạn có thể chọn một hoặc nhiều element trên trang web và gửi cấu trúc HTML của chúng vào context.

• Trường hợp sử dụng:
  • Gỡ lỗi các vấn đề về layout CSS.
  • Yêu cầu Agent viết lại hoặc tái cấu trúc một thành phần giao diện.
  • Phân tích cấu trúc DOM để tìm ra các vấn đề về hiệu suất hoặc khả năng truy cập (accessibility).

2. Console Error Logs (Lỗi Console)

Khi gặp lỗi JavaScript trên trình duyệt, bạn có thể gửi trực tiếp các log lỗi từ console đến Agent.

• Trường hợp sử dụng:
  • Nhanh chóng xác định nguyên nhân của các lỗi runtime.
  • Cung cấp cho Agent đầy đủ thông tin (stack trace, thông điệp lỗi) để nó có thể đề xuất giải pháp.
  • Gỡ lỗi các vấn đề liên quan đến tương tác người dùng không hoạt động như mong đợi.

3. Capture Image (Chụp ảnh màn hình)

Bạn có thể chụp ảnh một phần hoặc toàn bộ trang web và gửi hình ảnh đó vào context. Agent có khả năng phân tích hình ảnh để hiểu về thiết kế và layout.

• Trường hợp sử dụng:
  • Yêu cầu Agent viết code CSS để tái tạo một thiết kế từ hình ảnh.
  • Báo cáo các lỗi hiển thị (visual bugs) mà khó mô tả bằng lời.
  • So sánh thiết kế hiện tại với một bản mockup.

Lợi ích của Browser Previews

• Context chính xác: Cung cấp cho AI "bằng chứng sống" về vấn đề thay vì chỉ mô tả bằng lời.
• Gỡ lỗi nhanh hơn: Giảm đáng kể thời gian tìm kiếm và tái tạo lỗi.
• Tương tác trực quan: Cho phép bạn chỉ vào vấn đề trên giao diện và nói "sửa cái này".
• Cải thiện giao tiếp: Giúp AI và lập trình viên có cùng một cái nhìn về vấn đề, giảm thiểu hiểu lầm.

Để minh họa rõ hơn, video sau đây cho thấy cách tính năng này hoạt động trong thực tế:

Bằng cách tích hợp context từ trình duyệt, Browser Previews đã mở ra một kênh giao tiếp mới, mạnh mẽ và trực quan giữa lập trình viên và AI.