开发者工具的新变化 - Chrome 144

Matthias Rohmer

在 Chrome 144 中，该团队向 Chrome DevTools MCP 服务器交付了一项备受期待的功能，即新的“请求条件”面板，并改进了调试字体和采用的样式表。

以上就是我们在 2025 年推出的所有出色功能。想看看自己是否错过了任何一个吗？然后查看以下亮点，或浏览我们过往的“开发者工具的新变化”版本。

DevTools MCP 服务器更新

我们针对 DevTools MCP 服务器进行了各种修复，并发布了 v0.12.1。此版本引入了一项关键的新功能，即自动连接，可让您重复使用现有的浏览器会话。借助自动连接功能，您可以在 Chrome 中自行开始调试，然后将 DevTools MCP 指向同一 Chrome 实例，以便从上次中断的地方继续调试。

如需详细了解开发者工具 MCP 的自动连接，请参阅相关博文。 如需查看完整的变更和 bug 修复列表，请参阅 GitHub 上的公开更新日志。

单独的网络请求节流

“网络请求屏蔽”面板已更名为请求条件。 除了阻止请求之外，您现在还可以使用此面板限制单个请求。

依次点击 ⋮ > 更多工具 > 请求条件，打开该面板。切换启用屏蔽和限制模式复选框，以启用请求屏蔽功能。 点击 + 按钮可添加新的文本模式。点击 图标可舍弃所有规则。

如需了解如何限制单个网络请求，请参阅更新后的文档。

修改 @font-face 和 @font-feature-values 规则

@font-face 和 @font-feature-values 现在显示在样式面板中，并且可以在该面板中进行修改。

“元素”面板中的已采用样式表

元素面板现在会在影子根和文档根下显示采用的样式表。这样一来，使用构造样式表的用户就可以更轻松地找到影响其元素的样式表并调试样式，尤其是在样式意外未应用时。

2025 年开发者工具的新变化

AI 创新功能

从控制台数据分析开始，AI 创新功能现已成为 Chrome 开发者工具不可或缺的一部分，AI 辅助工具面板是上下文感知型 AI 辅助调试的主要中心。借助控制台和“来源”面板中的代码建议以及性能轨迹中 Gemini 提供的自动注释，开发者工具提供了一套全面的 AI 赋能工具来简化您的工作流程。

  • 端到端样式修复：让 Gemini 修复 CSS 问题，并结合工作区，将这些更改直接保存回磁盘上的源文件。
  • 询问效果：现在，您可以在 AI 辅助功能的帮助下讨论完整的效果轨迹，深入分析任何效果数据洞见，或使用 Gemini 为轨迹添加注释。
  • 可视化调试：AI 辅助面板已变为多模态，可让您上传图片或拍摄屏幕截图，帮助 Gemini 了解并协助您调试视觉故障。

性能

我们重新设计了性能面板，让性能调试不再令人望而却步，而是更具实用性。例如，录制的轨迹现在附带精选的数据分析，可帮助您更快地发现瓶颈并更快地浏览轨迹。其他改进包括：

Web 平台

开发者工具紧跟不断发展的 Web 平台，为最新的 CSS 规范添加了专用工具，同时改进了现有功能的开发者体验。

我们为复杂的 CSS 变量链添加了深度跟踪功能，为属性工具提示添加了基准可用性，并且最近引入了调试支持，以便使用 @starting-style 规则和新 display: masonry 布局的可视化编辑器调试复杂的进入动画。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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