28

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

enter image description here

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
  • did you try 'copy all as HAR' and then storing the result as a variable in the console then running some simple code like copy(a.log.entries.map(e => e.request.url).join('\n')) ? May 6, 2020 at 17:59

5 Answers 5

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

enter image description here

Next time you can press CtrlShiftD to toggle docking.


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

  1. Run the following code in this new window:

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

    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('\n'))
  • copy(UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes.map(n => n.request().urlInternal).join('\n'))
18
  • 1
    @Pacerier, No, it's a "hack". I've just examined the source code and the actual values in devtools-for-devtools.
    – wOxxOm
    Oct 11, 2017 at 18:40
  • 1
    The devtools-for-devtools invocation spell itself was mentioned somewhere.
    – wOxxOm
    Oct 11, 2017 at 18:43
  • 1
    As per the source code, it's Promise.all(UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map(node => node._request.contentData().then(data => data.content))).then(console.log)
    – wOxxOm
    Oct 11, 2017 at 19:18
  • 3
    on one computer - the accepted answer works, on another - it fails, both seem to be running up to date chrome. 'ReferenceError - UI is not defined'. any idea why?
    – Joe
    Jul 20, 2018 at 13:03
  • 4
    For me in the latest chrome I had to do it like this: copy(UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes.map(n => n.request().url()).join('\n')) Dec 8, 2021 at 21:26
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
0

Based on @wOxxOm, this worked for me:

var nodes = UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes,
    urls = [];
nodes.forEach(function() {
    var req = arguments[0]._request;
    if (req !== undefined) {
        urls.push(req.url());
    }
});
0

A selection and simple copy (Ctrl+C) work for me. I select URLs in the Url column by the mouse. Then I use the context menu to copy the list to the clipboard. The clipboard contents then I can paste to Excel and get the URL list. It adds some empty lines though.

1
  • Works only for visible urls when selecting in multipage list. Ctrl+A solves this but adds garbage to selection Aug 29, 2022 at 8:54
0

Based on @wOxxOm and @onassar. This worked for March 2023.

window.nodes = UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes;
window.urls = [];
window.nodes.forEach(function() {
    let req_ = arguments[0].request();
    if (req_ !== undefined /*&& req_.statusCode === 404*/) {
        window.urls.push(req_.url());
    }
});
copy(urls.join('\n'));  //copy to clipboard
1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Mar 13 at 2:33

Not the answer you're looking for? Browse other questions tagged or ask your own question.