💫 Chrome 129 版本已正式发布，DevTools 也带来众多特性更新，主要包括：
📈 Performance 面板带来重大更新，新增实时指标 📝 Autofill 中使用测试地址 🦊 Recorder 支持导出到 Firefox 版 Puppeteer ⛏️ Elements 面板增加更多现代 CSS 伪类
Performance 面板带来重大更新
实时指标观察
性能面板现在可以在本地计算机上以及根据 Chrome UX Report 的现场数据显示 Core Web Vitals 的实时观察结果。这让您无需捕获性能跟踪就能发现性能问题，并了解您的体验与用户的体验相比有多大的代表性。
要查看 LCP 和 CLS 的实时观察结果，请打开性能面板。要查看 INP，请在页面上执行交互。要将本地指标与 Chrome UX 报告中的综合用户体验进行比较，请添加字段数据：在右侧的字段数据部分，单击设置，然后在对话窗口中单击确定。将鼠标悬停在指标值上，即可看到包含更多信息的工具提示。
性能面板会突出显示可改进的指标，并就如何使本地体验与用户体验相匹配提供见解和建议。例如，您可能想对 CPU 或网络进行节流，您可以在同一屏幕右侧的 "记录设置" 部分进行操作。
在Network track 中搜索请求
性能面板中的搜索框现在也可以在 Network track中使用，因此你可以使用 Ctrl / Cmd + F 快捷键查找请求。
查看 performance.mark 和 performance.measure 调用的堆栈跟踪
在摘要选项卡中，性能面板现在会显示 performance.mark 和 performance.measure 调用的堆栈跟踪。您可以使用这些调用，用自定义数据扩展性能跟踪。
Autofill面板中使用测试地址数据
Autofill面板现在可为地址表单提供测试数据。这样，当您在 Chrome 浏览器中没有保存任何地址或使用访客配置文件时，就可以更轻松地测试网站上的地址表单。要使用测试数据自动填充地址表单，请打开Autofill面板，打开复选框 "Show test addresses in autofill menu"，右键单击页面上的地址表单，然后从 "开发工具"菜单中选择其中一个选项。
Recorder 面板：支持导出到 Puppeteer for Firefox
作为 WebDriver BiDi 支持的一部分，Recorder 面板现在可以将记录导出到 Puppeteer for Firefox。有了 Puppeteer 对 Firefox 的支持，您现在就可以使用 Chrome DevTools Recorder 面板记录用户流、导出用户流并在 Firefox 和 Chrome 浏览器上运行。
Elements 面板增加更多现代 CSS 伪类
Elements > Styles 面板中增加了更多现代CSS 相关的伪类的支持，用户调试起来更加方便。
参考链接：https://developer.chrome.com/blog/new-in-devtools-129
1.关注FED实验室(前端开发实验室)获取更多前端热点资讯、技术实践、面试招聘等精彩内容。
2.扫描下面二维码，加小懒好友，进全栈开发交流群，一起学习和进步。
大家都在看
