Gỡ lỗi WebSocket trong Google Chrome
Câu trả lời:
Các công cụ dành cho nhà phát triển Chrome hiện có khả năng liệt kê các khung WebSocket và cũng kiểm tra dữ liệu nếu các khung không phải là nhị phân.
Quá trình:
- Khởi chạy công cụ Chrome Developer
- Tải trang của bạn và bắt đầu các kết nối WebSocket
- Nhấp vào tab Mạng .
- Chọn kết nối WebSocket từ danh sách bên trái (nó sẽ có trạng thái "101 Giao thức chuyển đổi".
- Nhấp vào tab phụ Tin nhắn . Các khung nhị phân sẽ hiển thị với độ dài và dấu thời gian và cho biết liệu chúng có bị che hay không. Khung văn bản sẽ hiển thị cũng bao gồm nội dung tải trọng.
Nếu kết nối WebSocket của bạn sử dụng khung nhị phân thì có thể bạn vẫn muốn sử dụng Wireshark để gỡ lỗi kết nối. Wireshark 1.8.0 đã thêm trình phân tích và hỗ trợ lọc cho WebSockets. Một thay thế có thể được tìm thấy trong câu trả lời khác này .
Chrome Canary và Chromium hiện có tính năng kiểm tra khung tin nhắn WebSocket. Dưới đây là các bước để kiểm tra nhanh chóng:
- Điều hướng đến bản demo WebSocket Echo , được lưu trữ trên trang websocket.org .
- Bật Công cụ dành cho nhà phát triển Chrome.
- Bấm Mạng và để lọc lưu lượng được hiển thị bởi Công cụ Dev, bấm WebSockets .
- Trong bản demo Echo, bấm Kết nối . Trên tab Tiêu đề trong Google Dev Tool, bạn có thể kiểm tra bắt tay WebSocket.
- Nhấp vào nút Gửi trong bản demo Echo.
- BƯỚC NÀY QUAN TRỌNG : Để xem các khung WebSocket trong Công cụ dành cho nhà phát triển Chrome, bên dưới Tên / Đường dẫn, hãy nhấp vào mục echo.websocket.org, thể hiện kết nối WebSocket của bạn. Điều này làm mới bảng điều khiển chính ở bên phải và làm cho tab Khung WebSocket hiển thị với nội dung thông báo WebSocket thực tế.
Lưu ý : Mỗi khi bạn gửi hoặc nhận tin nhắn mới, bạn phải làm mới bảng điều khiển chính bằng cách nhấp vào mục echo.websocket.org ở bên trái.
Tôi cũng đăng các bước với ảnh chụp màn hình và video .
Cuốn sách được xuất bản gần đây của tôi, Hướng dẫn dứt khoát về HTML5 WebSocket , cũng có một phụ lục chuyên dụng bao gồm các công cụ kiểm tra khác nhau, bao gồm Chrome Dev Tools, Chrome net-internals và Wire Shark.
Họ dường như liên tục thay đổi công cụ trong Chrome, nhưng đây là những gì hoạt động ngay bây giờ :-)
Trước tiên, bạn phải nhấp vào nút ghi màu đỏ hoặc bạn sẽ không nhận được gì.
Tôi không bao giờ nhận thấy
WStrước đây nhưng nó lọc các kết nối ổ cắm web.Chọn nó và sau đó bạn có thể thấy các khung sẽ hiển thị cho bạn thông báo lỗi, v.v.
Nếu bạn không có trang đang truy cập websocket, bạn có thể mở bảng điều khiển Chrome và nhập JavaScript của mình vào:
var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }
Điều này sẽ mở ra ổ cắm web để bạn có thể nhìn thấy nó trong tab mạng và trong bảng điều khiển.
Các câu trả lời khác bao gồm kịch bản phổ biến nhất: xem nội dung của các khung (Công cụ dành cho nhà phát triển -> tab Mạng -> Nhấp chuột phải vào kết nối websocket -> khung).
Nếu bạn muốn biết thêm một số thông tin, như ổ cắm nào hiện đang mở / không hoạt động hoặc có thể đóng chúng, bạn sẽ thấy url này hữu ích
chrome://net-internals/#sockets
Bạn có 3 tùy chọn: Chrome (thông qua Công cụ dành cho nhà phát triển -> tab Mạng), Wireshark và Fiddler (thông qua tab Nhật ký), tuy nhiên tất cả đều rất cơ bản. Nếu bạn có lưu lượng truy cập rất lớn hoặc mỗi khung hình rất lớn, việc sử dụng chúng để gỡ lỗi sẽ trở nên rất khó khăn.
Tuy nhiên, bạn có thể sử dụng Fiddler với FiddlerScript để kiểm tra lưu lượng truy cập WebSocket giống như cách bạn truy cập lưu lượng HTTP. Một số ưu điểm của giải pháp này là bạn có thể tận dụng nhiều chức năng khác trong Fiddler, chẳng hạn như nhiều trình kiểm tra (HexView, JSON, SyntaxView), so sánh các gói và tìm gói, v.v.
Vui lòng tham khảo bài viết gần đây của tôi về CodeProject, trong đó chỉ cho bạn cách gỡ lỗi / Kiểm tra lưu lượng truy cập WebSocket bằng Fiddler (với FiddlerScript). http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler
Câu trả lời ngắn cho Chrome Phiên bản 29 trở lên:
- Mở trình gỡ lỗi, chuyển đến tab "Mạng"
- Tải trang bằng websocket
- Nhấp vào yêu cầu websocket với phản hồi nâng cấp từ máy chủ
- Chọn tab "Khung" để xem khung websocket
- Nhấp vào yêu cầu websocket một lần nữa để làm mới khung
Các công cụ dành cho nhà phát triển Chrome cho phép xem yêu cầu bắt tay đang chờ xử lý trong khi kết nối được mở, nhưng bạn không thể thấy lưu lượng truy cập theo như tôi biết. Tuy nhiên bạn có thể đánh hơi nó chẳng hạn.
Tôi đã sử dụng tiện ích mở rộng Chrome có tên Simple WebSocket Client v0.1.3 được xuất bản bởi người dùng hakobera. Nó rất đơn giản trong cách sử dụng, nơi nó cho phép mở websockets trên một URL nhất định, gửi tin nhắn và đóng kết nối ổ cắm. Nó rất tối giản.