使用EventSource与服务器建立流式连接时，Chrome开发者工具的Sources和Network标签页失效？

阿华AIGC实验室

2026-4-14

EventSource与服务器建立流式连接时，Chrome开发者工具的Sources和Network标签页失效？

我太懂这个糟心的问题了——Chrome DevTools碰到这种长期挂着的SSE流式连接，居然直接锁死Sources和Network标签，只有后端挂了才肯吐出记录，完全没法正常调试！

问题根源

其实这是Chrome DevTools的一个老特性（说bug也不为过）：它会把未完成的HTTP请求的元数据缓存起来，直到请求彻底结束（比如连接关闭）才会在Network标签里完整展示。而SSE这种长连接会一直保持open状态，DevTools的处理线程就被这个未完成的请求卡住了，连带着Sources标签的资源扫描也没法正常工作，自然看不到页面的JS源码和初始请求记录。

针对你的简化示例，给你几个立即可行的解决办法：

1. 给SSE连接加“主动断开重连”逻辑（最有效）

不要让连接一直无限挂着，每隔一段时间主动关闭连接，利用EventSource本身的自动重连特性维持数据流。这样每次连接断开时，DevTools就能把这次的请求记录刷出来，同时释放被阻塞的线程，Sources标签也能正常工作了。

修改Python后端的serve_stream方法，比如每50次发送后主动关闭连接：

def serve_stream(self):
    self.send_response(200)
    self.add_misc_headers('text/event-stream')
    self.end_headers()

    print('Beginning to serve stream...')
    # 每50次发送后主动关闭连接，触发前端重连
    for x in range(50):
        message = encode_as_wire_message(str(x))
        print(message)
        self.wfile.write(message)
        self.wfile.flush()
        time.sleep(1.0)
    # 主动关闭连接，让EventSource自动重连
    self.wfile.close()

前端完全不需要修改，EventSource会在连接关闭后自动发起新的连接，数据流不会中断，DevTools也不会再被锁死。

2. 调整DevTools的基础设置

打开Network标签，先勾选Preserve log选项，然后在顶部的Throttling下拉菜单里切换到“Slow 3G”再切回“Online”，这个小操作有时候能强制DevTools实时刷新请求记录，绕过长连接的阻塞。
另外，先打开DevTools，再启动后端加载页面——不要等页面加载后再开DevTools，这样能避免DevTools的初始化扫描被长连接卡住。

3. 用控制台辅助调试（绕开DevTools标签的问题）

既然你说Network标签不重要，主要是没法用Sources调试，那可以先通过前端控制台看数据流，不用依赖Network标签：

this.event_source.onmessage = (event) => {
    document.getElementById('counter').textContent = event.data;
    console.log('Received data:', event.data); // 直接在控制台打印
};

配合后端的日志，完全能覆盖数据调试的需求，等Sources标签正常后再做JS代码的断点调试。

4. 检查Chrome版本或开启实验性功能

把Chrome更到最新稳定版，旧版本的DevTools对长连接的处理确实有不少bug。
可以在Chrome地址栏输入chrome://flags/#enable-devtools-experiments，开启DevTools实验性功能，然后在DevTools的设置（右上角齿轮）里找到“Experimental Network Features”启用，这个选项有时候能修复长连接导致的锁死问题。