frontend page with websocket data processing froze while enable websocket-devtools extension of chrome

[whsasf]

This is a very strange issue. Previously, when the Chrome WebSocket DevTools extension was not installed, the WebSocket functionality on the page worked perfectly. However, after installing the extension, the page freezes after some data has been transmitted via WebSocket (before the transmission is even complete). At that point, no data is received on the frontend, and even heartbeat requests stop being sent. Debugging shows that the backend is still continuously sending data to the frontend over WebSocket.

But the entire frontend page becomes unresponsive — no errors appear, and the page cannot be refreshed. The only way to recover is to close the tab and open a new one. When trying the same page again, the problem persists. Once the WebSocket DevTools extension is disabled or uninstalled, everything works normally again.

My frontend uses the WebSocket feature from @vueuse/core v13.3.0. Even after updating to the latest version, the issue still persists, so it can be ruled out that the problem is caused by the Vue WebSocket library itself. It’s almost certain that this issue is caused by the Chrome WebSocket DevTools extension. However, since there are no error messages or logs available, I can’t determine the exact cause. I hope your team can investigate this issue. Thank you.

System info: apple macos (latest version)
chrome version: Version 141.0.7390.77 (Official Build) (arm64) latest version
websocket-devtools version: 1.0.4

----------------------------- Chinese version ---------------

这是一个很神奇的现问题. 以前没有安装chome websocket-devtools 插件的时候，页面的websocket 功能是正常运行的，自从安装了这个插件， websocket在传输一些数据后(整个过程还没有结束), 前端页面卡死， 看不到任何的 数据接收，连心跳探测的数据请求也无法发出了. 通过debug 可以看到后端还在源源不断的把数据通过websocket传往前端。 但整个前端页面没有响应，没有任何报错，也无法刷新，只能关掉重新开一个页面， 再次尝试这个页面的功能，问题依旧。 当我把 websocket-devtools 功能禁用或卸载之后， 一切功能恢复正常。

我前端是通过使用vueuse/core v13.3.0 引入的websocket， 即使是更新到最新版问题依然存在，所以可以排除是 前端vue websocket 库的问题。 基本可以确定是 这个插件导致的这个问题。但由于没有任何报错信息可以查看，所以不确定具体是什么原因。 希望你们可以排查一下，谢谢。

系统信息: apple macos 目前最新版
chrome 版本: Version 141.0.7390.77 (Official Build) (arm64) 目前最新版
websocket-devtools 版本: 1.0.4

[lhy507613824]

同样的问题, 我把插件禁用了, 暂时不用它了

[jeff-bn]

项目好像没在维护了。

[whsasf]

项目好像没在维护了。

是的，按照目前这个问题的严重程度，这个项目确实应该被召回了. 😄😄,

[cug-zgj]

我也发现这个问题了，一旦后台传输的数据量大，就会卡死，我用chrome的performance测试了下，不过由于页面cpu占用过高，导致performance关闭都停不下来，只能把页面结束任务，然后刷新下，有的时候能得到performance的结果，显示的结果是这个插件占用了绝大部分的主线程时间，所以页面卡死了。插件卸载就好了