我可以从 Chrome 开发工具中导出 HAR 文件，它只包含来自网络选项卡的过滤请求吗？

Posted 2023-03-10

【中文标题】我可以从 Chrome 开发工具中导出 HAR 文件，它只包含来自网络选项卡的过滤请求吗？

【英文标题】：Can I export HAR file from Chrome Dev tools, which contains only the filtered requests from Network tab?

【发布时间】：2021-02-08 19:28:42

【问题描述】：

在 Chrome 开发工具/网络选项卡中，我使用“-.json -.png -.woff2”之类的过滤器过滤了请求。 我想导出剩余的请求（那些在屏幕上可见的请求）。 但是，当我使用“导出 HAR ...”图标时，在输出 HAR 文件中，我仍然会收到所有请求，包括隐藏的请求。 有没有办法做到这一点？

提前致谢

【参考方案1】：

这在 Chrome DevTools 中目前是不可能的：

DevTools 将自您打开 DevTools 后发生的所有请求保存到 HAR 文件中。无法过滤请求或仅保存单个请求。

参考。 https://developer.chrome.com/docs/devtools/network/reference/#save-as-har

但是，由于 HAR 文件只是一个 JSON，您可以使用 jq 之类的东西来提取您感兴趣的请求。

假设您从 Wikipedia 页面导出了一个 HAR 文件并将其命名为 wiki.har。以下是创建仅包含对该页面上图像的请求的 HAR 文件的方法：

cat wiki.har | jq 'del(.log.entries)' > wiki-with-no-entries.json
cat wiki.har | jq '.log.entries | map(select(._resourceType == "image"))' > image-entries.json
cat wiki-with-no-entries.json | jq '.log += "entries": $myEntries' --argfile myEntries image-entries.json > wiki-with-image-entries.json

注意 1：_resourceType 可以是 document、image、font、stylesheet、script、other（也许更多？我找不到任何关于此的文档）。

注意 2：jq documentation 建议使用 --slurpfile 而不是 --argfile。但是，这里的--slurpfile 会创建entries:[[]]，而--argfile 会创建entries:[]（这是您需要的）。不过这可能只是我不太了解 jq...

另见：

Create a har file with xhr request only in chrome dev tools

【参考方案2】：

你可以试试 webQsee (https://webqsee.com)。它允许您导出过滤的事件。 HAR 格式是一种选择。其他选项是 Excel（也包含控制台输出）和“行为报告”。它们将网络和控制台输出与屏幕视频相结合。