242

有没有一种方法或扩展可以让我观察通过 WebSocket 的“流量”？出于调试目的，我想查看客户端和服务器请求/响应。

4

12 回答 12

291

Chrome 开发者工具现在可以列出 WebSocket 帧，如果帧不是二进制的，还可以检查数据。

过程：

  1. 启动 Chrome 开发者工具
  2. 加载您的页面并启动 WebSocket 连接
  3. 单击网络选项卡。
  4. 从左侧列表中选择WebSocket 连接（其状态为“101 Switching Protocols”。
  5. 单击消息子选项卡。二进制帧将显示长度和时间戳，并指示它们是否被屏蔽。文本框架将显示还包括有效负载内容。

如果您的 WebSocket 连接使用二进制帧，那么您可能仍希望使用 Wireshark 来调试连接。Wireshark 1.8.0添加了对 WebSockets 的解析器和过滤支持。可以在这个其他答案中找到替代方案。

于 2011-04-22T15:47:47.887 回答
75

Chrome Canary 和 Chromium 现在具有 WebSocket 消息帧检查功能。以下是快速测试它的步骤：

  1. 导航到websocket.org站点上托管的WebSocket Echo 演示。
  2. 打开 Chrome 开发者工具。
  3. 单击Network，要过滤 Dev Tools 显示的流量，请单击WebSockets。
  4. 在 Echo 演示中，单击Connect。在 Google Dev Tool 的 Headers 选项卡上，您可以检查 WebSocket 握手。
  5. 单击 Echo 演示中的发送按钮。
  6. 这一步很重要：要在 Chrome 开发人员工具中查看 WebSocket 框架，在名称/路径下，单击 echo.websocket.org 条目，代表您的 WebSocket 连接。这会刷新右侧的主面板，并使 WebSocket Frames 选项卡显示实际的 WebSocket 消息内容。

注意：每次发送或接收新消息时，都必须通过单击左侧的 echo.websocket.org 条目来刷新主面板。

我还发布了带有屏幕截图和视频的步骤。

我最近出版的书《HTML5 WebSocket 权威指南》也有一个专门的附录，涵盖了各种检查工具，包括 Chrome 开发工具、Chrome 网络内部和 Wire Shark。

于 2012-05-09T22:23:01.130 回答
67

他们似乎在不断地改变 Chrome 中的东西，但现在是这样 :-)

  • 首先，您必须单击红色记录按钮，否则您将一无所获。

  • 我以前从未注意到过WS，但它过滤掉了 Web 套接字连接。

  • 选择它，然后您可以看到Frames（现在称为Messages），它将向您显示错误消息等。

在此处输入图像描述

于 2015-09-24T05:18:13.333 回答
46

如果您没有访问 websocket 的页面，您可以打开 Chrome 控制台并输入您的 JavaScript：

var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }

这将打开 Web 套接字，以便您可以在网络选项卡和控制台中看到它。

于 2014-08-05T04:52:56.523 回答
40

其他答案涵盖了最常见的场景：观看框架的内容（开发人员工具 -> 网络选项卡 -> 右键单击​​ websocket 连接 -> 框架）。

如果您想了解更多信息，例如哪些套接字当前处于打开/空闲状态或能够关闭它们，您会发现此 url 很有用

chrome://net-internals/#sockets
于 2014-08-06T22:52:43.613 回答
9

您有 3 个选项：Chrome（通过开发人员工具 -> 网络选项卡）、Wireshark 和 Fiddler（通过日志选项卡），但它们都是非常基本的。如果您的流量非常大或每帧非常大，那么使用它们进行调试变得非常困难。

但是，您可以使用 Fiddler 和 FiddlerScript 来检查 WebSocket 流量，就像检查 HTTP 流量一样。该解决方案的几个优点是您可以利用 Fiddler 中的许多其他功能，例如多个检查器（HexView、JSON、SyntaxView）、比较数据包和查找数据包等。检查 WebSocket 流量

请参阅我最近撰写的关于 CodeProject 的文章，该文章向您展示了如何使用 Fiddler（使用 FiddlerScript）调试/检查 WebSocket 流量。http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

于 2014-02-01T21:53:04.330 回答
9

如果你想要更好的体验，我建议使用 Postman 来调试 WebSocket 请求。它已作为新功能发布。 https://stackoverflow.com/a/43754722/15988851

于 2021-06-04T08:22:29.437 回答
7

我只是发布这个，因为 Chrome 发生了很多变化，而且没有一个答案是最新的。

  1. 打开开发工具
  2. 刷新您的页面（以便网络选项卡捕获 WS 连接）
  3. 点击您的请求
  4. 单击“框架”子选项卡
  5. 你应该看到这样的东西：

在此处输入图像描述

于 2018-06-11T08:15:10.843 回答
5

Chrome 开发人员工具允许查看在打开的连接期间保持挂起的握手请求，但据我所知，您看不到流量。但是，例如，您可以嗅探它。

于 2011-04-22T09:10:30.737 回答
4

Chrome 版本 29 及更高版本的简短回答：

  1. 打开调试器，转到“网络”选项卡
  2. 使用 websocket 加载页面
  3. 单击带有来自服务器的升级响应的 websocket 请求
  4. 选择选项卡“框架”以查看 websocket 框架
  5. 再次点击websocket请求刷新帧
于 2013-11-13T13:21:11.000 回答
2

我使用了由用户 hakobera 发布的名为Simple WebSocket Client v0.1.3的 Chrome 扩展程序。它的使用非常简单，它允许在给定的 URL 上打开 websockets，发送消息并关闭套接字连接。它非常简约。

于 2016-06-21T00:05:39.647 回答
2

至于我开始使用的一个工具，我建议firecamp和 Postman 一样，但它也支持 websockets 和 socket.io。

于 2020-04-23T13:24:33.733 回答