CODEWITHSUNDEEP
google-chrome-devtools
user1424739
user1424739

Reputation: 13685

How to capture network info in Chrome devtools when clicking a link pop up a new download tab and closed right away?

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?

Upvotes: 7

Views: 3293

Answers (1)

ymz
ymz

Reputation: 6914

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

Upvotes: 2

Related Questions