[google-chrome] Chrome에서 WebSocket 디버깅

Chrome Canary 및 Chromium에는 이제 WebSocket 메시지 프레임 검사 기능이 있습니다. 다음은 빠르게 테스트하는 단계입니다.

1. websocket.org 사이트 에서 호스팅되는 WebSocket Echo 데모로 이동 하십시오.
2. Chrome 개발자 도구를 켭니다.
3. 네트워크를 클릭 하고 개발 도구가 표시하는 트래픽을 필터링하려면 웹 소켓을 클릭하십시오 .
4. 에코 데모에서 연결을 클릭 하십시오 . Google 개발자 도구의 헤더 탭에서 WebSocket 핸드 셰이크를 검사 할 수 있습니다.
5. 에코 데모에서 보내기 버튼을 클릭하십시오.
6. 이 단계는 중요합니다 . Chrome 개발자 도구에서 WebSocket 프레임을 보려면 이름 / 경로 아래에서 WebSocket 연결을 나타내는 echo.websocket.org 항목을 클릭하십시오. 그러면 오른쪽의 기본 패널이 새로 고쳐지고 WebSocket 프레임 탭이 실제 WebSocket 메시지 내용과 함께 표시됩니다.

참고 : 새 메시지를 보내거나받을 때마다 왼쪽의 echo.websocket.org 항목을 클릭하여 메인 패널을 새로 고쳐야합니다.

나는 또한 게시 스크린 샷과 비디오로 단계를 .

필자가 최근에 출판 한 책인 HTML5 WebSocket에 대한 최종 안내서 에는 Chrome Dev Tools, Chrome net-internals 및 Wire Shark를 포함한 다양한 검사 도구에 대한 부록이 있습니다.

답변

var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }

chrome://net-internals/#sockets