Chrome에서 WebSocket 디버깅
답변:
Chrome 개발자 도구는 이제 WebSocket 프레임을 나열하고 프레임이 바이너리가 아닌 경우 데이터를 검사 할 수 있습니다.
방법:
- Chrome 개발자 도구 시작
- 페이지를로드하고 WebSocket 연결을 시작하십시오
- 네트워크 탭을 클릭하십시오 .
- 왼쪽의 목록에서 WebSocket 연결 을 선택하십시오 ( "101 스위칭 프로토콜"상태가 됨).
- 메시지 하위 탭을 클릭 하십시오. 이진 프레임은 길이와 타임 스탬프와 함께 표시되며 마스크 여부를 나타냅니다. 텍스트 프레임에는 페이로드 컨텐츠도 포함됩니다.
WebSocket 연결이 이진 프레임을 사용하는 경우 Wireshark를 사용하여 연결을 디버깅 할 수 있습니다. Wireshark 1.8.0 은 WebSockets에 대한 dissector 및 필터링 지원을 추가했습니다. 이 다른 답변 에서 대안을 찾을 수 있습니다 .
Chrome Canary 및 Chromium에는 이제 WebSocket 메시지 프레임 검사 기능이 있습니다. 다음은 빠르게 테스트하는 단계입니다.
- websocket.org 사이트 에서 호스팅되는 WebSocket Echo 데모로 이동 하십시오.
- Chrome 개발자 도구를 켭니다.
- 네트워크를 클릭 하고 개발 도구가 표시하는 트래픽을 필터링하려면 웹 소켓을 클릭하십시오 .
- 에코 데모에서 연결을 클릭 하십시오 . Google 개발자 도구의 헤더 탭에서 WebSocket 핸드 셰이크를 검사 할 수 있습니다.
- 에코 데모에서 보내기 버튼을 클릭하십시오.
- 이 단계는 중요합니다 . Chrome 개발자 도구에서 WebSocket 프레임을 보려면 이름 / 경로 아래에서 WebSocket 연결을 나타내는 echo.websocket.org 항목을 클릭하십시오. 그러면 오른쪽의 기본 패널이 새로 고쳐지고 WebSocket 프레임 탭이 실제 WebSocket 메시지 내용과 함께 표시됩니다.
참고 : 새 메시지를 보내거나받을 때마다 왼쪽의 echo.websocket.org 항목을 클릭하여 메인 패널을 새로 고쳐야합니다.
나는 또한 게시 스크린 샷과 비디오로 단계를 .
필자가 최근에 출판 한 책인 HTML5 WebSocket에 대한 최종 안내서 에는 Chrome Dev Tools, Chrome net-internals 및 Wire Shark를 포함한 다양한 검사 도구에 대한 부록이 있습니다.
Chrome에서 지속적으로 변경되는 것처럼 보이지만 현재 작동하는 내용은 다음과 같습니다. :-)
먼저 빨간색 레코드 버튼을 클릭해야합니다. 그렇지 않으면 아무 것도 얻지 못합니다.
WS이전에는 눈치 채지 못했지만 웹 소켓 연결을 필터링합니다.그것을 선택하면 오류 메시지 등을 표시하는 프레임을 볼 수 있습니다.
웹 소켓에 액세스하는 페이지가없는 경우 Chrome 콘솔을 열고 JavaScript를 다음과 같이 입력 할 수 있습니다.
var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }
그러면 웹 소켓이 열리므로 네트워크 탭과 콘솔에서 웹 소켓을 볼 수 있습니다.
Chrome (개발자 도구-> 네트워크 탭을 통해), Wireshark 및 Fiddler (로그 탭을 통해)의 세 가지 옵션이 있지만 모두 기본입니다. 트래픽이 매우 많거나 각 프레임이 매우 크면 디버깅에 사용하기가 매우 어려워집니다.
그러나 Fiddler를 FiddlerScript와 함께 사용하여 HTTP 트래픽을 감염시키는 것과 같은 방식으로 WebSocket 트래픽을 검사 할 수 있습니다. 이 솔루션의 장점은 여러 검사기 (HexView, JSON, SyntaxView), 패킷 비교 및 패킷 찾기 등과 같은 Fiddler의 다른 많은 기능을 활용할 수 있다는 것입니다.
Fiddler (FiddlerScript 사용)를 사용하여 WebSocket 트래픽을 디버깅 / 검사하는 방법을 보여주는 CodeProject에 대해 최근에 작성한 기사를 참조하십시오. http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler
Chrome 버전 29 이상에 대한 간단한 답변 :
- 디버거를 열고 "네트워크"탭으로 이동
- 웹 소켓으로 페이지로드
- 서버의 업그레이드 응답으로 웹 소켓 요청을 클릭하십시오.
- 웹 소켓 프레임을 보려면 "프레임"탭을 선택하십시오.
- 웹 소켓 요청을 다시 클릭하여 프레임을 새로 고칩니다.
사용자 hakobera가 게시 한 Simple WebSocket Client v0.1.3 이라는 Chrome 확장 프로그램 을 사용했습니다. 주어진 URL에서 웹 소켓을 열고 메시지를 보내고 소켓 연결을 닫을 수있는 사용법은 매우 간단합니다. 매우 최소한입니다.