CODEWITHSUNDEEP
google-chromegoogle-chrome-devtools
davka
davka

Reputation: 14692

Chrome Dev Tools: How to trace network for a link that opens a new tab?

I want to trace the network activity that happens when I click on a link. The problem is that the link opens a new tab, and apparently the Dev Tools works per tab it was open for. "Preserve Log Upon Navigation" does not help.

My current solution is to move to FireFox and HttpFox which does not have this issue. I wonder how all the developers for Chrome manage, this sounds pretty basic (of course I've searched for the answer, didn't find anything helpful).

Upvotes: 369

Views: 170621

Answers (9)

Konrad Dzwinel
Konrad Dzwinel

Reputation: 37913

Check out chrome://net-export for a detailed overview of all network events happening in your browser.

Other possible solution, depending on your specific problem, may be to enable 'Preserve log' on the 'Network' tab:

DevTools > Network > Preserve log

and force all links to open in the same tab by executing the following code in the console:

[].forEach.call(document.querySelectorAll('a'),
    function(link){
        if(link.attributes.target) {
            link.attributes.target.value = '_self';
        }
    });

window.open = function(url) {
    location.href = url;
};

Upvotes: 317

user2404501
user2404501

Reputation:

The feature request mentioned in the comment by phsource has been implemented.

In recent versions (starting with Chrome 90), you can go to the Developer Tools Settings menu (open Developer Tools, then click on the settings icon or hit F1) and then you'll find Auto-open DevTools for popups under Global section.) Make sure you have preserve log checked as well.

Upvotes: 172

Tom
Tom

Reputation: 1530

In Chrome 85 (still valid in Chrome 100) "Auto-open DevTools for popups" is hidden in a new place

DevTools (F12)/Settings (F1, Ctrl + ?)/Preferences/Global (at the end of the list)

enter image description here

And now it keeps the "Preserve log" setting.

Upvotes: 35

Konrad Piascik
Konrad Piascik

Reputation: 707

In Chrome 61.0.3163.100 you now have the following option available. It is accessed by going to the Chrome Dev Tools Settings. It's at the bottom.

Web Inspector settings

Upvotes: 58

HttpWatchSupport
HttpWatchSupport

Reputation: 2844

* Disclaimer: Posted by Developer of HttpWatch *

HttpWatch on Windows can record the network traffic generated when a new Chrome tab or window is opened by enabling auto-recording in Tools->Options->Recording. In the new window click on the HttpWatch icon to view the network trace.

The free version will provide basic information such as URL, status code and elapsed time for each request.

* Disclaimer: Posted by Developer of HttpWatch *

Upvotes: 0

gkiko
gkiko

Reputation: 2289

Quickly hit F12 when new tab opens

https://stackoverflow.com/a/13747562/660408

Works for me when I monitor Google Drive download responses

Upvotes: -1

Sebastien Lorber
Sebastien Lorber

Reputation: 92210

  • Add/update the link to target="_self"
  • Check "preserve logs upon navigation" in Network tab.
  • Click on the link and gets your request logged

Upvotes: 12

Michael L.
Michael L.

Reputation: 379

You can do it this way :

  1. set target="any_window_name" on wanted link.
  2. click on that link once, to open it in new tab.
  3. In opened tab, open developer tools.

  4. go back to origin page and hit that link again.

    The result will be loaded in already prepared window with developer tools opened.

    You can activate "preserve log" option in dev tools (see in Konrad Dzwinel excellent answer) to catch any redirect traffic on that link.

    Note : most people familiar with link target ∈ { _self,_blank,_parent,_top }. But actually any name can be given, this will open a new window with that name, and any subsequent clicks on links,forms or window.open with same target value will be opened in same window. further reading - mdn : window.open , mdn : <a> tag

Upvotes: 13

orgads
orgads

Reputation: 696

In case the opened link does not redirect, you can open the Network tab in the new tab then refresh the tab.

Upvotes: 2

Related Questions