Ghi lại phiên trình duyệt, xuất báo cáo cho AI

TL;DR

Tool này ghi lại toàn bộ những gì bạn làm trên trình duyệt — click, gõ text, scroll, lỗi console, request mạng — rồi export ra file mà AI đọc được. Giúp bạn share “context” cho AI agent hiểu bug đang gặp mà không cần giải thích bằng lời.

→ Dành cho: Dev muốn AI giúp debug, hoặc build AI agent cần understand user flow.

Bài này dành cho ai?

1. Dev muốn AI giúp debug nhanh hơn

Vấn đề: Diễn tả bug cho AI hiểu bằng lời rất mệt, thiếu context Khi nào cần: Gặp lỗi lạ, muốn AI agent reproduce được bug đó Được gì: Export một cái file, AI đọc hiểu toàn bộ user flow và lỗi

2. Người build AI coding agent

Vấn đề: Agent thiếu context về trạng thái trình duyệt, không biết user đã click gì Khi nào cần: Cần thu thập browser context để agent hiểu user đang làm gì Được gì: Structured data về DOM events, console, network — sẵn sàng cho AI xử lý

Các điểm chính

1. Ghi lại toàn bộ session duyệt web Mọi click, gõ input, scroll, form submit đều được timestamp. Console error, network request fail cũng ghi lại kèm stack trace. → Làm gì: Bấm nút Record hoặc Cmd+Shift+R, làm thao tác gặp bug, bấm Stop.

2. Chụp và chú thích screenshot Bấm Cmd+Shift+S để chụp màn hình. Có tool vẽ rectangle, mũi tên, text, crop ngay trên extension. → Làm gì: Dùng để highlight element gây lỗi, AI nhìn hình sẽ hiểu nhanh hơn.

3. 3 format export: Markdown, JSON, TOON Markdown để paste vào chat. JSON cho CI/CD pipeline. TOON là format tối ưu token — giảm chi phí khi feed cho LLM. → Làm gì: Nếu xài ChatGPT/Claude, dùng Markdown. Nếu build automation, dùng JSON.

4. Tự động che sensitive data Extension tự strip Bearer token, API key, password trước khi lưu. Không lo leak credentials khi share report. → Làm gì: Yên tâm export report công khai mà không mất mật khẩu.

5. Không dependencies bên ngoài ZIP builder, TOON encoder đều tự viết sẵn trong extension. Load nhẹ, không phụ thuộc external library. → Làm gì: Cài xong là chạy, không cần npm install gì hết.

6. Keyboard shortcuts tiện lợi Cmd+Shift+R để toggle recording, Cmd+Shift+S để chụp màn hình. Không cần mở popup. → Làm gì: Thuần thục shortcuts để record nhanh khi gặp bug bất ngờ.

Quick Start

1. Cài đặt:

   • Tải release mới nhất về, giải nén
   • Mở chrome://extensions → bật Developer mode → Load unpacked → chọn folder vừa giải nén
   • Pin extension lên toolbar

2. Sử dụng:

   • Bấm extension icon → Start Recording (hoặc Cmd+Shift+R)
   • Làm thao tác trên web bình thường
   • Bấm Cmd+Shift+S nếu cần chụp screenshot
   • Stop Recording → chọn format → Copy hoặc tải ZIP