How do you inspect websocket traffic with Chrome Developer Tools?

websocket google-chrome-devtools
Joel Duckworth picture Joel Duckworth · Mar 29, 2017 · Viewed 42.8k times · Source

I'm trying to inspect websocket traffic using Chrome Developer Tools. From my research it seems you should be able to see it using the network tab - and it even has a filter for 'ws'.

However I've been inspecting sites that I know are using websockets and can't find a way to inspect the messages being sent back and forth. Using Chrome v56, also tried Safari with no luck...

Does anyone know how this can be achieved?

Answer

Joel Duckworth picture Joel Duckworth · Mar 29, 2017

You need to reload the page with the network tab open and filter by type 'ws'. This will show you a connection being made with a websocket. You can then click on the connection to show the traffic being sent back and forth with on the server

enter image description here

https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#frames

Related questions

Chrome 59+ websocket frames no longer visible in DevTools

Ever since I upgrade from Chrome 58 => 59 on Mac OS El Capitan, when I use Dev Tools Network inspector to view WebSocket frames, the frames no longer are visible. We build an app that makes heavy use of WS, so …

Read More
Send message to specific client with socket.io and node.js

I'm working with socket.io and node.js and until now it seems pretty good, but I don't know how to send a message from the server to an specific client, something like this: client.send(message, receiverSessionId) But neither …

Read More
Which websocket library to use with Node.js?

Currently there is a plethora of websocket libraries for node.js, the most popular seem to be: https://github.com/Worlize/WebSocket-Node https://github.com/einaros/ws https://github.com/LearnBoost/engine.io https://github.com/learnboost/socket.io https://…

Read More