345

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

Tom Hubbard
  • 15,820
  • 14
  • 59
  • 86
davka
  • 13,974
  • 11
  • 61
  • 86
  • 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? – Konrad Dzwinel Dec 13 '13 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 '13 at 08:37
  • 1
    If you want this as a feature, feel free to Star this Chromium bug: http://code.google.com/p/chromium/issues/detail?id=410958 – phsource Oct 15 '14 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 '21 at 11:17

9 Answers9

295

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;
};
Konrad Dzwinel
  • 36,825
  • 12
  • 98
  • 105
  • 17
    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 '13 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 '14 at 17:54
  • 4
    `document.querySelectorAll('a,form')` would also affect forms. – jgb Jun 12 '15 at 09: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. – polkovnikov.ph Aug 04 '16 at 11:23
  • @KonradDzwinel, I mean the solution isn't pure because if you run that script you are affecting the page and hence you're **affecting the result**. For example Chrome might send referrer info if you're opening the link in the same Window and remove that info if it's opened in a new tab. This "solution" doesn't enable investigation of such cases. – Pacerier Jan 23 '17 at 09:17
  • a dev tool like fiddler can help too, complete request responses with header and body and everything – Aran Dekar Feb 03 '17 at 00:08
  • 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. – Jordan Ryder Apr 19 '19 at 14:39
  • That wonderful hacky JS is the only way apparently to get Chrome dev tools to tell you what URL is the starting URL (before a bunch of redirects), when it gets opened in a new tab. Apparently new tab doesn't actually track what URL was the beginning of that new tab in dev tools... seems like a glaring issue. – Don Cheadle Aug 20 '21 at 17:27
158

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

  • 13
    Works fine, except that it is a bit tricky to enable "Preserve logs" immediately once the window is opened. – Erwin Mayer May 20 '16 at 11:50
  • You should update your answer, as chrome stable version is currently 55 – Lulu Jan 24 '17 at 11:44
  • 6
    Sigh, the new window however doesn't have activated. What's wrong with Chrome engineers? – Pacerier Oct 11 '17 at 05:58
  • Use this in combination with https://stackoverflow.com/a/29029881/145400 (a great answer to "Chrome Dev Tools is it possible to keep open even after window closes?")! – Dr. Jan-Philip Gehrcke Sep 07 '18 at 11:17
  • use the 3-dots menu or hit > preferences page > DevTools > "Auto-open DevTools for popups" – holly Apr 28 '19 at 03:14
  • 2
    Check *Preserve Logs* from parent first. Then open popups. – Jehong Ahn May 11 '20 at 01: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 https://stackoverflow.com/a/16344250/9972417) – soscler Jul 07 '21 at 08:19
56

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

Konrad Piascik
  • 679
  • 5
  • 9
  • 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 06 '18 at 13:27
  • 6
    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 '18 at 05: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? – Vince Bowdren Sep 10 '19 at 14:15
32

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.

Tom
  • 1,470
  • 15
  • 13
13

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

Michael L.
  • 191
  • 1
  • 5
  • 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. – Mark Ormesher Jan 12 '16 at 16:39
  • A very useful demonsration of how the target property works. Learned something new today. Thanks. – martixy May 22 '23 at 15:31
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
Sebastien Lorber
  • 89,644
  • 67
  • 288
  • 419
  • 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 '22 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.

orgads
  • 678
  • 8
  • 21
0

Quickly hit F12 when new tab opens

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

Works for me when I monitor Google Drive download responses

Community
  • 1
  • 1
gkiko
  • 2,283
  • 3
  • 30
  • 50
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 *

HttpWatchSupport
  • 2,804
  • 1
  • 17
  • 16