Cập nhật sản phẩm: Bảng điều khiển trình duyệt thời gian thực hoàn toàn mới đã hoạt động.

Trước đây, khi người dùng chạy trình duyệt trong Playground hoặc Sessions, họ không thể truy cập thông tin gỡ lỗi quan trọng như Console của trình duyệt, hoạt động mạng, thay đổi DOM hoặc theo dõi sự kiện. Ví dụ:

• Muốn xem thông báo lỗi? Bạn phải mở DevTools thủ công.
• Muốn kiểm tra nhật ký console? Không thể.
• Cần khôi phục một phiên trước đó? Tầm nhìn rất hạn chế.

Để giải quyết những nhu cầu gỡ lỗi này, chúng tôi hào hứng giới thiệu các tính năng Browser Console và Log Replay. Những tính năng này cho phép bạn theo dõi trạng thái trình duyệt theo thời gian thực — giống như phát triển cục bộ — khi sử dụng Scrapeless Playground hoặc xem lại Replay Sessions. Bạn sẽ có cái nhìn đầy đủ và trực quan về cách mà trình duyệt của bạn hoạt động, bao gồm nhật ký console, sự kiện mạng và cập nhật DOM.

---

Tính năng này có thể làm gì?

Console Thời Gian Thực trong Playground

Xem đầu ra console, nhật ký gỡ lỗi và thông báo lỗi trực tiếp trên trang trong khi kịch bản của bạn đang chạy — không cần mở DevTools của trình duyệt riêng biệt.

Xem Console trong Replay Sessions

Khi xem lại các phiên lịch sử, bạn có thể kiểm tra Console, Network, và Elements theo trang và theo hành động.

Cuối mỗi phiên, một tin nhắn mới xuất hiện:
"Phiên đã lưu thành công. Xem Phiên"

Nhấp vào đó đưa bạn ngay đến chi tiết phiên để gỡ lỗi và xem nhanh.

Chế độ Gỡ Lỗi Đa Tab

Một giao diện duy nhất hỗ trợ các tab Console / Network / Elements với việc chuyển đổi liền mạch — mang đến cho bạn bức tranh đầy đủ về hành vi của trang từ nhiều góc độ khác nhau.

---

Cho dù bạn đang:

• Gỡ lỗi một kịch bản lần đầu
• Xem lại và phân tích một vấn đề sản xuất
• Hợp tác với các đồng đội để truy trace một vấn đề

Bạn giờ đây có thể nhanh chóng xác định nguyên nhân gốc rễ và giảm thiểu khối lượng giao tiếp không cần thiết.

---

Các Cải Tiến Trong Cập Nhật Này Là Gì?

Playground: Console Thời Gian Thực để Gỡ Lỗi Liền Mạch

Với cập nhật này, mỗi lần bạn nhấp vào Chạy trong Playground, bạn không chỉ khởi động một phiên trình duyệt — mà bạn còn kích hoạt giám sát Console thời gian thực.

Cho dù đó là đầu ra nhật ký, thông báo lỗi, hay thông tin gỡ lỗi, mọi thứ giờ đây đều rõ ràng nhìn thấy ở một nơi.

Cải Tiến Chính:

• Tồn Tại Phiên
  Tất cả nhật ký được lưu lại sau khi thực thi và liên kết với lịch sử phiên — bạn có thể phát lại bất cứ lúc nào.

• Bố Trí Linh Hoạt
  Bảng Console giờ đây được hiển thị bên cạnh DOM, Network, và Events, với việc chuyển đổi tab dễ dàng cho một trải nghiệm gỡ lỗi hoàn chỉnh.

• Nhật Ký Tự Động Làm Mới
  Không cần làm mới thủ công — nhật ký cuộn và cập nhật theo thời gian thực khi kịch bản của bạn chạy.

---

Sessions: Replay Nhật Ký Console / DOM / Network / Events

Đó không chỉ là Playground — Session Replay cũng đã được nâng cấp. Bạn có thể hoàn toàn xem lại và truy trace các hoạt động trình duyệt chính được ghi lại trong mỗi phiên:

• Console: Tất cả nhật ký trình duyệt được tạo trong quá trình phát lại phiên
• DOM: Các thay đổi cấu trúc của trang theo thời gian
• Network: Tất cả các yêu cầu, phản hồi và chi tiết tải tài nguyên
• Events: Tương tác của người dùng và các sự kiện do hệ thống kích hoạt

Cải tiến này giúp dễ dàng chẩn đoán các vấn đề sau khi chạy, kiểm tra hành vi tự động hóa hoặc chia sẻ thông tin với nhóm của bạn.

---

Điểm Nổi Bật của Tính Năng

• Hỗ Trợ Đa Trang
  Dễ dàng chuyển đổi giữa các URL khác nhau trong một phiên để xem nhật ký tương ứng.

• Tối Ưu Tải Chậm
  Dữ liệu nhật ký chỉ được tải khi bảng tương ứng được truy cập, giảm thiểu yêu cầu không cần thiết và cải thiện hiệu suất.

• Trạng Thái Rỗng Thân Thiện
  Khi không có nhật ký nào được ghi lại, những thông điệp rõ ràng và thông tin sẽ được hiển thị để chỉ ra trạng thái.

---

Mới: Xem Toàn Màn Hình & Chia Sẻ URL Trực Tiếp Một Nhấp Chuột

Hai cải tiến về khả năng sử dụng lớn để nâng cao sự cộng tác và gỡ lỗi:

Chế Độ Toàn Màn Hình

Cả Playground và Sessions giờ đã hỗ trợ chế độ xem toàn màn hình, mang đến cho bạn nhiều không gian hơn để xem trước, kiểm tra và gỡ lỗi với sự tập trung.

Chia Sẻ URL Trực Tiếp Một Nhấp Chuột

Bạn giờ đây có thể ngay lập tức sao chép URL Trực Tiếp của bất kỳ Playground hoặc Live Session nào chỉ với một nhấp chuột — làm cho việc chia sẻ với đồng nghiệp hoặc khách hàng trở nên dễ dàng, không cần đăng nhập hay cấu hình thêm.

---

Demo Tính Năng

Mạng – Chẩn Đoán Các Vấn Đề Tải Trang và Yêu Cầu

Trong bảng Network (tương tự như DevTools), bạn có thể quan sát rõ ràng thời gian tải và loại tài nguyên cho mỗi yêu cầu. Một số nút cổ chai hiệu suất phổ biến bao gồm:

• Tập Tin Hình Ảnh Lớn: Hình ảnh độ phân giải cao mà không được nén có thể làm chậm đáng kể thời gian tải trang.
• Lỗi Kịch Bản Bên Thứ Ba: Các yêu cầu JS của plugin không thành công có thể chặn việc kết xuất trang quan trọng.
• Quá Nhiều Tệp Nhỏ: Hàng trăm yêu cầu nhỏ có thể làm cho hàng đợi yêu cầu của trình duyệt bị quá tải và gây ra sự chậm trễ.

Bằng cách phân tích dữ liệu này, bạn có thể nhanh chóng xác định và tối ưu hóa các tài nguyên quan trọng để cải thiện đáng kể hiệu suất trang tổng thể.

---

Việc theo dõi mã trạng thái phản hồi giúp bạn nhanh chóng xác định nguyên nhân gốc rễ của các vấn đề:

• 404 Không Tìm Thấy: Điểm cuối API không chính xác - có thể do đường dẫn bị sai hoặc viết sai chính tả.
• 500 Lỗi Máy Chủ Nội Bộ: Máy chủ phụ đã gặp phải lỗi - kiểm tra nhật ký máy chủ để biết thêm chi tiết.
• 400 Yêu Cầu Không Hợp Lệ: Các tham số yêu cầu không đáp ứng định dạng hoặc cấu trúc mà API mong đợi.

Panel Mạng cung cấp cái nhìn rõ ràng về dữ liệu yêu cầu, nội dung phản hồi và thông báo lỗi - biến nó thành công cụ thiết yếu để chẩn đoán các vấn đề liên quan đến API.

Phần Tử: Kiểm Tra Cấu Trúc Trang Thực Tế

Panel Phần Tử cho phép bạn xem trực tiếp cấu trúc HTML và các kiểu CSS liên quan của trang hiện tại.

Bạn có thể:

• Kiểm tra xem một phần tử cụ thể đã được hiển thị thành công chưa
• Thay đổi kiểu thời gian thực để xác minh hiệu ứng bố cục hoặc tương tác
• Kiểm tra các phần tử ẩn hoặc các thành phần được tải động trong DOM

Đây thường là bước đầu tiên trong việc chẩn đoán các vấn đề như "tại sao một phần tử không hiển thị" hoặc các lỗi liên quan đến bố cục.

Bảng Điều Khiển: Gỡ Lỗi & Xem Nhật Ký Lỗi

Bằng cách chèn các câu lệnh console.log() vào mã của bạn, bạn có thể:

• Xuất giá trị biến và trạng thái thời gian chạy
• Theo dõi thứ tự gọi hàm
• Nhanh chóng xác định lỗi logic

Điều này đặc biệt có giá trị khi gỡ lỗi các kịch bản tự động hóa hoặc logic kinh doanh phức tạp.

Ai Là Người Dùng Tính Năng Này?

• Đội QA: Gỡ lỗi các kịch bản tự động hóa và xác minh xem các tương tác UI có hoạt động như mong đợi không
• Đội Kỹ Thuật: Phát triển và khắc phục sự cố các quy trình duyệt phức tạp, nhanh chóng xác định các hành vi bất thường
• Vận Hành SaaS: Giám sát hành vi giao diện phía người dùng để tối ưu hóa các lối đi chuyển đổi và trải nghiệm tổng thể
• Hỗ Trợ Kỹ Thuật: Tái hiện hành động của người dùng từ xa để nhanh chóng xác định và giải quyết các vấn đề

👉 Mở Playground ngay bây giờ và bắt đầu phiên gỡ lỗi thời gian thực đầu tiên của bạn.