多个URL在“源/网络”选项卡中复制

Question

是否可以在Chrome开发工具的来源或网络标签中提取多个资源的网址？ 当我想获得单个资源的URL时，我可以使用上下文菜单功能复制链接地址

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

到目前为止我尝试过：

1. 要从“来源”标签复制整个文件夹，但是从this answer我发现现在无法复制该文件夹。

2. 使用Console reference中指定的$(selector)，格式为

   $('img')
   

   以防我们需要获取图片网址。

   这种方法的复杂性在于，通常很难区分具有数百个图像的页面上的目标图像，以及相同图像的多个版本（视图，预览，小尺寸图标等）。 匹配标签内的元素与所需资源并不像看起来那么容易。此外，并非所有文件类型都有专用标记（如img的情况）。

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

Answer 1

1. 将devtools切换到分离窗口（单击devtools设置图标，单击“dock side”取消停靠图标）。下次您只需按 Ctrl - Shift - D 。
2. 按 Ctrl - Shift - i
调用devtools-for-devtools
3. 运行此代码，将所有/已过滤的请求的网址复制到剪贴板：copy(UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map(n => n._request._url).join('\n'))

您可以将代码保存为“源”面板中的代码段，然后通过右键单击菜单或Ctrl-Enter运行：

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

Answer 2

我发现上述方法过于笨拙，使用提琴手更容易：

• 打开提琴手（可能安装它）
• 过滤您感兴趣的域名
• 清除屏幕
• 刷新网页
• 选择提琴手输出
• 右键单击并选择仅复制URL的

Answer 3

基于@wOxxOm，这对我有用：

var nodes = UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes,
    urls = [];
nodes.forEach(function() {
    var req = arguments[0]._request;
    if (req !== undefined) {
        urls.push(req.url());
    }
});