POST request not showing up in Chrome DevTools

Question

When using WhatsApp web, when you send a message there are no requests showing up, but the message still delivers. Why are there literally no signs of any requests made in the networking tab?? And how to make it visible (if it's hidden)??

Note: It happens only on WhatsApp web. On other sites, it works and shows the GET and POST requests...

Answer 1

This is a common source of conufsion when debugging networking requests done from the web. Normally, developers look at these network requests from top down and assume that the lowest one is the most recent request made - therefore assuming that the request must be at the bottom. For 'plain' HTTP this is correct. However, many apps that want to show data in real-time, use WebSockets to communicate with an API.

The same thing happens in the Web-version of Whatsapp. Only assets like the actual JavaScript-app, icons etc are loaded using plain HTTP. Then, a WebSocket is opened through which messages are exchanged for example.

To see the actual request do the following:

1. Open DevTools, go to networking tab
2. Open Whatsapp web. Make sure that at this step (1) is already recording!
3. Filter for "WS" in the filtering bar
4. There will be only very few results which you can click to investigate
5. Inspect this Socket using the 'messages' tab
6. Now send a message, you will see a message called binary message with your message as payload.