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

davka picture davka · Apr 25, 2013 · Viewed 93.3k times · Source

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).

Answer

Konrad Dzwinel picture Konrad Dzwinel · May 2, 2013

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;
};