CODEWITHSUNDEEP
google-chrome-devtoolsserver-sent-events
Mark Girgis
Mark Girgis

Reputation: 165

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?

Upvotes: 9

Views: 2410

Answers (1)

Ben Butterworth
Ben Butterworth

Reputation: 28998

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

Upvotes: 2

Related Questions