15

I want to save multiple image files from the Network tab in Firefox Web Console

Firefox Web Console

I can right-click on a single file and select Save Image As, but multiple selection does not work.

Files downloaded via XHR

Note that the images are downloaded through user interaction and AJAX / XHR calls. So there is no way to use View Page Info -> ** Media** to save the images. Nor do extensions such as Download all images work.

Burgi
  • 6,768
hanxue
  • 3,134

3 Answers3

11

This can be done from the command line using python3 har-extractor module.

Prerequisite:

  1. Install python3
  2. Install har-extractor: pip install har-extractor

Procedure:

  1. Visit the site in question
  2. Open Developer Tools
  3. Open Network tab
  4. Filter out all response types except Images.
  5. Click the Trash icon to clear the cache
  6. Click Reload
  7. As soon as everything gets downloaded, right-click anywhere in the table of responses > Save All as HAR > Save the .har file somewhere.
  8. From the command line, cd to the directory where you have saved your .har
  9. Run har-extractor <name of your .har file> -o <output directory>,

e.g. har-extractor images.har -o ./images

After this, you can find the full size images in the output directory.

Journeyman Geek
  • 133,878
sunny moon
  • 211
5

Rather than saving from the Network tab, it would be easier done from Page Info:

  • Right-click the web-page and select "View Page Info"

  • Click on the Media tab which will show all media content (images, videos etc) for the page

  • Select all the items using the Shift or Ctrl keys to select multiple items

  • Click the Save As button.

enter image description here

Alternatively, you may also use a specialized add-on such as Download all Images.

In case that you have images that are retrieved by JavaScript and are not referred-to on the page, a method that does use the Network tab in Firefox is as follows:

  • Right-click any image and select "Save All As HAR"
  • Select a folder (and perhaps file-name). The .har file is a JSON text file.
  • Edit the file so as to :
    • delete all lines not containing "url" (or extract these lines)
    • delete the extra text at the beginning of the lines : "url": "
    • delete the extra text at the end of the lines : ",
  • The result is a text file containing the URLs of all the images
  • Use a download utility that can download a list of files

Writing a script to edit the .har file and then to download the images should not be difficult.

harrymc
  • 498,455
-1
  • [✓] I am a windows 10 user.
  • [✓] I don't know python or cmd code.

If so, follow this;

https://github.com/choozn/har-extractor

  • runs on windows.
  • no coding skill is needed.

instructions

  1. install setup.exe at releases page.
  2. open website in firefox
  3. ctrl+shift+i > goto network tab > at right (Cog img) "copy all as HAR."
  4. run HAR_Extractor shortcut at desktop.
  5. youll see a dialog. choose a folder to extract.

Note: jc3 extractor didnt work for me. for firefox HAR output.

bh_earth0
  • 99