google-chrome - POST 请求未显示在 Chrome DevTools 中

Question

使用 WhatsApp 网页版时，当您发送消息时，没有请求显示，但消息仍会送达。为什么在网络选项卡中几乎没有任何请求的迹象？以及如何使其可见(如果它是隐藏的)？？

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

Answer 1

这是调试从 Web 完成的网络请求时的常见混淆来源。通常，开发人员从上到下查看这些网络请求，并假设最低的是最近发出的请求——因此假设请求必须在底部。对于“普通”HTTP，这是正确的。但是，许多想要实时显示数据的应用程序使用 WebSockets 与 API 进行通信。

同样的事情也发生在 Whatsapp 的 Web 版本中。只有实际的 JavaScript 应用程序、图标等 Assets 才使用纯 HTTP 加载。然后，打开一个 WebSocket，例如通过它交换消息。

要查看实际请求，请执行以下操作:

1. 打开 DevTools，转到网络选项卡
2. 打开 Whatsapp 网页。确保在这一步 (1) 已经在录制!
3. 在过滤栏中过滤“WS”
4. 只有很少的结果可以点击进行调查
5. 使用“消息”选项卡检查此套接字
6. 现在发送一条消息，您将看到一条名为 binary message 的消息，其中包含您的消息作为负载。