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:
- To copy the whole folder from a sources tab, but from this answer I found out it is not possible for now.
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?
I found the above method too clunky, its way easier to use fiddler:
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: