Skip to content

Latest commit

 

History

History
299 lines (223 loc) · 6.66 KB

HTTP_INSPECTOR_ROADMAP.md

File metadata and controls

299 lines (223 loc) · 6.66 KB

HTTP Inspector 路线图

当前状态 (1.3)

已实现

  • ✅ HTTP/HTTPS 请求捕获（URLProtocol + Method Swizzling）
  • ✅ URLSessionTaskMetrics 性能时间线
  • ✅ 请求/响应头和 Body 完整内容
  • ✅ 分页浏览和实时事件流
  • ✅ 高级搜索语法（method:POST status:4xx duration:>500ms）
  • ✅ 请求 Diff 对比
  • ✅ cURL 导出
  • ✅ HAR 导出
  • ✅ 请求重放
  • ✅ 请求收藏
  • ✅ 批量操作（选择、删除、收藏、导出）
  • ✅ Protobuf 解析（Wire Format 自动检测）
  • ✅ 图片响应内联预览
  • ✅ 选中样式优化 - 实色主题块高亮
  • ✅ 虚拟滚动 - 支持 10,000+ 请求流畅浏览
  • ✅ 请求分组 - 按域名/路径分组显示

Phase 1: 性能优化 (优先级: 🔴 High) ✅ 已完成

1.1 虚拟滚动 ✅

目标: 支持 10,000+ 请求流畅浏览

当前问题:

  • 请求量大时 DOM 节点过多
  • 滚动卡顿

实现方案:

// 使用 react-virtual 或 react-window
import { useVirtualizer } from '@tanstack/react-virtual'

function HTTPEventTable({ events }) {
  const virtualizer = useVirtualizer({
    count: events.length,
    getScrollElement: () => containerRef.current,
    estimateSize: () => 48, // 行高
    overscan: 10, // 预渲染行数
  })
}

预估: 3 天

1.2 增量加载

目标: 首屏快速加载，滚动时按需加载更多

实现机制:

interface PaginationState {
  cursor: string | null  // 游标分页
  hasMore: boolean
  isLoading: boolean
}

// API 支持游标分页
GET /api/devices/{id}/http?cursor=xxx&limit=50

预估: 2 天

1.3 请求缓存

目标: 缓存请求详情，避免重复请求

实现方案:

// 使用 zustand + persist
const useHTTPCache = create(
  persist(
    (set, get) => ({
      detailCache: new Map<string, HTTPEventDetail>(),
      getDetail: async (id: string) => {
        if (get().detailCache.has(id)) {
          return get().detailCache.get(id)
        }
        const detail = await api.getHTTPEventDetail(id)
        set((state) => ({
          detailCache: new Map(state.detailCache).set(id, detail)
        }))
        return detail
      }
    }),
    { name: 'http-cache' }
  )
)

预估: 1 天

Phase 2: 功能增强 (优先级: 🟡 Medium)

2.1 请求分组

目标: 按域名、路径前缀、时间段分组显示

UI 设计:

┌─ api.example.com (45 requests) ─────────────────┐
│  └─ /v1/users (12)                              │
│     ├─ GET /v1/users/profile  200  150ms        │
│     └─ POST /v1/users/login   200  320ms        │
│  └─ /v1/orders (33)                             │
│     ├─ GET /v1/orders         200  280ms        │
│     └─ ...                                      │
└─────────────────────────────────────────────────┘

预估: 3 天

2.2 请求标签

目标: 用户自定义标签，方便分类和搜索

功能:

  • 添加/删除标签
  • 按标签筛选
  • 搜索语法 tag:auth

数据结构:

interface HTTPEvent {
  tags: string[]  // 新增
}

预估: 2 天

2.3 请求模板

目标: 保存常用请求为模板，快速重放

功能:

  • 保存请求为模板
  • 编辑模板参数
  • 一键重放模板

预估: 2 天

2.4 响应体对比

目标: 对比两个请求的响应体差异

实现:

// 使用 diff2html 或 monaco-editor
import { Diff2Html } from 'diff2html'

function ResponseDiff({ left, right }) {
  const diff = createTwoFilesPatch('left', 'right', left, right)
  return <Diff2Html diff={diff} />
}

预估: 2 天

Phase 3: 高级分析 (优先级: 🔵 Low)

3.1 性能分析面板

目标: 请求性能统计和趋势分析

指标:

  • 平均响应时间
  • P50/P90/P99 延迟
  • 错误率
  • 请求量趋势

UI:

┌─ 性能概览 ─────────────────────────────────────┐
│  平均响应: 245ms   错误率: 2.3%   请求量: 1,234│
│                                                 │
│  [响应时间趋势图]                              │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│  10:00   10:30   11:00   11:30   12:00         │
└─────────────────────────────────────────────────┘

预估: 4 天

3.2 请求依赖分析

目标: 可视化请求之间的依赖关系

场景: 页面加载时多个请求的先后顺序

UI:

  /api/config ────┬──> /api/user ────┐
                  │                   │
                  └──> /api/feature   ├──> /api/home
                                      │
          /api/session ───────────────┘

预估: 5 天

3.3 异常检测

目标: 自动识别异常请求模式

检测规则:

  • 响应时间突增（> 2x 历史均值）
  • 错误率突增
  • 请求量异常（> 3x 或 < 0.3x）

预估: 3 天

Phase 4: 导出增强 (优先级: 🔵 Low)

4.1 Postman 导出

目标: 导出为 Postman Collection

{
  "info": { "name": "Exported Collection" },
  "item": [
    {
      "name": "GET /api/users",
      "request": { "method": "GET", "url": "..." }
    }
  ]
}

预估: 1 天

4.2 OpenAPI 生成

目标: 根据捕获的请求自动生成 OpenAPI 规范

输出:

openapi: 3.0.0
paths:
  /api/users:
    get:
      responses:
        '200':
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/User'

预估: 4 天

📊 优先级总览

阶段 功能 预估 状态
Phase 1 虚拟滚动 3 天 ✅ 已完成
增量加载 2 天 ✅ 已完成
请求缓存 1 天 待开发
Phase 2 请求分组 3 天 ✅ 已完成
请求标签 2 天 待开发
请求模板 2 天 待开发
响应体对比 2 天 待开发
Phase 3 性能分析面板 4 天 待开发
请求依赖分析 5 天 待开发
异常检测 3 天 待开发
Phase 4 Postman 导出 1 天 待开发
OpenAPI 生成 4 天 待开发