当前位置: 首页 > news >正文

【前端】接口日志追踪

1. 问题描述

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

2. 环境信息

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

3. 解决方案

3.1 保留控制台日志(推荐)

步骤

  1. 打开 Chrome 开发者工具(F12Ctrl+Shift+I)。
  2. 切换到 Console 选项卡。
  3. 勾选 Preserve log 复选框。

在这里插入图片描述

(截图示意:红框标注勾选项)

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


3.2 网络请求追踪

步骤

  1. 在开发者工具中切换到 Network 选项卡。
  2. 勾选 Preserve log
  3. 筛选请求类型(如 XHRFetch)。
  4. 点击对应请求,查看 HeadersRequest PayloadResponse

关键字段

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. 验证存储数据
    • 检查 localStoragesessionStorage 中是否存有历史数据。

5. 附录

常见问题

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

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


6. 参考资源

  • Chrome DevTools 官方文档
  • MDN - Console API
http://www.dtcms.com/a/272176.html

相关文章:

  • 06.消息传递网络
  • 「日拱一码」023 机器学习——超参数优化
  • 判断当前是否为钉钉环境
  • 【Pandas】pandas DataFrame from_dict
  • 1.2.3_1 OSI参考模型
  • STM32F103C8T6单片机内部执行原理及启动流程详解
  • vue3实现pdf文件预览 - vue-pdf-embed
  • 力扣热门算法题 127.单词接龙,128.最长连续序列,130.被围绕的区域
  • MySQL数据库基础教程:从安装到数据操作
  • 快速合并多个CAD图形为单一PDF文档的方法
  • 常见 Docker 错误及解决方法
  • (vue)前端区分接口返回两种格式,一种Blob二进制字节流,一种常规JSON,且将blob响应转为json
  • 基于Catboost算法的茶叶数据分析及价格预测系统的设计与实现
  • 多元函数的切平面与线性近似:几何直观与计算方法
  • 高数附录(1)—常用平面图形
  • 《O-PAS™标准的安全方法》白皮书:为工业自动化系统筑起安全防线
  • msf复现永恒之蓝
  • 每日一SQL 【各赛事的用户注册率】
  • Datawhale AI 夏令营:基于带货视频评论的用户洞察挑战赛 Notebook(下篇)
  • 流媒体服务
  • SIMATIC S7-1200的以太网通信能力:协议与资源详细解析
  • x86架构CPU市场格局
  • WIFI协议全解析05:WiFi的安全机制:IoT设备如何实现安全连接?
  • PHP安全编程实践系列(三):安全会话管理与防护策略
  • 【运维】串口、网络一些基本信息
  • 【超详细】CentOS系统Docker安装与配置一键脚本(附镜像加速配置)
  • Pinia 笔记:Vue3 状态管理库
  • 双模秒切,体验跃迁!飞利浦EVNIA双模游戏显示器27M2N6801M王者降临!
  • UnrealEngine5游戏引擎实践(C++)
  • 如何将多个.sql文件合并成一个:Windows和Linux/Mac详细指南