【前端】接口日志追踪
1. 问题描述
- 场景:前端提交数据后,接口回调再次添加参数,但页面跳转/刷新导致之前的
console.log
数据丢失。 - 影响:无法追踪完整的请求流程,调试困难。
2. 环境信息
项目 | 说明 |
---|---|
浏览器 | Google Chrome 120+ |
开发者工具 | Chrome DevTools |
技术栈 | 前端:Vue/React/其他 |
接口类型 | RESTful API / GraphQL |
3. 解决方案
3.1 保留控制台日志(推荐)
步骤:
- 打开 Chrome 开发者工具(
F12
或Ctrl+Shift+I
)。 - 切换到 Console 选项卡。
- 勾选 Preserve log 复选框。
(截图示意:红框标注勾选项)
效果:页面跳转后,历史日志仍可查看。
3.2 网络请求追踪
步骤:
- 在开发者工具中切换到 Network 选项卡。
- 勾选 Preserve log。
- 筛选请求类型(如
XHR
或Fetch
)。 - 点击对应请求,查看 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. 验证步骤
- 测试 Preserve log
- 提交数据 → 触发回调 → 检查控制台是否保留日志。
- 检查 Network 请求
- 确认两次请求参数是否按预期发送。
- 验证存储数据
- 检查
localStorage
或sessionStorage
中是否存有历史数据。
- 检查
5. 附录
常见问题
-
Q: 勾选
Preserve log
后日志仍丢失?
A: 可能被代码中的console.clear()
清除,需检查代码逻辑。 -
Q: 如何导出控制台日志?
A: 右键控制台 → Save as… 或使用扩展程序(如 Console Export)。
6. 参考资源
- Chrome DevTools 官方文档
- MDN - Console API