Repository files navigation

一份献给所有 Web 探索者的礼物 🎁。这不仅仅是一个工具，更是一种探索精神的体现，一种对技术世界无尽好奇的延伸。

English Readme Coming Soon...

• 🌟 项目亮点
• 🚀 懒人一键安装
• 📖 使用教程
• 💡 核心哲学与设计原理
  • 🌍 世界观：万物皆可“观测”
  • 🛠️ 方法论：无侵入的“附加层”
• 🔬 技术深度解析
  • 🏛️ 代码架构：模块化的“微观城市”
  • 🔑 关键技术剖析
  • 🧠 算法与逻辑
• 🎯 适用场景与目标用户
• ✅ 当前状态 vs. 🌌 未来展望
• 👍 优点 vs. 👎 缺点
• 🤝 贡献指南
• 📜 开源协议
• 🙏 致谢

• ✨ 零配置，即装即用：无需安装任何重量级软件，通过浏览器“油猴”插件即可在任何网页上运行。
• 🌐 全方位拦截：完美捕获Fetch、XHR (Ajax)、SSE (流式数据) 和WebSocket 请求，让数据无所遁形。
• 🎨 现代化 UI/UX：精心设计的暗色系悬浮窗界面，支持拖拽、缩放和记忆位置，最小化后变为一颗会呼吸的辉光球，既美观又不打扰。
• 🔍 深度稽查：提供强大的请求详情审查功能，包括请求头、响应头、请求体、响应体、调用堆栈和时间瀑布流，一目了然。
• 🛠️ 功能集大成：内置智能过滤、多种排序方式、URL 搜索、一键复制 cURL/Fetch 代码、导出 JSON 档案等高级功能，满足你的各种“刁钻”需求。
• 💖 充满人文关怀：这不仅是冷冰冰的代码，我们希望它能激发你的创造力，让你感受到“我来我也行”的开源精神。

前提： 你需要一个现代浏览器（如 Chrome, Firefox, Edge），并已安装Tampermonkey (油猴) 扩展。

安装步骤：

1. 确保油猴已就位：如果你的浏览器右上角没有看到油猴的图标，请先点击上方链接安装它。

2. 一键安装脚本：

   • 点击下方链接，油猴插件会自动弹出安装页面，点击“安装”即可！ 👇

     👉【点击这里，光速安装】 👈

3. 验证安装：刷新任意网页，如果右下角出现了一个蓝色、会呼吸的悬浮球 🔵，恭喜你，你已经成功进入了新的观测纪元！

1. 唤醒与交互：

   • 展开面板：单击右下角的蓝色悬浮球，面板会“嗖”地一下展开。
   • 移动面板：按住面板顶部的标题栏，像拖动普通窗口一样随意拖拽。
   • 缩放面板：将鼠标移动到面板左上角，当光标变为缩放箭头时，按住并拖动即可调整大小。
   • 最小化：点击标题栏右侧的“－”按钮，面板会收缩成悬浮球。

2. 核心功能区：

   • 请求列表：所有捕获到的网络请求都会实时显示在这里。流式请求（SSE/WSS）会有特殊的辉光标识。
   • 顶部控制栏：
     • 状态指示灯：绿色表示抓包核心已成功注入页面。
     • 搜索框：输入关键字，实时过滤出 URL 包含该关键字的请求。
     • 类型筛选：只看Fetch 或WSS？没问题，在这里选择。
     • 排序方式：按请求发出的时间、响应大小或耗时进行排序。

3. 操作与分析：

   • 查看详情：单击列表中的任意一条请求，会弹出一个“深度稽查”窗口，里面有关于这个请求的一切！
   • 快捷操作：
     • 复制选项 (📋)：点击请求条目右侧的剪贴板图标，可以选择将该请求复制为 cURL 命令、Fetch 代码或完整的 JSON 数据。
     • 删除此条 (🗑️)：点击垃圾桶图标，移除你不想看到的请求。
   • 底部按钮组：
     • 暂停/继续抓包：临时停止或恢复捕获新请求。
     • 清空列表：一键清除所有已捕获的请求。
     • 智能预设过滤：帮你自动过滤掉常见的广告、统计脚本和无关紧要的静态资源。
     • 复制/导出档案：将当前捕获的所有请求数据，以易于分析的 JSON 格式，复制到剪贴板或直接导出为文件。

我们相信，每一个在网络中流动的数据包，都承载着信息与意义。它们共同构建了我们所见的数字世界。这个工具的诞生，源于一种最纯粹的渴望：赋予每个用户“观测”这个流动世界的能力。

这并非为了“控制”，而是为了“理解”。当你能清晰地看到一个网页背后发生了什么，哪些数据在与服务器悄悄“对话”，你就从一个被动的“使用者”，转变为一个主动的“探索者”。这种视角的变化，是通往技术深度和创造自由的第一步。我们坚信，透明度是最好的老师。

我们是如何实现这一切的？答案是“猴子补丁 (Monkey Patching)”。

• 专业术语解释：这是一种在程序运行时动态修改其代码的技术。
• 大白话时间：想象一下，浏览器原本用来发送网络请求的工具函数（如window.fetch）是一条固定的“高速公路”。我们的脚本就像是在这条高速公路上设立了一个智能检查站。
  1. “劫持”：当页面加载时，我们告诉浏览器：“嘿，以后发请求别走老路了，先从我这个检查站过一下。” 我们把原来的fetch 函数悄悄保管起来，换上我们自己写的、带有记录功能的“新fetch”。
  2. “记录”：每当有请求要通过，我们的“新fetch”就会把它所有的信息（URL、方法、请求头等）详细地记录下来，并展示在我们的面板上。
  3. “放行”：记录完毕后，我们会调用那个被我们保管起来的“原版fetch”函数，让请求继续走完它正常的旅程。

通过这种方式，我们既没有修改网站的任何源代码，也没有改变请求的最终结果。我们只是在它必经之路上增加了一个“观测层”。这保证了工具的通用性和安全性，让它能优雅地运行在几乎所有网站之上。

为了避免代码像一团乱麻，我们采用了单一对象命名空间的设计模式，将所有功能都封装在SnifferV31 这个“总指挥部”里。这就像建立一座微观城市：

• CONFIG:城市规划局 - 存放所有核心配置，如最大请求数、面板尺寸等。
• state:市政数据中心 - 管理所有动态变化的状态，如捕获到的请求列表、是否正在抓包等。
• Utils:公共服务部 - 提供各种实用的工具函数，如格式化数据、创建提示框等，供其他所有部门调用。
• StreamParser:流数据处理厂 - 专门负责解析 SSE 这种持续不断的数据流。
• Core:交通枢纽（拦截核心） - 这是城市的心脏，负责前面提到的“猴子补丁”，拦截并处理所有进出的网络请求。
• UI:城市建设与宣传部 - 负责构建用户看到的所有界面（HTML）、美化它（CSS），并让它能响应用户的操作（事件监听）。
• Features & Exporters:特殊功能大楼 - 存放如智能过滤、复制 cURL 等具体的功能逻辑。
• init:城市启动仪式 - 程序的入口，负责按顺序调用其他部门，让整个城市开始运转。

这种模块化的结构，使得代码高内聚、低耦合，极大地便利了后期的维护和功能扩展。

• window.fetch &XMLHttpRequest 代理：

  • 技术点：通过保存原始函数引用，然后重写window 上的同名函数，我们在新的函数内部实现了数据捕获逻辑，最后再调用原始函数完成网络通信。
  • 挑战：如何处理流式响应（response.body.tee()）和各种异常情况是关键。我们通过tee() 方法将响应流一分为二，一份给浏览器正常使用，一份给我们自己读取分析，做到了两不耽误。

• UI 交互逻辑 (UI/UX)：

  • 拖拽与点击分离：我们通过在mousedown 时设置一个hasDragged 标志位，在mousemove 中判断移动距离来更新它。在mouseup 时，如果hasDragged 为false，则视为一次“点击”；反之，则为一次“拖拽”。这完美解决了悬浮球“拖动后又触发点击”的经典难题。
  • 边界检测与位置记忆：在拖拽或缩放结束后，会调用ensureInBounds 函数，获取窗口的当前位置和视口的尺寸，通过计算确保窗口不会超出屏幕。同时，在最小化前和移动后，会将位置信息（left,top）保存在state.panelPosition 中，以便恢复时使用。

• 异步与状态管理：

  • async/await：在fetch 拦截器中大量使用，以优雅地处理 Promise-based 的异步流程。
  • 闭包：在XMLHttpRequest 的事件监听器中，通过闭包捕获了每个请求独有的requestData 对象，确保了在异步回调中能准确地更新对应的请求状态。

• 防抖 (Debounce)：
  • 问题：当网络请求非常频繁时（例如，一个流式请求在1秒内返回几十次数据），如果每次都立即更新整个 UI 列表，会造成巨大的性能开销，甚至导致页面卡顿。
  • 解决方案：我们引入了debouncedUpdateUI 函数。它就像一个“缓冲器”，在接到更新请求后，会等待一小段时间（例如 100 毫秒）。如果在这期间又有新的更新请求进来，它会重置等待时间。只有当“风平浪静”了 100 毫秒后，它才真正执行一次 UI 更新。这极大地合并了高频操作，提升了流畅度。

• 👨‍💻 Web 开发者：在开发和调试阶段，快速查看 API 的请求参数和返回数据，而无需打开笨重的浏览器开发者工具。
• 🕵️‍♀️ 测试工程师：验证前端发送的数据是否正确，后端返回的数据是否符合预期。
• 👨‍🎓 学生与学习者：通过实际观察知名网站的网络交互，直观地学习 HTTP 协议、API 设计和前后端通信原理。
• 🧐 好奇的探索者：想知道你正在浏览的网页背后，到底在和哪些服务器进行着怎样的“秘密通信”？这个工具为你打开了一扇窗。

• 完整的Fetch/XHR/SSE/WSS 拦截与分析。
• 流畅、现代化的 UI/UX，包括拖拽、缩放、折叠、位置记忆。
• 丰富的辅助功能：搜索、排序、过滤、复制、导出。
• 深度稽查面板，提供全面的请求细节。
• 优秀的性能与稳定性。

我们相信，创造永无止境。这个工具的未来，充满了想象空间：

• 🌐 国际化 (i18n)：提供多语言支持，让全球的开发者都能无障碍使用。
• 🎨 主题定制：允许用户自定义界面颜色、字体，甚至在明/暗主题间切换。
• ✍️ 请求重放与修改：不仅能看，还能“动手”！增加一个可以修改请求参数后重新发送的功能，这将是调试的终极利器。
• 📜 HAR 格式支持：支持导入和导出标准的 HAR (HTTP Archive) 文件，以便与 Charles, Fiddler 等专业工具联动。
• 🧩 插件化系统：设计一个插件系统，允许社区开发者编写自己的小功能，例如“一键格式化 JWT”、“显示图片预览”等。

1. 极致便利：无需任何后端服务或代理设置，一个浏览器插件搞定一切。
2. 跨平台：只要能装油猴的浏览器，就能运行。
3. 实时性：所有请求实时捕获并显示，所见即所得。
4. 轻量级：相比专业的抓包工具，它对系统资源的占用微乎其微。

1. 权限限制：它是一个运行在浏览器环境中的 JS 脚本，因此无法捕获浏览器本身发出的、或非网页环境的网络请求（例如，无法抓取桌面应用的数据包）。
2. 功能深度：虽然功能强大，但在某些极端专业的领域（如复杂的协议分析、断点调试），与 Charles, Fiddler, Wireshark 等桌面级工具相比仍有差距。
3. 潜在的冲突：在极少数情况下，“猴子补丁”技术可能会与某些网站自身的、同样修改了原生函数的代码产生冲突。但这种情况非常罕见。

世界因为分享而多彩，代码因为开源而强大。 我们热烈欢迎任何形式的贡献！

无论你是发现了 Bug，有一个绝妙的点子，还是想优化某段代码，都可以：

1. Fork 本仓库：在你的 GitHub 账户下创建一个本项目的副本。
2. 创建你的分支：git checkout -b feature/YourAmazingIdea
3. 提交你的更改：git commit -m 'Add some AmazingIdea'
4. 推送到分支：git push origin feature/YourAmazingIdea
5. 发起 Pull Request：向我们展示你的杰作！

你的每一次尝试，都是在为这个世界增添一份新的可能。勇敢地去创造吧！

本项目基于Apache License 2.0 开源协议。

这意味着你可以自由地使用、修改和分发代码，但需要遵守协议中的相关条款。我们选择这个协议，是希望在保护创作者权益的同时，最大化地促进知识的分享与技术的传播。

感谢每一位正在阅读这份文档的你。

你的关注，就是对我们最大的支持。愿这个小小的工具，能为你的开发之旅带来一丝便利，为你的探索之路点亮一盏明灯。

Stay curious, stay creative.保持好奇，保持创造。