《60天AI学习计划启动 | Day 35: 前端 AI 调试面板（日志 / 请求回放》

Day 35：前端 AI 调试面板（日志 / 请求回放）

学习目标

• 掌握 记录每次 AI 调用的关键数据（prompt/response/耗时/错误）
• 理解 请求回放的价值（复现问题 / 调 Prompt）
• 会设计 一个简单的前端“调试面板”数据结构

---

核心知识点

• 1. 需要记录什么

  • 请求侧：id / timestamp / prompt / meta(模型、温度、是否RAG/Agent…)
  • 响应侧：answer / duration / tokens(usage) / error(network/server/timeout/biz)

• 2. 调试面板基础形态

  • 列表：最近 N 次调用（倒序）→ 时间 / 用时 / 模型 / 状态
  • 详情：左侧展示请求（prompt + meta），右侧展示响应（answer / error / usage）
  • 核心功能：复制 prompt、（可选）回放同参请求

• 3. 前端实现要点

  • 状态存放：内存中的 debugLogs（可选 localStorage 只存 20~50 条）
  • 写入时机：请求前写入基础信息，请求结束后补全 answer/duration/error
  • 注意脱敏：不要把密码/token/隐私字段原样写进日志

---

实战作业（附代码）

• 作业 1：设计调试日志的 TS 类型

export type DebugStatus = 'ok' | 'error'

export interface DebugMeta {
  model?: string
  temperature?: number
  top_p?: number
  useRag?: boolean
  useAgent?: boolean
  extra?: Record<string, any>
}

export interface DebugLogEntry {
  id: string
  timestamp: number
  prompt: string
  answer?: string
  durationMs?: number
  status: DebugStatus
  errorMessage?: string
  tokens?: {
    prompt?: number
    completion?: number
    total?: number
  }
  meta?: DebugMeta
}

• 作业 2：简单“调试面板”结构（React 伪代码）

interface DebugPanelProps {
  logs: DebugLogEntry[]
  onClear: () => void
}

export const DebugPanel: React.FC<DebugPanelProps> = ({ logs, onClear }) => {
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const selected = logs.find(l => l.id === selectedId) ?? logs[0]

  return (
    <div className="debug-panel">
      <header>
        <span>AI 调试（{logs.length}）</span>
        <button onClick={onClear}>清空</button>
      </header>
      <div className="debug-body">
        <aside className="debug-list">
          {logs.map((l) => (
            <div
              key={l.id}
              className={l.id === selected?.id ? 'item active' : 'item'}
              onClick={() => setSelectedId(l.id)}
            >
              <div>{new Date(l.timestamp).toLocaleTimeString()}</div>
              <div>{l.meta?.model || '-'}</div>
              <div className={l.status}>{l.status} {l.durationMs && `(${l.durationMs}ms)`}</div>
            </div>
          ))}
        </aside>
        <main className="debug-detail">
          {selected && (
            <>
              <h4>Prompt</h4>
              <pre>{selected.prompt}</pre>
              <h4>Answer</h4>
              <pre>{selected.answer}</pre>
            </>
          )}
        </main>
      </div>
    </div>
  )
}

• 作业 3：调试面板中想看的 5 条信息（代码形式）

export const DEBUG_INSPECT_ITEMS: string[] = [
  '实际发送给模型的 system prompt',
  '截断前后的对话长度（消息数/token 数）',
  '是否命中 RAG 以及命中的文档 id 列表',
  '检索耗时 vs 模型生成耗时',
  '本次调用的模型名 / 温度 / top_p 等参数'
]

补上这一段：

---

明日学习计划预告（Day 36）

• 主题：Prompt 实验台 & 前端 A/B 对比
• 目标：
  • 搭一个简单页面：同一个问题，用多套 Prompt 生成多条答案
  • 前端支持快速切换 Prompt 模板、对每个结果打主观评分
• 实现要点：
  • 设计 PromptVariant 类型：id/name/template/说明
  • 一个问题输入框 + 多个「使用不同 Prompt」的调用按钮
  • 结果区按 Prompt 分组展示：Prompt 名 + Answer + 评分按钮

以后每天我都在底部加这个「明日学习计划预告」段落。