Firefox 71 将带来 WebSocket 检查器

2019年10月17日

WebSocket(WS)是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,它允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就可以直接创建持久性的连接,并进行双向数据传输。

通常 WebSocket 可用于替换 AJax 技术进行推送,继而实现成本更低、更实时的通讯,一般 WebSocket 也主要用于需要进行实时通信的应用。 

日前 Firefox 开发人员在博客中介绍了其将在 Firefox 71 中引入的 WebSocket 检查器

新的 WebSocket 检查器是 DevTools 中现有“ 网络”面板 UI 的一部分,在此面板中已经可以过滤已打开的 WS 连接的内容,但是目前仍然不能看到通过 WS 帧传输的实际数据。

以下屏幕截图显示了运行中的 WS 过滤器,响应代码指示服务器正在切换到 WS 连接。

如下图所示,边栏显示了有关所选 HTTP 请求的详细信息。此外,UI 现在提供了一个全新的“ 消息”面板,该面板可用于检查通过选定 WS 连接发送和接收的 WS 帧。

实时更新的表显示了已发送(绿色箭头)和已接收(红色箭头)WS 帧的数据,单击时每个帧都会展开,可以检查格式化的数据。

专注于特定消息的话,可以将帧过滤为自由文本。

默认显示“数据”和“时间”列,但是可以自定义界面查看更多列。

在列表中选择一个帧的话会在“消息”面板的底部显示预览。

该检查器当前支持以下 WS 协议:

  • 纯 JSON
  • socket
  • SockJS

新的 WS 检查器将解析基于这些协议的有效负载并将其显示为可扩展树,以便于检查。当然,仍然可以查看原始数据:

使用“网络”面板工具栏中的“暂停/继续”按钮可以停止拦截 WS 通信,方便仅捕获感兴趣的帧。

WebSocket 检查器将在 Firefox 71 中发布,现在可以在 Firefox Developer Edition 中使用。目前 Firefox 还在对以下功能进行跟进:

  • 二进制有效负载查看器
  • 指示关闭的连接
  • 导出 WS 帧(作为 HAR 的一部分)

详情查看原博客:

https://hacks.mozilla.org/2019/10/firefoxs-new-websocket-inspector

展开阅读全文
11 收藏
分享
加载中
精彩评论
问题是Chrome早就支持了
2019-10-17 10:37
5
举报
Chrome 早就支持了
2019-10-17 09:58
2
举报
希望Chrome也跟上
2019-10-17 10:29
1
举报
赞,这样调试 ws 就方便多了,希望Chrome也可以支持
2019-10-17 08:59
1
举报
最新评论 (13)
方便多了
2019-10-21 09:34
0
回复
举报
早就该出了
2019-10-18 10:03
0
回复
举报
firefox控制台怎么切换js执行时所在的iframe?chrome控制台倒是很方便
2019-10-17 11:50
0
回复
举报
这个的3d viewer怎么不再加入了?有替代的吗?
2019-10-17 11:09
0
回复
举报
希望Chrome也跟上
2019-10-17 10:29
1
回复
举报
问题是Chrome早就支持了
2019-10-17 10:37
5
回复
举报
good
2019-10-17 10:01
0
回复
举报
Chrome 早就支持了
2019-10-17 09:58
2
回复
举报
good
2019-10-17 09:51
0
回复
举报
这个给力,期待
2019-10-17 09:22
0
回复
举报
这功能,古德
2019-10-17 09:21
0
回复
举报
更多评论
13 评论
11 收藏
分享
返回顶部
顶部