POST 请求未显示在 Chrome DevTools 中

Question

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

注意：此情况仅发生在 WhatsApp 网页版上。在其他网站上，它可以工作并显示 GET 和 POST 请求...

Answer 1

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

同样的事情也发生在 Whatsapp 的网络版中。仅使用纯 HTTP 加载实际 JavaScript 应用程序、图标等资产。然后，打开一个 WebSocket，通过它交换消息等。

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

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