How do you save an entire folder from Google Chrome's Developer Tools' Sources tab?

Question

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.

Cd

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. – Twostep

Not supported, but at least there's a feature request at the Chrome bug tracker that you can star and comment on. – Substrate

Answer 1

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

Public

Have you found any workaround though? Share, please. – Radiobiology

Answer 2

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

https://github.com/up209d/ResourcesSaverExt

Shinto

I cannot see the resource tab where is it? I looked everywhere – Frumpish

Found it, had to restart chrome/ – Frumpish

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. – Shinto

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 – Rioux

Done! The feature is now on my Github Repo, though that I think it is easy to do by few Gulp coding lines. – Shinto

This extension is gold! – Oliveira

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. – Scoot

This extension is brilliant! Saving me a ton of time... Thanks! – Ruelle

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: bugs.chromium.org/p/chromium/issues/detail?id=675894 – Anikaanil

Does it work, if website built with ReactJS/VueJS ? – Despair

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? – Sidneysidoma

@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. – Mannequin

Man! Thanks to you I have exported my lost TypeScript code from Chrome. – Cp

this works on linux ? – Longsufferance

This worked great, next question is how do I generate package.json from existing node_modules? – Intercommunion

Answer 3

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

Phloem

Answer 4

I found a very useful tool for this, mostly because I couldn't exactly use the answers I found online. I did a bit of digging and this Chrome extension stands out. It grabbed everything I needed, as long as it was available in the sources tab.

Save All Resources: https://chromewebstore.google.com/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb

After successfully installing the extension, restart your browser and navigate to Devtools >> ResourcesSaver to access the extension. Don't try to go through the extensions tab like me. Waste of time * winks *

Zima