Multiple URLs copy in Sources/Network tab

问题

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:

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

回答2:

I found the above method too clunky, its way easier to use fiddler:

• open fiddler (possibly install it)
• filter on the domain name that you are interested in
• clear the screen
• refresh the web page
• Select the fiddler output
• right click and select copy just the URL's

来源：https://stackoverflow.com/questions/41200450/multiple-urls-copy-in-sources-network-tab