Kiểm Tra WebSocket ghi lại mọi khung WebSocket — gửi đi và nhận về — trên tất cả kết nối của trang. Hiển thị vòng đời kết nối (connecting/open/closed kèm mã đóng), hướng của từng khung, kích thước, cờ nhị phân, và bản xem trước, với payload JSON được định dạng đẹp mắt. Lấp đầy một khoảng trống thực sự của DevTools trong việc gỡ lỗi giao thức thời gian thực.
WebSocket là nền tảng cho các ứng dụng chat, bảng điều khiển trực tiếp, GraphQL subscription, game nhiều người chơi, và trình soạn thảo cộng tác — nhưng gỡ lỗi chúng lại rất khó chịu. Chrome DevTools có hiển thị khung WebSocket, nhưng giao diện cồng kềnh và khả năng lọc hạn chế. Kiểm Tra WebSocket mang đến một giao diện gọn gàng, được thiết kế chuyên biệt. Công cụ cài đặt một lớp bọc quanh hàm khởi tạo WebSocket gốc trong ngữ cảnh trang, nên mọi lệnh new WebSocket() đều bị chặn lại. Mỗi kết nối xuất hiện trong danh sách kèm URL, trạng thái (connecting → open → closed), thời lượng, và mã đóng khi ngắt kết nối. Mọi khung — gửi đi và nhận về — đều được ghi lại kèm dấu thời gian, hướng, kích thước, cờ nhị phân, và bản xem trước. Nhấp vào bất kỳ khung nào để xem toàn bộ payload, tự động định dạng đẹp nếu là JSON. Lọc theo hướng (gửi / nhận), chỉ nhị phân, hoặc theo kết nối cụ thể. Vì lớp bọc chỉ được cài đặt khi công cụ kích hoạt, bạn nên tải lại trang để bắt được các kết nối đã tồn tại — các kết nối mới sẽ được ghi lại ngay từ lúc bạn mở công cụ.
Hiển thị mọi WebSocket kèm trạng thái (connecting/open/closed), URL, thời lượng, mã đóng và lý do đóng nếu có.
Cả khung gửi đi (↑) và nhận về (↓) đều được hiển thị kèm dấu thời gian, kích thước, cờ nhị phân, và bản xem trước ngay trong dòng.
Nhấp vào một khung để xem toàn bộ payload. Chuỗi JSON tự động định dạng với thụt lề 2 khoảng trắng để dễ kiểm tra.
Lọc khung chỉ hiện gửi đi, chỉ nhận về, hoặc chỉ nhị phân — tập trung vào đúng thứ bạn đang gỡ lỗi.
Nhấp vào một kết nối để lọc khung chỉ thuộc kết nối đó — hữu ích khi nhiều WebSocket đang hoạt động cùng lúc (ví dụ: chat + presence).
Bất kỳ WebSocket nào mở sau khi công cụ kích hoạt đều được ghi lại ngay lập tức. Chỉ cần tải lại để bắt các kết nối đã tồn tại từ trước.
Xem chính xác những tin nhắn nào được gửi và nhận giữa client và server — xác định chính xác nơi việc gửi tin bị lỗi.
Kiểm tra các thao tác subscription và dữ liệu đẩy về để gỡ lỗi payload không khớp hoặc lỗi hủy đăng ký.
Hiểu cách một API thời gian thực bên thứ ba hoạt động bằng cách quan sát cấu trúc và thời điểm của các thông điệp.
Xác minh các khung giữ kết nối được gửi đúng khoảng thời gian dự kiến — một lần ping bị bỏ lỡ có thể lý giải cho việc ngắt kết nối bất ngờ.
Theo dõi sự kiện đóng (kèm mã và lý do) cùng các lần thử kết nối mới tiếp theo để gỡ lỗi các lỗi retry/reconnect.
Nhấp vào biểu tượng WebSocket trên dock của DevSuite Pro. Công cụ kích hoạt và một bảng điều khiển mở ra hiển thị kết nối và khung.
Các WebSocket được mở TRƯỚC khi công cụ kích hoạt sẽ không được ghi lại. Tải lại trang để tạo lại chúng và chặn ngay từ đầu.
Khi trang mở các WebSocket, chúng sẽ hiện trong danh sách Connections với cập nhật trạng thái theo thời gian thực.
Mọi khung được ghi lại theo thời gian thực. Lọc theo hướng hoặc nhấp vào một kết nối để thu hẹp danh sách.
Nhấp vào bất kỳ khung nào để xem toàn bộ payload (định dạng JSON đẹp mắt nếu có) cùng dấu thời gian, kích thước, và cờ nhị phân.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 64 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
