How to Sniff signalR calls using chrome Developer Tools

Question

I download Jabbar chat website and ran it in chrome. I wanted to see what all is happening between browser and server and for that check the network tab. However, I see no entry in network tab (neither xHr not websocket or anything else) but SignalR is working fine. It does sends and receive message. I wonder what is signalR using that developer tools is not able to log. Is there a setting required in developer tools?

Answer 1

Nowadays when your signalR is using WebSockets it is a bit different. Starting with Chrome 58 you have to click on the Network tab and then activate the WS filter. There will be one entry when the signalR connection has been established. Now click on the Frames sub-tab. Here you see every message which has been received by the browser:

Answer 2

You should turn on client-side logging so you know which transport type you're dealing with ($.connection.hub.logging = true;). In case of long-polling, you should see the XHR calls in the network tab. In case of a websocket connection, you should be able to see the frames when choosing the "WebSockets" filter on the bottom, then clicking on the connection entry, then selecting the "Frames" tab. This won't auto-refresh, unfortunately, so you'll have to click on the connection entry in the left whenever you need an update.

If that's not good enough, you'll probably have to look elsewhere (Wireshark, Fiddler, etc.)