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

Question

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

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

在编写了上述代码之后，是否有办法使用Chrome DevTools监视所有SSE命名事件和监听器？

- Mark Girgis

Answer 1

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

然而，要在Chrome Dev Tools中查看这些内容，我可以安装并启用一个Chrome扩展程序：SSE viewer。

扩展程序的工作原理如下：

- 监听所有网络请求（使用服务工作者）， - 检测包含accept=text/event-stream头的请求，并 - 将这些响应重新发送到一个新的EventSource，DevTools可以记录这些响应。

- Ben Butterworth