google-chrome - 在来源/网络选项卡中复制多个 URL

Question

是否可以在 Chrome Dev Tools 的 Sources 或 Network 选项卡中提取多个资源的 URL？
当我想获取 的 URL 时单例资源，我可以用上下文菜单功能复制链接地址



我可以从“网络”到“来源”选项卡切换到此资源，反之亦然，但是如果我需要获取 的 URL 该怎么办？多个 资源一下子？如果结果集包含 200-300 个资源，手动复制它们非常麻烦。

到目前为止我尝试过的:

从源选项卡复制整个文件夹，但从 this answer我发现现在是不可能的。

使用 $(selector)如 Console reference 中所述，以一种形式

$('img')

以防我们需要获取图像 URL。

这种方法的复杂性在于，通常很难区分具有数百个目标图像的页面上的目标图像，此外，同一图像的多个版本( View 、预览、小图标等)，即匹配 具有所需资源的标签内的元素似乎并不那么容易。此外，并非所有文件类型都有专用标签(如 img 的情况)。

也许我应该使用 src用一些修饰符标记？还有其他建议吗？

Answer 1

确保 Network面板处于事件状态

切换开发工具 Dock side在菜单中到一个分离的( float )窗口



下次您可以按 CtrlShiftD 切换停靠。

在现在分离的开发工具中，在 MacOS 上按 CtrlShifti 或 ⌘⌥i，
这将打开 devtools-on-devtools 在新窗口中

在这个新窗口中运行以下代码:
copy(UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map(n => n._request._url).join('\n'))
它会将与当前过滤器匹配的所有请求的 URL 复制到剪贴板。

提示:将代码另存为 Snippet并通过命令面板、CtrlP 或 ⌘P 在 devtools-on-devtools 窗口中运行它，然后键入代码片段的名称。

上述代码的一个变体也在控制台中显示 URL:

var URLs = UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes
  .map(n => n._request._url);
copy(URLs.join('\n'));
URLs; // displays it in the console as an expandable array