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

Question

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

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

到目前为止我尝试过的:

1. 要从源选项卡复制整个文件夹,但从这个答案我发现现在不可能.

2. 要$(selector)以控件参考中指定的方式使用,请使用

   $('img')
   

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

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

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

Answer 1

1. 将devtools切换到分离窗口(单击devtools设置图标,单击"dock side"取消停靠图标).下次你可以按Ctrl- Shift- D.
2. 按调用devtools换devtools Ctrl- Shift-i
3. 运行此代码以将所有/已过滤的请求的URL复制到剪贴板: 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