Can I export HAR file from Chrome Dev tools, which contains only the filtered requests from Network tab?

Question

In Chrome Dev tools/Network tab I have filtered the requests using filter like "-.json -.png -.woff2". I want to export the remaining requests (those which are visible on the screen). However when I use "Export HAR..." icon, in the output HAR file I still get all the requests including the hidden. Is there a way to do this?

Thanks in advance

Answer 1

This is currently not possible in Chrome DevTools:

DevTools saves all requests that have occurred since you opened DevTools to the HAR file. There is no way to filter requests, or to save just a single request.

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

However, since a HAR file is just a JSON, you can use something like jq to extract the requests you are interested in.

Let's say that you exported a HAR file from a Wikipedia page and called it wiki.har. Here is how you can create a HAR file containing only the requests for the images on that page:

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

Note 1: _resourceType can be document, image, font, stylesheet, script, other (maybe more? I could not find any documentation about this).

Note 2: the jq documentation recommends using --slurpfile instead of --argfile. However, --slurpfile here would create entries:[[]], while --argfile creates entries:[] (which is what you need). This is probably just me not knowing too much jq though...

See also:

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