333

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

4
  • Since this question gets quite a lot of attention, I started to wonder if I can provide a better solution. Would making all links to open in the same tab do the trick? Dec 13, 2013 at 11:41
  • @KonradDzwinel This was a one-off task for me and I moved on so I can't tell you. If you care to try and write an answer I'll be glad to accept it.
    – davka
    Dec 29, 2013 at 8:37
  • 1
    If you want this as a feature, feel free to Star this Chromium bug: code.google.com/p/chromium/issues/detail?id=410958
    – phsource
    Oct 15, 2014 at 21:21
  • I miss Firefox because until today there was not a good way to use it except with external software. Auto popups is silly.
    – Kxrr
    Jul 22, 2021 at 11:17

9 Answers 9

289

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;
};
8
  • 16
    thanks this is cool, but I want the list as in the dev tools (requests&response with all headers), just for another tab
    – davka
    May 21, 2013 at 12:42
  • This is very interesting particularly if you ad the filter type:URL_REQUEST, but it does not seem to contain the same information as the Network tab. For instance, it seems to strip cookie data for both requests and responses.
    – Patrick M
    Jul 22, 2014 at 17:54
  • 4
    document.querySelectorAll('a,form') would also affect forms.
    – jgb
    Jun 12, 2015 at 9:48
  • 1
    I wish I could upvote this twice. I've made a content script for chrome that does this on a hotkey, and it literally saved hours of my life. Aug 4, 2016 at 11:23
  • 4
    Chrome displays "The net-internals events viewer and related functionality has been removed. Please use chrome://net-export to save netlogs and the external catapult netlog_viewer to view them.", but chrome://net-export works fantastic. Apr 19, 2019 at 14:39
153

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

7
  • 13
    Works fine, except that it is a bit tricky to enable "Preserve logs" immediately once the window is opened. May 20, 2016 at 11:50
  • You should update your answer, as chrome stable version is currently 55
    – Lulu
    Jan 24, 2017 at 11:44
  • 6
    Sigh, the new window however doesn't have <Preserve Logs> activated. What's wrong with Chrome engineers?
    – Pacerier
    Oct 11, 2017 at 5:58
  • 2
    Check Preserve Logs from parent first. Then open popups.
    – Jehong Ahn
    May 11, 2020 at 1:58
  • 2
    For chrome 90, 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 already checked Preserve log (see stackoverflow.com/a/16344250/9972417)
    – soscler
    Jul 7, 2021 at 8:19
53

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

3
  • 4
    This does unfortunately, not activate "Preserve Logs" in the newly opened window, so if you get a new window and a redirect in said window, the network log will be cleared and begin after the redirect.
    – janh
    Feb 6, 2018 at 13:27
  • 5
    The setting, for those who don't want to click the link to see the image, is "Auto-open DevTools for popups", under the heading "DevTools". Other available settings: "Preserve Log", under "Network"; "Preserve log upon navigation" under "Console".
    – hlongmore
    Nov 27, 2018 at 5:49
  • 5
    This is working for me (Chrome 76), and it is activating "Preserve Logs" when it launches the popup windows' developer tools.This may be activated by me having the Preserve Log setting activated? Sep 10, 2019 at 14:15
26

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.

0
12

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

1
  • Thank you so much for this tip, I never would have thought of it. Exactly what I needed. Works across multiple windows (in Chrome at least), if anyone reading this wants to see how two pages behave at the same time. Jan 12, 2016 at 16:39
12
  • Add/update the link to target="_self"
  • Check "preserve logs upon navigation" in Network tab.
  • Click on the link and gets your request logged
1
  • 1
    works great, thank you!! the only solution here that was really simple, not special config and just works. Just to make it more clear to others here are the steps: 1. copy the link (the one that opens a new tab or window) 2. go to a new tab 3. open dev tools (right click + inspect) 4. go to network tab (this starts recording network traffic on this new tab 5. paste the URL and add ?target="_self" 6. click Enter
    – ng10
    Jun 14, 2022 at 15:16
3

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

0

Quickly hit F12 when new tab opens

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

Works for me when I monitor Google Drive download responses

0

* 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 *

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.