菜鸟教程
教程 axios tutorial

调试 Axios 请求（Chrome DevTools）

在前端开发中，调试 Axios 请求是定位接口问题的关键步骤。Chrome DevTools 提供了丰富的工具帮助开发者快速分析请求与响应。

一、打开 Network 面板

  1. 按 F12 或右键 → “检查” 打开 DevTools。
  2. 切换到 Network 标签。
  3. 确保左上角 Preserve log 勾选，以保留页面刷新后的请求记录。
  4. 在 XHR/Fetch 过滤器中查看 Axios 发出的请求。

二、查看请求详情

点击某条请求，可查看以下信息：

  • Headers：请求 URL、方法、请求头（Headers）、请求体（Payload）
  • Preview / Response：响应内容，JSON 格式可展开查看
  • Timing：DNS 查询、TCP 连接、请求等待和下载耗时
  • Cookies：请求和响应的 Cookie 信息

示例：

js 
axios.get('/api/user', { params: { id: 123 } })
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

在 Network 面板可看到 GET /api/user?id=123 请求及响应数据。

三、模拟网络环境

在 Network → Throttling 中可以模拟：

  • 慢速 3G / 2G
  • 离线模式（Offline）
  • 自定义网络速度

帮助调试请求超时、网络异常和重试策略。

四、XHR / Fetch 断点调试

  1. 切换到 Sources → XHR/fetch Breakpoints。
  2. 勾选“所有请求”或指定 URL 断点。
  3. 当 Axios 请求触发时，浏览器会自动暂停在发起请求的位置，方便调试请求参数和响应处理。

五、Console 面板配合调试

使用 console.log 输出请求配置和响应数据：

js 
axios.get('/api/data')
  .then(res => {
    console.log('请求成功：', res);
  })
  .catch(err => {
    console.error('请求失败：', err);
  });

结合 DevTools Console 与 Network 面板，可快速分析问题。

六、调试跨域请求

  • 查看 Access-Control-Allow-Origin 是否正确返回。
  • 查看 OPTIONS 预检请求是否成功。
  • Network 面板可区分 Request vs Preflight Request。

七、调试请求重试逻辑

  • 在拦截器或封装函数中加 console.log 输出重试次数。
  • 在 Network 面板观察多次请求发起情况。
  • 可模拟网络中断测试重试策略。

八、小结

通过 Chrome DevTools 可以全面调试 Axios 请求，包括：

  • 请求 URL、方法、参数、Headers
  • 响应内容和状态
  • 网络耗时和断点调试
  • 跨域与预检请求分析
  • 网络模拟与请求重试验证

熟练使用 DevTools 可以大幅提升前端接口调试效率和定位问题能力。

相关内容