288

Is there a way, or an extension, that lets me watch the "traffic" going through a WebSocket? For debugging purposes I'd like to see the client and server requests/responses.

Improve this question

13 Answers 13

Reset to default
327

Chrome developer tools now have the ability to list WebSocket frames and also inspect the data if the frames are not binary.

Process:

  1. Launch Chrome Developer tools
  2. Load your page and initiate the WebSocket connections
  3. Click the Network Tab.
  4. Select the WebSocket connection from the list on the left (it will have status of "101 Switching Protocols".
  5. Click the Messages sub-tab. Binary frames will show up with a length and time-stamp and indicate whether they are masked. Text frames will show also include the payload content.

If your WebSocket connection uses binary frames then you will probably still want to use Wireshark to debug the connection. Wireshark 1.8.0 added dissector and filtering support for WebSockets. An alternative may be found in this other answer.

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

11 Comments

Would you know how to use Wireshark to do this? I've never really used it, and it appears to show all network traffic, and shows raw packets.
You can restrict capture to a single port using capture filters. Alternately, after you have gotten a capture, you should be able to right click any on a captured frame that is part of the session and select on the option to show just that session.
Unfortunately using WireShark using localhost on windows requires jumping through hoops to get it to work. See wiki.wireshark.org/CaptureSetup/Loopback
I have recently written an article on CodeProject, which show you how to debug/inspect WebSocket traffic with Fiddler. codeproject.com/Articles/718660/…
in step 4 I had to select "ws" from the list on the left
|
94

They seem to continuously change stuff in Chrome, but here's what works right now :-)

  • First you must click on the red record button or you'll get nothing.

  • I never noticed the WS before but it filters out the web socket connections.

  • Select it and then you can see the Frames (now called Messages) which will show you error messages etc.

enter image description here

Improve this answer

9 Comments

I do not like how that JSON is formatted there ugly. No formatting basically.
@ses that's signalR protocol. Take it up with Microsoft 😜
@StuThompson yes - my upvotes keep accumulating :-)
@GMsoF Looks like 'Frames' was renamed to 'Messages'. Same thing.
thumb up for the picture. i think Frames is called Messages now.
|
79

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

  1. Navigate to the WebSocket Echo demo [dead as of 2022], hosted on the websocket.org site https://echo.websocket.events/.ws (run by the company Lob) or you can locally run the Echo Server project.
  2. Turn on the Chrome Developer Tools.
  3. Click Network, and to filter the traffic shown by the Dev Tools, 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. THIS STEP IS IMPORTANT: To see the WebSocket frames in the Chrome Developer Tools, under Name/Path, click the echo.websocket.org 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.

Note: Every time you send or receive new messages, you have to refresh the main panel by clicking on the echo.websocket.org entry on the left.

I also posted the steps with screen shots and video.

My recently published book, The Definitive Guide to HTML5 WebSocket, also has a dedicated appendix covering the various inspection tools, including Chrome Dev Tools, Chrome net-internals, and Wire Shark.

Improve this answer

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 for step 6! I had known about the WebSockets filter in the Network tab, but was frustrated that it seemed to only catch my first few messages. Do you know if there's a way to make it aware of a websocket connection that was open before you opened the tab?
Bryan - I don't believe you can today.
@Howie You cannot do it with Chrome. You can use WireShark for it. Our new book, The Definitive Guide to HTML5 WebSocket gives you a quick intro to WireShark, too. amazon.com/Definitive-Guide-HTML5-WebSocket-Apress/dp/…
The websocket links in step 1 are now broken.
|
58

If you don't have a page which is accessing the websocket, you can open up the Chrome console and type your JavaScript in:

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.

Improve this answer

3 Comments

Thanks! Also: The page you open has to be in the same origin as your websocket. If you try to open Chrome dev tools on a different origin (or even the new tab page) and then connect to your websocket you'll get an authorization error.
Is there a way to fix this?
This is useful if you don't have a dedicated page to interact with the webosocket. To send data, just call webSocket.send('foo');
43

The other answers cover the most common scenario: watch the content of the frames (Developer Tools -> Network tab -> Right click on the websocket connection -> frames).

If you want to know some more informations, like which sockets are currently open/idle or be able to close them you'll find this url useful

chrome://net-internals/#sockets
Improve this answer

Comments

9

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. Inspect WebSocket traffic

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

Improve this answer

Comments

9

If you want a better experience, I'd suggest using Postman to debug WebSocket requests. It has been released as a new feature. https://stackoverflow.com/a/43754722/15988851

Improve this answer

Comments

7

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:

enter image description here

Improve this answer

Comments

6

Chrome developer tools allows to see handshake request which stays pending during the opened connection, but you can't see traffic as far as I know. However you can sniff it for example.

Improve this answer

Comments

4

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
Improve this answer

1 Comment

It seems this works, except that it's annoying that it stops working if you disconnect and reconnect to the websocket url (e.g. on websocket.org/echo.html), in which case you must refresh the page! :(
3

I have used Chrome extension called Simple WebSocket Client v0.1.3 that is published by user hakobera. It is very simple in its usage where it allows opening websockets on a given URL, send messages and close the socket connection. It is very minimalistic.

Improve this answer

Comments

2

As for a tool I started using, I suggest firecamp Its like Postman, but it also supports websockets and socket.io.

Improve this answer

Comments

0

Easier way is "FireFox". No need any plugins etc

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.