11

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,493
  • 14
  • 39
  • 52
hanxue
  • 2,940
  • 4
  • 29
  • 53

2 Answers2

7

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.

sunny moon
  • 171
  • 1
  • 5
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
  • 455,459
  • 31
  • 526
  • 924
  • Thanks for the suggestions, though View Page Info > Media tab shows only the images detected in the web page. It does not show images that are loaded via JavaScript when browsing the page. For example, go to this page https://scufgaming.com/int/scuf-infinity4ps-pro-white and change the colour of the product. New images will load but they don't show in the Media tab. They also don't show with the "Download all images" add-on. – Dan Roberts Jul 19 '19 at 10:53
  • I have added a part for this as well. If you need help finding the required text utilities, let me know first your operating system and which tools you lack. – harrymc Jul 19 '19 at 11:27
  • Editing the HAR works but its time consuming. For fewer than ~20 images, it'd be faster to right-click and "Save Image As". I'm looking for a simpler solution that needs minimal effort and just a few clicks. I'm using Linux but the solution should be browser based and OS independent, so everyone can use it. – Dan Roberts Jul 19 '19 at 23:45
  • Writing a script to edit the HAR and download the images should not be difficult, and then it will not take much time on your side. What is your operating system? – harrymc Jul 20 '19 at 06:36
  • OS is Linux, though I'm looking for a simple solution that anyone can use, without scripts. – Dan Roberts Jul 23 '19 at 12:08
  • Perhaps the [Download Manager add-on](https://addons.mozilla.org/en-US/firefox/addon/s3download-statusbar/?src=search), or tools outside of Firefox. – harrymc Jul 23 '19 at 12:20
  • This does not work – IvanP Jul 27 '22 at 15:44
  • Nice quick way. Need to note that I've discovered that "View Page Info" dialog not by write-clicking on the web page but inside `Instruments` menu. Or with `⌘+I` shortcut. – Paul B Aug 27 '23 at 10:30