实用高效的调试技巧：AI + 浏览器 Network 面板导出 HAR

co松柏

发布于 2026-06-15 14:58:19

1180

Hi，我是松柏。

你有没有遇到过这种情况：想分析一个网站的请求响应格式，但是打开浏览器 Network 一看，好家伙得有大几十个网络请求，一个个找不知道得看到啥时候。

又或者前后端接口联调的时候遇到了问题，想把浏览器 Network 面板的一系列请求发给后端同事看看，只能一个个的复制请求头、请求参数、响应数据还容易漏，后端同事回你一句：“能不能把完整的请求信息发我？”

其实浏览器早就内置了一个功能，能把 Network 面板里的所有请求一键导出成一个文件： HAR（HTTP Archive）。

更有意思的是，在如今强大的 AI 能力加持下，HAR 文件又有了一个新玩法：

直接把导出的文件丢给 AI ，让 AI 帮你分析网络请求，什么慢请求、异常状态码、Cookie 问题，AI 几秒钟就能给你列出来：

这篇文章就来详细地聊聊这个功能，废话不多说，点赞关注，我们直接发车！

HAR 是什么

HAR，全称 HTTP Archive，直白点说就是 Network 面板的 JSON 快照。

你在 DevTools 的 Network 面板里看到的每一条请求，包括 URL、方法、请求头、响应头、响应体、Cookie、耗时……全都能打包进一个 .har 文件里。

HAR 格式的规范是 W3C Web Performance Working Group 提出的，虽然没正式发布为 W3C 标准，但主流浏览器全都支持，算是事实标准了。

“HAR 规范详见：http://www.softwareishard.com/blog/har-12-spec/

怎么导出 HAR

操作很简单，以 Chrome 为例：

1）打开 DevTools（F12 或右键 → 检查），切到 Network 面板

2）勾选 Preserve log（这样页面跳转后之前的请求不会丢）

3）点一下清空按钮 🚫，把之前的旧请求清掉，减少噪音

4）复现你要抓的操作（比如点击某个按钮、提交某个表单）

5）点网络面板的导出下载按钮 ⬇

然后你就会得到一个 .har 文件。

Safari、Firefox、Edge 的操作大同小异，都是在 Network 面板里找导出按钮。

HAR 文件长什么样

导出的 .har 文件本质就是一个 JSON，把后缀改成 .json 就可以用文本编辑器打开：

{
  "log": {
    "version": "1.2",
    "creator": {
      "name": "WebInspector",
      "version": "537.36"
    },
    "pages": [...],
    "entries": [...]
  }
}

1）creator — 记录是哪个工具导出的（Chrome 就是 WebInspector）

2）pages — 你访问了哪些页面，每个页面的加载时间

3）entries — 这里是重点。每一条网络请求都是一个 entry，包含 request、response、timings 等信息

展开一个 entry 大概长这样：

{
  "startedDateTime": "2026-06-10T14:51:41.234Z",
  "time": 43.3,
  "request": {
    "method": "GET",
    "url": "https://bookmark-api.lzkz.top/api/auth/me",
    "httpVersion": "http/2.0",
    "headers": [
      { "name": "accept", "value": "*/*" },
      { "name": "content-type", "value": "application/json" },
      { "name": "user-agent", "value": "Mozilla/5.0 ..." }
    ],
    "cookies": []
  },
  "response": {
    "status": 200,
    "headers": [
      { "name": "content-type", "value": "application/json" },
      { "name": "server", "value": "nginx" }
    ],
    "content": {
      "size": 299,
      "mimeType": "application/json",
      "text": "{\"success\":true,\"user\":{\"id\":\"xxx\",\"username\":\"xxx\", ...}}"
    }
  },
  "timings": {
    "blocked": 24.27,
    "dns": -1,
    "ssl": -1,
    "connect": -1,
    "send": 0.11,
    "wait": 18.16,
    "receive": 0.76
  }
}

可以看到，这里记录了请求的 URL、Headers、响应内容、每个阶段的耗时。比如 timings 里的 wait: 18.16 就是等服务器响应花了 18 毫秒，dns: -1 表示复用了已有连接没有重新解析 DNS。排查问题的时候，一眼就能看出时间花在了哪个环节。