# 调试 Axios 请求（Chrome DevTools）

URL: https://caijiao.org/axios/troubleshooting/debug
Source: docs/axios/troubleshooting/debug.md
Description: 本章节介绍如何使用 Chrome DevTools 调试 Axios 请求，包括查看请求与响应头、响应状态、请求参数、网络耗时、XHR 断点、断网模拟、请求重试调试等方法，帮助开发者快速定位请求问题，优化接口调试与前端数据获取流程。

在前端开发中，调试 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 可以大幅提升前端接口调试效率和定位问题能力。