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

Sofia Emelianova

适用于 AI 代理的 Chrome 开发者工具 (MCP)

您现在可以查看新的 Chrome 开发者工具 Model Context Protocol (MCP) 服务器的预览版。它将 Chrome 开发者工具的强大功能引入了 AI 编码助理。

以前，编码代理无法在浏览器中运行代码时看到代码的实际效果。Chrome 开发者工具 MCP 服务器改变了这种情况。AI 编码助理可以直接在 Chrome 中调试网页，并受益于开发者工具的调试功能和性能分析。这有助于提高他们在识别和修复问题时的准确性。

亲自体验一下：

如需了解详情，请参阅 AI 代理的 Chrome 开发者工具 (MCP)。

使用 Gemini 调试网络依赖关系树

效果 > 数据洞见 > 网络依赖树数据洞见现在新增了借助 AI 进行调试按钮，点击该按钮即可前往 AI 辅助面板，以便在 Gemini 的帮助下讨论和调试上述树。

导出与 Gemini 的对话

现在，您可以点击顶部操作栏中的导出对话按钮，导出与 Gemini 的当前对话，也可以点击对话中 Gemini 消息下方的复制回答，将回答复制到剪贴板。

“性能”面板中的持久轨道配置

现在，当您在性能面板中配置记录的轨道时，开发者工具会保存您的配置，并在您重新导入或记录新轨道时应用该配置。

过滤受 IP 地址保护的网络请求

在网络面板中，您现在可以过滤发送到 IP 地址保护代理的请求。

“元素”>“布局”标签页添加了瀑布流布局支持

您现在可以在元素 > 样式标签页中检查 Masonry 布局。

砌体布局是一种布局方法，其中一个轴使用典型的严格网格布局（通常是列），另一个轴使用砌体布局。

Lighthouse 12.8.2

Lighthouse 面板现在运行的是 Lighthouse 12.8.2。

在此版本中，Lighthouse 最显著的变化是将发现的 CSS 自定义属性问题分成了各自的错误消息。

另请参阅完整的变更列表。

如需了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：40543651。

其他亮点

以下是此版本中的一些重要修复和改进：

• 性能：请求空闲回调事件现在包含 timeout 属性 (crbug.com/441679219)。
• 可访问性。屏幕阅读器现在会读出以下内容：
  • 针对推广的命令菜单项添加了“这是一项新功能”（crbug.com/441485154）。
  • 代码补全摘要工具栏 (crbug.com/433952045)。
• 网络：右键点击网络日志项会选中该项 (crbug.com/368510578)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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