如何从 Google Chrome 的开发者工具的 Sources 标签中保存整个文件夹？答案

【问题标题】：How do you save an entire folder from Google Chrome's Developer Tools' Sources tab?如何从 Google Chrome 的开发者工具的 Sources 标签中保存整个文件夹？
【发布时间】：2014-01-09 17:19:38
【问题描述】：

在 Google Chrome 的开发者工具的 Sources 标签中，有一个左侧面板，其中包含三个标签，第一个是 Sources。有没有办法从这个界面下载一个包含多个文件和嵌套文件夹的文件夹？您可以右键单击单个文件并“另存为...”，但这很麻烦。

【问题讨论】：

这将是一个非常好的功能，这要归功于加载大量未在响应文本中引用的来源的不幸趋势。
不支持，但至少在 Chrome 错误跟踪器中有一个 feature request，您可以对其加注星标和评论。

标签： google-chrome google-chrome-devtools

【解决方案1】：

目前不可能。

“目前不支持保存整个文件夹。”

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

这是 Chromium Bug Tracker 中的相应问题：https://bugs.chromium.org/p/chromium/issues/detail?id=675894

【讨论】：

您找到解决方法了吗？请分享。

【解决方案2】：

只需右键单击 -> 另存为 html -> 类型选择（完整网页）。

适用于 OSX。

【讨论】：

您也可以只执行命令-s。这将保存页面和所有文件，但您会丢失文件夹结构。
使用浏览器内置的“将页面另存为...”或“另存为带有源代码的 html”可能在 1999 年有效，但我认为 OP 正在寻找可以深入挖掘的东西通过客户端脚本并找到所有硬资源并一次下载它们。这正是 up209d 的扩展所做的（见上面的答案）。
嗯。虽然不包括源地图

【解决方案3】：

无法直接使用 Chrome 进行操作，因此我制作了一个批处理扩展程序来自动将资源提取到 Downloads 文件夹。你可以试一试。

Save All Resources Extension | Github

【讨论】：

我看不到资源标签它在哪里？我到处找
找到了，必须重启chrome/
通常情况下，我认为它只需要重新启动检查器，而不是整个 Chrome（如果它在安装时已经打开），我应该稍后在说明中添加注释。谢谢。
如果您更新扩展程序将不胜感激，因此它可以下载美化代码。例如，如果源映射可用（参考资料中的 webpack://），则可以下载美化代码和模块
完成！该功能现在在我的 Github Repo 上，不过我认为只需几行 Gulp 代码就很容易做到。

【解决方案4】：

你可以看看我的 CLI 工具，webdumper：https://github.com/EllyMandliel/WebDumper

安装使用：

npm i -g webdumper

webdumper -u https://website.com/ -o /path/to/output/folder

【讨论】：