Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

How do I trace a network on Google Chrome?

Capturing the network trace file on Google ChromeFrom the Chrome menu bar, select View > Developer > Developer Tools. From the panel that opens, select the Network tab. Look for a round record button in the upper-left corner of the tab, and make sure it is red. If it is grey, click it once to start recording.

How do I find my network tabs in Chrome?

Finding the Console/Network Tab in Google Chrome: Either click the three dots in the top right of your chrome browser to open the menu. Then, go to 'More tools > Developer Tools' and then switch to the Console Tab. Or, Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).


Check out chrome://net-internals/#events (or chrome://net-export in the latest version of Chrome) 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;
};

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

In recent versions (starting with Chrome 50), you can go to the Developer Tools Settings menu (open Developer Tools, then use the 3-dots menu or hit F1) and check the box that says "Auto-open DevTools for popups".


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


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


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

In Chrome 85 (still valid in Chrome 90) "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.