Chrome에서 WebSocket 디버깅

Chrome에서 WebSocket 디버깅

---

WebSocket을 통과하는 "트래픽"을 볼 수있는 방법이나 확장이 있습니까? 디버깅 목적으로 클라이언트 및 서버 요청 / 응답을보고 싶습니다.

---

Chrome 개발자 도구는 이제 WebSocket 프레임을 나열하고 프레임이 바이너리가 아닌 경우 데이터를 검사 할 수 있습니다.

방법:

1. Chrome 개발자 도구 시작
2. 페이지를로드하고 WebSocket 연결을 시작하십시오
3. 네트워크 탭을 클릭하십시오 .
4. 왼쪽의 목록에서 WebSocket 연결 을 선택하십시오 ( "101 스위칭 프로토콜"상태가 됨).
5. 프레임 하위 탭을 클릭 하십시오. 이진 프레임은 길이와 타임 스탬프와 함께 표시되며 마스크 여부를 나타냅니다. 텍스트 프레임에는 페이로드 컨텐츠도 포함됩니다.

WebSocket 연결이 이진 프레임을 사용하는 경우 Wireshark를 사용하여 연결을 디버깅 할 수 있습니다. Wireshark 1.8.0 은 WebSockets에 대한 dissector 및 필터링 지원을 추가했습니다. 이 다른 답변 에서 대안을 찾을 수 있습니다 .

---

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를 비롯한 다양한 검사 도구를 다루는 전용 부록이 있습니다.

---

Chrome에서 지속적으로 변경되는 것처럼 보이지만 현재 작동하는 내용은 다음과 같습니다. :-)

• 먼저 빨간색 레코드 버튼을 클릭해야합니다. 그렇지 않으면 아무 것도 얻지 못합니다.

• WS이전에는 눈치 채지 못했지만 웹 소켓 연결을 필터링합니다.

• 그것을 선택하면 오류 메시지 등을 표시하는 프레임을 볼 수 있습니다.

---

다른 답변은 가장 일반적인 시나리오를 다룹니다. 프레임의 내용을 봅니다 (개발자 도구-> 네트워크 탭-> 웹 소켓 연결을 마우스 오른쪽 버튼으로 클릭-> 프레임).

현재 어떤 소켓이 열려 있거나 유휴 상태인지를 확인하거나 닫을 수있는 것과 같은 더 많은 정보를 알고 싶다면이 URL이 유용하다는 것을 알 수 있습니다

chrome://net-internals/#sockets

---

웹 소켓에 액세스하는 페이지가없는 경우 Chrome 콘솔을 열고 JavaScript를 다음과 같이 입력 할 수 있습니다.

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

This will open up the web socket so you can see it in the network tab and in the console.

---

You have 3 options: Chrome (via Developer Tools -> Network tab), Wireshark, and Fiddler (via Log tab), however they all very basic. If you have very high volume of traffic or each frame is very large, it becomes very difficult to use them for debugging.

You can however use Fiddler with FiddlerScript to inspect WebSocket traffic in the same way you inpect HTTP traffic. Few advantages of this solution are that you can leverage many other functionalities in Fiddler, such as multiple inspectors (HexView, JSON, SyntaxView), compare packets, and find packets, etc.

Please refer to my recently written article on CodeProject, which show you how to Debug/Inspect WebSocket traffic with Fiddler (with FiddlerScript). http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

---

Short answer for Chrome Version 29 and up:

1. Open debugger, go to the tab "Network"
2. Load page with websocket
3. Click on the websocket request with upgrade response from server
4. Select the tab "Frames" to see websocket frames
5. Click on the websocket request again to refresh frames

---

I'm just posting this since Chrome changes alot, and none of the answers were quite up to date.

1. Open dev tools
2. REFRESH YOUR PAGE (so that the WS connection is captured by the network tab)
3. Click your request
4. Click the "Frames" sub-tab
5. You should see somthing like this:

---

Chrome 개발자 도구를 사용하면 열린 연결 중에 보류중인 핸드 셰이크 요청을 볼 수 있지만 내가 아는 한 트래픽을 볼 수는 없습니다. 그러나 예를 들어 스니핑 할 수 있습니다 .

---

사용자 hakobera가 게시 한 Simple WebSocket Client v0.1.3 이라는 Chrome 확장 프로그램 을 사용했습니다. 주어진 URL에서 웹 소켓을 열고 메시지를 보내고 소켓 연결을 닫을 수있는 사용법은 매우 간단합니다. 매우 최소한입니다.

참고 URL : https://stackoverflow.com/questions/5751495/debugging-websocket-in-google-chrome