《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?: stringtemperature?: numbertop_p?: numberuseRag?: booleanuseAgent?: booleanextra?: Record<string, any>
}export interface DebugLogEntry {id: stringtimestamp: numberprompt: stringanswer?: stringdurationMs?: numberstatus: DebugStatuserrorMessage?: stringtokens?: {prompt?: numbercompletion?: numbertotal?: 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) => (<divkey={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 + 评分按钮

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