【Chrome DevTools插件】更好的EventStream查看面板，降低调试Dify消息体成本

最近在基于Dify平台开发Agent，发现对话中的中文字符会被编码为\uXXXX类型的字符串，在debug过程中，无法通过汉字定位message，也不方便查看message中具体的data数据。原生 Chrome DevTools 的网络面板中查看EventStream有很多槽点：

1. Unicode 阅读困难: 许多流式响应（尤其是 AI 模型输出）直接返回 \uXXXX 格式的 Unicode 编码。原生面板无法自动解码，开发者只能看到一堆乱码，必须手动复制转码才能阅读。
2. 长流数据难以阅读: 原生面板将流式数据展示为简单的列表，缺乏对复杂 JSON 结构的格式化支持。当单条消息体积极大时，阅读体验极差。
3. 缺乏高效搜索: 在成百上千条流式消息中，很难快速定位到包含特定关键词（如 “Error” 或特定业务字段）的消息。
4. 调试体验割裂: 开发者经常需要在没有格式化的预览窗口和外部 JSON 工具之间反复切换，严重影响效率。

EventStream Pro 正是为了解决这些痛点而生。它作为一个“增强版”的专用调试面板，无缝集成在 DevTools 中，提供自动解码、JSON 格式化、精准搜索等核心能力，让流式接口调试变得前所未有的轻松。

功能特性

• 实时捕获: 自动拦截 EventSource 连接和流式 fetch 请求，确保不漏掉任何数据块（chunks）。
• 自动解码: 智能检测并自动将 \uXXXX 格式的 Unicode 转义序列转换为可读文字（例如中文）。
• 持续追踪: 即使在开启过滤时，消息 ID 依然保持与原始会话一致，方便通过 ID 快速定位。
• 专业级 UI:
  • 可调节列宽: 支持像原生 DevTools 一样自由拖拽调整表格列宽。
  • 详情弹窗: 点击任意行即可在模态框中查看完整且经过格式化的数据负载。
  • 原始/处理切换: 可随时在处理后的可读数据与原始网络流输出之间切换。
• 灵活搜索: 支持在解码后的内容或原始网络字符串中进行全文搜索。

安装指南

1. 直接下载release包，解压event-stream-pro-v1.0.0.zip

2. 加载到 Chrome 浏览器：

   • 打开 Chrome 浏览器，访问 chrome://extensions。
   • 开启右上角的 开发者模式 (Developer mode)。
   • 点击 加载已解压的扩展程序 (Load unpacked) 并选择项目解压目录

使用场景

使用fetch发送sse请求的站点，自测了dify和chatgpt，对话流是能正常捕捉。deepseek、gemini等非fetch是不行的，因为考虑到dify开发场景才会使用到，故没有兼容。

如果对你有帮助，请点个，谢谢~

感谢佬友分享

感谢大佬分享