源/网络选项卡中复制多个URL [英] Multiple URLs copy in Sources/Network tab

问题描述

是否可以在Chrome Dev Tools的来源或网络标签中提取多个资源的网址？

当我想要获取单一资源的网址时，我可以它带有上下文菜单功能复制链接地址

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

到目前为止我已经尝试过了：

1. 从源选项卡复制整个文件夹，但是从
   
p>要使用 $（选择器）



  $（（））的形式显示命令行参考rel =nofollow noreferrer>控制台引用。 'img'）
  

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



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

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

解决方案

1. 将devtools切换到分离窗口点击devtools设置图标，点击dock side图标）。下次只需按 Ctrl - Shift - D 。


2. 调用devtools-for-devtools按 Ctrl - Shift - i


3. 运行此代码复制所有/请求剪贴板： copy（UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map（n => n._request._url）.join（'\\\
'）） code



您可以将代码作为片段保存在来源面板中，并通过右键菜单或Ctrl-Enter运行：

$ b

  var URLs = UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map （n => n._request._url）; 
 copy（URLs.join（'\\\
'））; 
网址; //以可扩展数组的形式显示在控制台中
  

Is it possible to extract multiple resources' URLs in Sources or Network tab of Chrome Dev Tools?
When I want to get URL of a single resource, I can do it with context menu function Copy link address

I can switch to this resource from Network to Sources tab and vice versa, but what if I have a need to get URLs of multiple resources at once? It is very cumbersome to copy them manually if resultset consists of 200-300 resources.

What I've tried so far:

1. To copy the whole folder from a sources tab, but from this answer I found out it is not possible for now.

2. To use $(selector) as specified in the Console reference, in a form of

   $('img')
   

   in case we need to fetch image URLs.

   The complexity of this approach is that it's often hard to distinguish target images on a page that has hundreds of them, and furthermore, multiple versions of the same image (views, previews, small-sized icons and etc.) I.e. to match the element inside the tag with the needed resource is not that easy, as it seems. Also not all the file types have dedicated tags (as in the case with img).

Maybe I should use src tag with some modifiers? Any other suggestions?

解决方案

1. Switch devtools to detached window (click devtools settings icon, click "dock side" undock icon). Next time you can simply press Ctrl-Shift-D.
2. Invoke devtools-for-devtools by pressing Ctrl-Shift-i
3. Run this code to copy the URLs of all/filtered requests to clipboard: copy(UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map(n => n._request._url).join('\n'))

You can save the code as a Snippet in Sources panel and run it via rightclick-menu or 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

这篇关于源/网络选项卡中复制多个URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！