如何在 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 查看器。

扩展程序如何工作

• 监听所有网络请求（使用 Service Worker），
• 检测标头包含

  accept=text/event-stream

  和
的请求
• 将对这些的响应重播到 DevTools 可以记录的新

  EventSource