7

I’m trying to use chrome devtools to see what network requests are.

But for some links, a new tab will be created for downloading a file and once the file is downloaded the tab is immediately closed.

There is no time to for me to inspect what the network requests are involved in the new tab. Is there a way to force the download in the original window so that I can still see the network activity?

Kit
  • 20,354
  • 4
  • 60
  • 103
user1424739
  • 11,937
  • 17
  • 63
  • 152
  • 1
    Yes. That was the default. The problem is the download is in a new tab. The log in the new tab can not be captured by the original tab. – user1424739 Oct 03 '19 at 21:57
  • 1
    Yes. I meant Preserve log in the network panel. I also tried to devtool window "dock into separate window". But I don't think it helps. Could you try http://useast.ensembl.org/biomart/, then select something to download (click select database ... click "Results" then click "Go" in the row of "Export all results to"). See if it works for you. – user1424739 Oct 04 '19 at 00:39
  • Copy `http://useast.ensembl.org/biomart` and paste to the address box then go. I don't know why clicking the link doesn't work. – user1424739 Oct 04 '19 at 01:09
  • Yes. Basically biomart from ensembl. – user1424739 Oct 04 '19 at 01:10
  • 3
    Possible duplicate of [Chrome Dev Tools: How to trace network for a link that opens a new tab?](https://stackoverflow.com/questions/16210468/chrome-dev-tools-how-to-trace-network-for-a-link-that-opens-a-new-tab) – Niloct Oct 04 '19 at 01:18

1 Answers1

2

As this answer suggest, yo may want to use chrome net export using chrome://net-export/

How it works?

  1. You open a new tab and enter chrome://net-export/
  2. Press the start logging to disk button and select a file
  3. Do whatever
  4. Press the stop recording button and inspect the file (should be formatted to be readable)

How to reproduce?

function popup() {
  window.open('https://google.com', '_blank')
}

<button onclick="popup()">
  click me
</button>

You will get WAY more information than you wished for, so - be patient when going over all the traffic details and also - make your recording as targeted and short as possible

Enjoy

EDIT

@Nathan raises a fair point in the comment - this method is not visual. a tool that may help to visualize the data is netlog viewer

  1. Use the link, press the choose file button and upload your json file
  2. In the left menu select events - this will display all events in a big table
  3. Filter table by using URL_REQUEST or
  4. Click each item to inspect and get detailed information (such as: url, headers, method, etc.)

There are other cool tools there (such as timeline) but it is different from chrome dev tools. This solution is just another set of tools for developers, that's all

ymz
  • 6,602
  • 1
  • 20
  • 39
  • This works in my particular case, but if the download was instant, I'd have to dig around a 34MB `json` file. I lose the GUI tools and the ability to produce a HAR file, etc. – Nathan Goings Dec 13 '22 at 22:11