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

问题描述

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

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

到目前为止我尝试过的:

1. 从源选项卡复制整个文件夹，但从

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

   ---

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

   ---

   3. 在这个新窗口中运行以下代码:

      copy(UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes.map(n => n.request().urlInternal).join(' '))

      它会将与当前过滤器匹配的所有请求的 URL 复制到剪贴板.

   ---

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

   在旧版 Chrome 中，代码不同: copy(UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map(n => n._request._url).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?

   解决方案

   0. make sure Network panel is active
   1. switch devtools Dock side in the menu to a detached (floating) window

   Next time you can press CtrlShiftD to toggle docking.

   ---

   2. in the now detached devtools press CtrlShifti or ⌘⌥i on MacOS,
      which will open devtools-on-devtools in a new window

   ---

   3. Run the following code in this new window:

      copy(UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes.map(n => n.request().urlInternal).join(' '))

      It'll copy the URLs of all requests that match current filter to clipboard.

   ---

   Hint: save the code as a Snippet and run it in devtools-on-devtools window via the commands palette, CtrlP or ⌘P then type the snippet's name.

   In old Chrome the code was different: copy(UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map(n => n._request._url).join(' '))

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