如何在Google Chrome中调试Early Hints加载异常问题

一、initiatorType从'early-hints'变为'link'的说明 #

Chrome 106及后续版本确实调整了Early Hints触发的预加载资源的initiatorType值，将原本的'early-hints'统一为'link'。这是因为Early Hints本质是通过HTTP 103响应中的Link头触发预加载，和页面内<link rel="preload">标签触发的预加载逻辑对齐，所以Chrome将这类资源的发起类型统一标记为'link'，不再单独使用'early-hints'标识。

二、调试Early Hints的实用方法 #

• 检查Network面板的Initiator列：在Chrome DevTools的Network面板中，找到目标资源，查看其Initiator字段。如果是Early Hints触发的预加载，该字段会显示“103 Early Hints”及对应的Link头内容，明确标注资源的发起来源。
• 确认103响应及Link头：在Network面板中，找到主文档的请求条目，展开查看是否存在103 Early Hints的响应记录，同时检查该响应的Headers中是否包含正确的Link预加载指令（格式如Link: /path/to/resource; rel=preload; as=type）。
• Performance面板验证加载时序：录制页面加载的Performance日志，观察目标资源的加载启动时间。如果Early Hints生效，资源的加载开始时间会早于主文档的响应完成时间（即主文档的DOMContentLoaded或Load事件之前）。
• 通过Performance API验证预加载状态：在控制台执行performance.getEntriesByType('resource')，筛选目标资源后，查看fetchStart时间是否明显早于主文档的加载起始时间，同时确认transferSize等字段是否正常（预加载成功的资源会有有效的传输大小值）。
• 导出网络日志排查细节：打开chrome://net-export/页面，导出网络交互日志，在日志中搜索“early_hints”关键词，可查看Chrome对103响应的接收、解析过程，以及是否成功触发预加载的详细记录。

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