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

Matthias Rohmer

Gemini 提供的代码建议

您现在可以在控制台和来源面板中获取 AI 生成的预输入建议。

控制台和“来源”面板中的代码建议功能

如需启用此功能，请依次前往设置 > AI 创新，然后切换代码建议。

开发者工具 MCP 服务器的增强功能

自 v0.2.1 版 DevTools MCP 服务器的公开预览版发布以来，我们通过社区贡献实现了各种改进，并发布了 v0.9.0 版。

  • Node.js 支持已扩展到 Node.js 20。
  • 网络请求和控制台消息可以分页显示，以节省令牌，还可以根据请求类型（例如脚本、样式表、图片）和消息类型（日志、警告、错误）进行过滤。
  • 屏幕截图可以输出到特定路径，并以各种格式保存。
  • 借助可配置的工具类别，您可以整理要公开的功能，从而减少不必要的干扰。
  • 您现在可以将启动实参传递给 MCP 服务器使用的 Chrome 实例。

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

更快地获取 AI 助理的帮助

开发者工具现在包含更多可打开 AI 助理的链接。向 AI 提问上下文菜单项已重命名为借助 AI 进行调试，并根据上下文添加了 AI 可帮助您执行的直接操作。

借助开发者工具右上角新增的按钮，您可以在开发者工具中的任何位置打开 AI 辅助功能。

开发者工具中 AI 辅助功能的新入口点

使用 Gemini 调试完整性能轨迹

在效果面板中记录轨迹后，您现在可以与 Gemini 聊聊完整轨迹、相关效果分析洞见和实地数据，而无需预先选择特定背景信息，所有操作都在同一对话中完成。这样，您就可以更全面地了解性能问题，然后再深入研究。

在 Gemini 的帮助下发现潜在问题后，您可以无缝选择更具体的上下文项（例如轨迹事件或性能分析）进行更仔细的检查，并继续进行同一对话。

同样，您现在可以与 Gemini 讨论效果 > 数据分析中的所有数据分析。

切换抽屉式导航栏方向

现在，抽屉也可以移到侧边了。这样，您就可以并排查看面板，而不是堆叠查看。在主标签栏中右键点击某个面板名称，然后选择移至抽屉，将所选面板移至抽屉。

依次点击 ⋮ > 更多工具，向抽屉中添加其他面板。

抽屉式导航栏中的新切换开关，用于更改方向

Google Developer Program

Google 开发者计划现已集成到开发者工具中，并提供用于管理个人资料的直接链接，以及可赢取的新徽章。

开发者工具设置中的 Google 开发者资料控件

徽章是一项可以选择启用的功能。如需启用徽章，请依次前往设置 > 偏好设置 > 账号，然后开启赢取徽章。

其他亮点

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

  • 应用面板现在支持对所有工作器类型（包括 Service Worker、Shared Worker 和 Dedicated Worker）进行存储检查。
  • :target-current 现在会显示在样式面板中。
  • 网络面板现在可以根据新的 Is ad-related 布尔值过滤请求。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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