google-chrome-devtoolsserver-sent-events

How do i view EventSource listeners in Chrome DevTools?


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?


Solution

  • 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