如何在 Chrome DevTools 中查看 EventSource 侦听器？

Question

我已经检查了“事件监听器”选项卡，但它似乎没有显示服务器发送的事件监听器。

const sse = new EventSource('/api/v1/sse');
sse.addEventListener("notice", function(e) {
    console.log(e.data)
})

编写完上述代码后，有没有办法使用 Chrome DevTools 监视我的所有 sse 命名事件和侦听器？

Answer 1

像 ChatGPT 和 Anthropic 的 Claude 这样的应用程序使用SSE 而不是 fetch而不是内置的EventSource（可能通过使用@microsoft/fetch-event-source）。众所周知，您在 DevTools 中看不到 EventStream。

但是，要在 Chrome 开发工具中查看这些内容，我可以安装并启用 Chrome 扩展：SSE 查看器。

扩展程序如何工作

• 监听所有网络请求（使用服务工作者），
• 检测标头包含以下内容的请求accept=text/event-stream, 和的请求
• 将这些响应重播为EventSourceDevTools 可以记录的新响应