POST 请求未显示在 Chrome DevTools 中

POST request not showing up in Chrome DevTools

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

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

尝试 Chrome DevTools 中的“设置”->“首选项”->“网络”->“记录网络日志”。在您的情况下,此复选框可能未选中。所以,检查一下。

否则,如果选中“记录网络日志”,则尝试“设置”->“首选项”->“恢复默认设置并重新加载”。

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

进行通信

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

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

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