google chrome - Multiple URLs copy in Sources/Network tab

Question

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?

Answer 1

1. make sure Network panel is active

2. 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._url).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.

---

A variant of the above code that also displays the URLs in the console:

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