DevTools 中的新变化 - Chrome 143

DevTools MCP 服务器更新

我们对开发者工具 MCP 服务器进行了各种改进，并发布了 v0.11.0。

  • 现在，在 MCP 客户端（Gemini CLI、Cursor 等）中提示时，您可以引用在“元素”和“网络”面板中选择的元素和网络请求
  • list_console_messages 工具现在还包括在问题面板中发现的问题
  • 现在，您可以使用新的 press_key 工具来调试与表单元素无关的键盘事件
  • 现在可以将无障碍功能树快照保存到磁盘
  • 现在可以重新加载网页，并可选择忽略缓存
  • 配置 --user-data-dir 标志以使用现有的 Chrome 个人资料

如需查看完整的更改和 bug 修复列表，请参阅 GitHub 上的公开更改日志，并在公告博文中详细了解开发者工具 MCP 服务器。

改进了轨迹分享功能

“Performance”（性能）面板中的轨迹分享对话框

导出性能轨迹时，您现在可以在导出的文件中添加其他数据，以便您或同事日后更轻松地进行调试。您现在可以选择添加以下内容：

  • 资源内容：所有 HTML、CSS 和 JavaScript 文件（扩展程序脚本除外）的副本
  • 脚本源代码映射：指向已编写代码的映射，可让您查看原始函数名称和源文件。

如需了解哪些信息可以分享，哪些信息最好保持私密，请参阅我们更新的文档。

我们要感谢 Microsoft 的同事，正是因为他们的协作，我们才得以实现这一目标，他们也为这项工作奠定了早期基础。

支持 @starting-style

元素面板现在支持调试新的 CSS @starting-style 规则，这对于创建进入动画至关重要。

现在，您可以在元素树中看到相关元素旁边的 starting-style 装饰器，通过点击信息块切换元素的 starting-style 状态，并在样式标签页中检查和调试 @starting-style 代码块。

显示编辑器 widget：masonry

如果您尝试使用 CSS Masonry 布局，现在可以使用与 display 布局中熟悉的编辑器 widget 相同的编辑器 widget：flex 和 grid 布局，以便在 masonry 布局中快速切换各种对齐选项。

Lighthouse 13

Lighthouse 面板现在运行的是 Lighthouse 13。随着此里程碑的实现，我们完成了在开发者工具和 Lighthouse 中统一性能洞见的工作。

如需了解详情，请参阅公告博文。如需了解 Lighthouse 的用途以及它如何与开发者工具中的“性能”面板相关联，请参阅 Lighthouse：优化您的网站。

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试最前沿的 Web 平台 API，并在用户发现问题之前帮助您找到网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容。