如何通过纯JavaScript或Web API获取HAR文件及其中的请求响应大小数据

实现前提 #

普通网页运行的JavaScript没有权限读取浏览器标签页的网络请求数据，只有两种场景可以实现HAR采集：

• Chrome/Edge等 Chromium 内核浏览器的扩展程序上下文
• 浏览器DevTools（开发者工具）的控制台运行环境

具体实现 #

1. 采集HAR数据 #

使用Chromium内核提供的chrome.devtools.network.getHARAPI即可直接获取当前标签页的HAR日志对象，代码如下：

// 仅可在DevTools扩展/DevTools控制台上下文运行
chrome.devtools.network.getHAR((harLog) => {
  // harLog就是符合HAR规范的完整日志对象
  console.log('完整HAR数据：', harLog);
});

2. 导出HAR文件 #

拿到HAR对象后可以直接导出为本地.har文件：

chrome.devtools.network.getHAR((harLog) => {
  const harContent = JSON.stringify(harLog, null, 2);
  const blob = new Blob([harContent], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'network-logs.har';
  link.click();
  URL.revokeObjectURL(url);
});

你提到的响应大小计算代码使用方法 #

var totalSize = entry.response.headersSize + entry.response.bodySize;这段代码用于计算单条网络请求的总响应大小，其中：

• entry是HAR日志中entries数组的单个元素，对应一条网络请求的完整记录
• entry.response.headersSize：响应头的总字节大小
• entry.response.bodySize：响应体的总字节大小
  完整使用示例如下：

chrome.devtools.network.getHAR((harLog) => {
  // 统计所有请求的总响应大小
  let totalAllSize = 0;
  harLog.entries.forEach(entry => {
    // 单条请求总响应大小计算
    var totalSize = entry.response.headersSize + entry.response.bodySize;
    console.log(`请求地址：${entry.request.url}，总响应大小：${totalSize} 字节`);
    totalAllSize += totalSize;
  });
  console.log(`页面所有请求总响应大小：${totalAllSize} 字节`);
});

注意事项 #

• 缓存命中的请求bodySize会返回0，如需获取资源实际大小可以取entry.response.content.size字段
• 非Chromium内核浏览器（如Safari、Firefox）可以使用对应浏览器提供的devtools网络API，逻辑基本一致

内容的提问来源于stack exchange，提问作者Aditya Tiwari