【前端】接口日志追踪

1. 问题描述

• 场景：前端提交数据后，接口回调再次添加参数，但页面跳转/刷新导致之前的 console.log 数据丢失。
• 影响：无法追踪完整的请求流程，调试困难。

2. 环境信息

项目	说明
浏览器	Google Chrome 120+
开发者工具	Chrome DevTools
技术栈	前端：Vue/React/其他
接口类型	RESTful API / GraphQL

---

3. 解决方案

3.1 保留控制台日志（推荐）

步骤：

1. 打开 Chrome 开发者工具（F12 或 Ctrl+Shift+I）。
2. 切换到 Console 选项卡。
3. 勾选 Preserve log 复选框。

（截图示意：红框标注勾选项）

效果：页面跳转后，历史日志仍可查看。

---

3.2 网络请求追踪

步骤：

1. 在开发者工具中切换到 Network 选项卡。
2. 勾选 Preserve log。
3. 筛选请求类型（如 XHR 或 Fetch）。
4. 点击对应请求，查看 Headers、Request Payload、Response。

关键字段：

Request URL: /api/submit
Request Method: POST
Payload: { "param1": "value1", "param2": "value2" }

---

3.3 代码层增强日志

方案1：使用 localStorage 持久化

// 提交时保存数据
function submit(data) {
  console.log("提交数据:", data);
  localStorage.setItem("lastSubmitData", JSON.stringify(data));
}

// 回调时读取
function callback() {
  const lastData = JSON.parse(localStorage.getItem("lastSubmitData"));
  console.log("上次提交数据:", lastData);
}

方案2：历史记录数组

const requestHistory = [];

function submit(data) {
  requestHistory.push(data);
  console.log("历史请求:", requestHistory);
}

---

3.4 高级调试工具

工具	用途	链接
Chrome DevTools	实时调试、性能分析	官方文档
LogRocket	录屏+日志重现用户操作	官网
Sentry	错误监控与请求追踪	官网

---

4. 验证步骤

1. 测试 Preserve log
   • 提交数据 → 触发回调 → 检查控制台是否保留日志。
2. 检查 Network 请求
   • 确认两次请求参数是否按预期发送。
3. 验证存储数据
   • 检查 localStorage 或 sessionStorage 中是否存有历史数据。

---

5. 附录

常见问题

• Q: 勾选 Preserve log 后日志仍丢失？
  A: 可能被代码中的 console.clear() 清除，需检查代码逻辑。

• Q: 如何导出控制台日志？
  A: 右键控制台 → Save as… 或使用扩展程序（如 Console Export）。

---

6. 参考资源

• Chrome DevTools 官方文档
• MDN - Console API