143

In Google Chrome's Developer Tools' Sources tabs there is a left side panel which has three tabs with the first one being Sources. Is there a way to download a folder with multiple files and nested folders from this interface? You can right click individual files and 'Save as...' but this is cumbersome.

Lokesh Dhakar
  • 5,289
  • 5
  • 22
  • 24
  • This would be a really nice feature to have, thanks to the unfortunate trend of loading lots of sources not referenced in the response text. – Abram Apr 14 '17 at 23:09
  • Not supported, but at least there's a [feature request](https://bugs.chromium.org/p/chromium/issues/detail?id=675894) at the Chrome bug tracker that you can star and comment on. – Husky Jan 12 '18 at 19:45

3 Answers3

294

It's not possible to do directly with Chrome, so I made a batching extension to automatically fetch resources to the Downloads folder. You can have a try.

Save All Resources Extension | Github

Up209d
  • 4,364
  • 4
  • 13
  • 10
  • I cannot see the resource tab where is it? I looked everywhere – Suraj Jain Feb 20 '18 at 10:57
  • 2
    Found it, had to restart chrome/ – Suraj Jain Feb 20 '18 at 10:58
  • 7
    Normally, I think it will only need to restart the inspector, not entire Chrome (if it is already opened at the installing time), I should add a note to the instruction later on. Thank you. – Up209d Feb 20 '18 at 23:42
  • It would be much appreciated if you update the extension, so it can download prettified code. For example, if source maps are available ( webpack:// in Resources ) one can download prettified code and modules – Chris Panayotoff Apr 02 '18 at 09:01
  • Done! The feature is now on my Github Repo, though that I think it is easy to do by few Gulp coding lines. – Up209d Apr 03 '18 at 07:19
  • 2
    This extension is gold! – Amey Mar 16 '20 at 06:04
  • Looks like the extension is not available in the webstore anymore, you can still install the extension by going to `chrome://extensions/` and using `Load unpacked` to load the `unpacked` folder from the GitHub repo. – null May 27 '20 at 10:07
  • This extension is brilliant! Saving me a ton of time... Thanks! – Jeff Kilbride Nov 16 '20 at 05:14
  • This extension is still available. It worked great and was easy to use. Had to restart browser, load webpage, then open dev tools and there is a new tab named "ResourcesSaver". I also starred the Chromium feature request: https://bugs.chromium.org/p/chromium/issues/detail?id=675894 – Randy Burden Jan 15 '21 at 23:12
  • Does it work, if website built with ReactJS/VueJS ? – STA Feb 21 '21 at 12:52
  • Just an observation but this tool doesn't download any folders coloured orange in the sources file tree. Does anyone know of a tool that does? – Jack Dewhurst Feb 24 '21 at 10:20
  • @JackDewhurst those folders represent the virtual filesystem inside a bundled source. I just tried the extension on some bundled files and it did successfully extract the entire original set of files in the correct directory struture, but it put the top directory in an unexpected place within the archive. Maybe try a search for the filenames within the zip. – Rik Smith-Unna May 10 '21 at 12:10
  • 3
    Man! Thanks to you I have exported my lost TypeScript code from Chrome. – Luk Deathrage Prochzka Jun 24 '21 at 16:16
25

Currently not possible.

"Saving whole folders is not currently supported."

https://github.com/GoogleChrome/devtools-docs/issues/30#issuecomment-76999063

Here is the corresponding issue in the Chromium Bug Tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=675894

null
  • 3,959
  • 1
  • 21
  • 28
Adam Finley
  • 1,550
  • 1
  • 16
  • 28
15

You can look at my CLI tool, webdumper: https://github.com/EllyMandliel/WebDumper

Installation and usage:

npm i -g @yokra/webdumper
webdumper -u https://website.com/ -o /path/to/output/folder
melMass
  • 3,813
  • 1
  • 31
  • 30
user3312767
  • 328
  • 1
  • 5
  • 11