Chrome Dev Tools – where to spot a dns prefetch performed with rel=dns-prefetch

I have doubts the rel-prefetch I am using are really performed as expected. Indeed, I don’t see on webpagetest the dns part seperated form the rest of the line as it should be (see https://stackoverflow.com/a/40380983/1467802 or by one of the chart here about google analytics https://christoph-rumpel.com/2013/04/front-end-performance-part-01-assets-loading/ loading)

View.html


 


In my page I’m calling the following facebook sdk only when a user clicks a button

$('#button").on('click', function(e) {
  window.fbAsyncInit = function() {
      FB.init({
        appId             : fbAppId,
        autoLogAppEvents  : true,
        status            : false,
        xfbml             : true,
        version           : 'v2.11'
      });

    };
    (function(d, s, id){
      console.log('LIBRARY - Loading and initializing Facebook javascript SDK');
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id; js.async = true;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk')
    );
});

So when I load the page and check Chrome Dev Tools, I was expecting not to see the sdk (that’s to be expected as it will only load when I click the #button) but at least to see somewhere the dns lookup already but I don’t see any sign/hints about this prefetch request on the Network tab nor on the Performance tab.
And when I click the #button, a line appears for sdk.js in Network tab but checking the Timing details, I see the dns is just before the rets, there’s no “gap” between them ,and it seems it did not occur well before the rest as it should have.

How and where to spot those “dns prefetching” inside Chrome Dev tools.

I’m giving here the example of fb script but for my other scripts it’s the same thing.