40

I can use the Network tab in the Google Chrome Web Inspector to debug the network traffic (AJAX requests, etc.). I can check what data is transferred easily. But Websocket connections only show as 

Request URL:ws://localhost/...
Request Method:GET
Status Code:101 Switching Protocols
...

and I can't see the transferred data. Is there any build in feature in Google Chrome to inspect the transferred data? Or do I need to use Wireshark?

PS: I'm using the latest stable version (16.0.912.75). If a newer version (beta/dev) has this features, it would be nice.

Improve this question
1

3 Answers 3

Reset to default
72

Chrome and Chromium now have WebSocket message frame inspection. Here are the steps to test it quickly:

  1. Navigate to the WebSocket Echo demo, hosted on the websocket.org site.
  2. Turn on the Chrome Developer Tools.
  3. Click Network, enable filter (3rd icon from the left on the top of Dev Tools) to filter the traffic shown by the Developer Tools, and click WebSockets.
  4. In the Echo demo, click Connect. On the Headers tab in Google Dev Tool you can inspect the WebSocket handshake.
  5. Click the Send button in the Echo demo.
  6. To see the WebSocket frames in Chrome Developer Tools, under Name, click the entry representing your WebSocket connection. This refreshes the main panel on the right and makes the WebSocket Frames tab show up with the actual WebSocket message content.

I also posted the steps with screen shots and video. enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Be careful when posting copy and paste boilerplate/verbatim answers to multiple questions, these tend to be flagged as "spammy" by the community. If you're doing this then it usually means the questions are duplicates so flag them as such instead.
Thank you, Kev. BTW, does it apply to comments too... ;-)
I think Fiddler is easier to use for debugging WebSocket. I have recently written an article on CodeProject, which show you how to debug/inspect WebSocket traffic with Fiddler. codeproject.com/Articles/718660/…
The chrome dev tools don't have a "Websocket Frames" tab here anymore :/ There is a "Frames" tab but it is perpetually empty no matter how many websocket messages are sent, or how many times I click on the Name/Path entry on the left. What am I doing wrong?
@nzifnab It is not empty. you might move splitter in frames tab to see list of frames :
|
8

After some more research I found a duplicate question here: Debugging WebSocket in Google Chrome

Chrome does't support viewing the traffic in the current stable version. I need to use Wireshark.

Improve this answer

Comments

0

Another Idea, for simple web socket testing and lightweight, use Chrome plugin "Simple Web-socket. I wanted to check only if the connection can be establish or not. Following Chrome plugin "Simple Web-socket (link : https://chrome.google.com/webstore/detail/simple-websocket-client/pfdhoblngboilpfeibdedpjgfnlcodoo?hl=en)" work like charm. See image.

https://lh3.googleusercontent.com/bEHoKg3ijfjaE8-RWTONDBZolc3tP2mLbyWanolCfLmpTHUyYPMSD5I4hKBfi81D2hVpVH_BfQ=w640-h400-e365

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.