如何在Chrome DevTools检测rel=dns-prefetch的DNS预取并排查生效异常

嘿，我完全懂你现在的困扰——怀疑rel=dns-prefetch没按预期干活，WebPageTest里看不到DNS环节和其他请求分离，而且你的页面是用户点按钮才加载Facebook SDK，确实得搞清楚预取到底生效没。下面我一步步教你用Chrome DevTools排查：

方法一：用Network面板筛选DNS请求 #

• 打开Chrome DevTools（按F12或者Ctrl+Shift+I就行），切换到Network面板
• 点击面板顶部的筛选器按钮，选择DNS选项（或者直接在筛选框里输入dns）
• 刷新页面后，你应该能看到针对Facebook相关域名（比如connect.facebook.net）的DNS请求，状态码一般是200 OK或者304 Not Modified
• 划重点：如果预取成功，这个DNS请求会在页面加载早期就发起，肯定早于你点击按钮加载SDK的时间

方法二：查看浏览器的DNS缓存与预取记录 #

• 直接在Chrome地址栏输入chrome://net-internals/#dns，这个页面能看到浏览器所有的DNS缓存和预取记录，包括每个域名的解析时间、过期时间，还有是否是预取触发的
• 另外，也可以在DevTools的Security面板里，点击对应域名证书旁边的箭头展开详情，里面也会有DNS预取的相关状态

额外排查小技巧 #

• 先检查你的标签写法对不对：正确的格式是<link rel="dns-prefetch" href="//connect.facebook.net">，href要带//前缀，别加http/https，这样兼容http和https环境
• 如果域名已经在浏览器DNS缓存里了，预取请求不会重复发起，这时候你可以先清空DNS缓存（在chrome://net-internals/#dns页面点Clear host cache）再测试
• 要是你是通过JS动态添加的dns-prefetch标签，一定要确保代码在页面加载早期就执行，别等到用户点击按钮才加，那预取就没意义了

内容的提问来源于stack exchange，提问作者Mathieu