# Http-web-API

**Repository Path**: Chinese-tingfeng/Http-web-API

## Basic Information

- **Project Name**: Http-web-API
- **Description**: 本仓库只做教学思路，都均在合理的范围中使用
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-10
- **Last Updated**: 2025-12-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Http-web-API

# 智能抓包分析器 V31.1 (Aeterna Edition) 🚀

[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
[![Version](https://img.shields.io/badge/Version-31.1-brightgreen.svg)](https://github.com/lzA6/Http-web-API)
[![Compatibility](https://img.shields.io/badge/Tampermonkey-✅-orange.svg)](https://www.tampermonkey.net/)
[![Author](https://img.shields.io/badge/Author-AI_&_You-violet.svg)](https://github.com/lzA6/Http-web-API)

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

**English Readme Coming Soon...**

---

## 目录 (Table of Contents)

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

---

## 🌟 项目亮点

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

---

## 🚀 懒人一键安装

**前提：** 你需要一个现代浏览器（如 Chrome, Firefox, Edge），并已安装 [Tampermonkey (油猴)](https://www.tampermonkey.net/) 扩展。

**安装步骤：**

1.  **确保油猴已就位**：如果你的浏览器右上角没有看到油猴的图标，请先点击上方链接安装它。
2.  **一键安装脚本**：
    *   **点击下方链接，油猴插件会自动弹出安装页面，点击“安装”即可！** 👇

        [👉 **【点击这里，光速安装】** 👈](https://github.com/lzA6/Http-web-API/raw/main/intelligent_packet_analyzer_v31.user.js)

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 设计和前后端通信原理。
*   **🧐 好奇的探索者**：想知道你正在浏览的网页背后，到底在和哪些服务器进行着怎样的“秘密通信”？这个工具为你打开了一扇窗。

---

## ✅ 当前状态 vs. 🌌 未来展望

### **已完成 (What's Done)**

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

### **未来计划 (The Road Ahead)**

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

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

---

## 👍 优点 vs. 👎 缺点

### **优点 (The Good)**

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

### **缺点 (The Not-So-Good)**

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](https://github.com/lzA6/Http-web-API/blob/main/LICENSE)** 开源协议。

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

---

## 🙏 致谢

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

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

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

---