Chrome 在 Canary 版本中引入了新的调试工具，帮助开发人员识别和修复网站布局稳定性问题。
亮点
- Chrome Canary 添加了一项新的“布局偏移罪魁祸首”功能，可以直观地识别页面布局问题。
- 开发人员现在可以实时查看和重播布局偏移，以查明具体问题。
- 该工具将在未来的版本中从 Chrome Canary 转移到常规 Chrome，但尚未公布日期。
Chrome 开发团队在其开发者工具包中引入了一项新功能，用于解决影响 Web 性能的布局偏移问题。
Layout Shift Culprits 功能目前在 Canary 版本中可用，增强了累积布局偏移 (CLS) 的调试功能。
这标志着近年来该领域的显著进步。
关键细节
新的调试界面在 Chrome 的 Insights Panel 内运行，为开发人员提供：
- 布局转换事件的实时可视化
- 逐帧播放转换事件
- 自动识别最具影响力的转换集群
- 突出显示受影响页面元素的视觉叠加
- 每个转换事件的详细指标
最初分享该功能细节的 Web 性能顾问 Sander van Surksum 指出，开发人员可以将鼠标悬停在已识别的问题区域上，以查看实际的布局变化。
这种可视化功能可以更轻松地查明影响页面稳定性的确切问题。
这一发展意义重大，因为 CLS 是 Google 核心网络指标中的一个关键指标。
CLS 衡量视觉稳定性，影响：
- 用户体验
- 搜索排名
- 移动可用性
- 页面性能得分
Google Chrome 的 Web 性能开发者倡导者 Barry Pollard 重点介绍了这一功能，这是 DevTools 最近一系列改进的一部分。
此工具可能成为性能优化工作流程的重要资源。
实际应用
开发人员可以使用新功能来：
- 识别有问题的第三方内容注入
- 调试动态内容加载问题
- 优化广告展示位置
- 改进媒体元素加载策略
- 微调延迟加载实现
展望未来
此功能目前在 Chrome Canary 中可用，一旦 Chrome 达到稳定版本，它可能会直接影响开发人员优化性能的方式。
它提供有关布局变化的即时视觉反馈，使性能调试更加高效。
开发人员可以单独下载 Chrome Canary，而不是稳定的 Chrome 浏览器，以同时测试两个版本。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
