How do i view EventSource listeners in Chrome DevTools?

Question

I have checked the Event Listeners Tab, but it doesn't seem to show server sent event listeners.

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

Having written the above code, is there a way to monitor all my sse named events & listeners using Chrome DevTools?

Answer 1

Apps like ChatGPT and Anthropic's Claude use SSE over fetch not the built-in EventSource (probably by using @microsoft/fetch-event-source). It's known that you can't see EventSource in DevTools.

However, to see these in Chrome Dev Tools, I could install and enable a chrome extension: SSE viewer.

How the extension works

• listen to all network requests (using a service worker),
• detect requests with headers containing accept=text/event-stream, and
• replaying the responses to these to a new EventSource that DevTools can record