开发者工具的新变化 (Chrome 64)

Kayce Basques
Kayce Basques
X GitHub

Google 用户调研。

欢迎回来！Chrome 64 中即将推出的开发者工具新功能包括：

请继续阅读，或观看下方视频版版本说明。

性能监控

使用性能监控器可实时查看网页加载或运行时性能的各个方面，包括：

  • CPU 使用情况。
  • JavaScript 堆大小。
  • 网页上的 DOM 节点、JavaScript 事件监听器、文档和框架的总数。
  • 每秒的布局和样式重新计算次数。

如果用户报告说您的应用运行缓慢或卡顿，请查看性能监控器以寻找线索。

加载性能为何重要：BookMyShow 构建了一个注重速度的渐进式 Web 应用，从而将转化次数提高了 80%。了解详情。

如需使用性能监控器，请执行以下操作：

  1. 打开命令菜单。

  2. 开始输入 Performance，然后选择 Show Performance Monitor。

    性能监视器 图 1。性能监视器

  3. 点击某个指标即可显示或隐藏该指标。图 1 显示了 CPU 使用情况、JS 堆大小和 JS 事件监听器图表。

相关功能：

  • 效果面板。逐步完成关键用户历程，并记录网页上发生的所有情况，包括 JavaScript 活动、网络请求、CPU 使用率等。也可用于分析加载性能。了解详情。
  • 审核面板。针对任何网址运行一套自动化负载和运行时性能测试。了解详情。

如果您刚开始分析性能，建议先使用审核面板，然后使用性能面板或性能监控器进一步调查。

控制台边栏

对于大型网站，控制台很快就会充斥着无关的消息。使用新的管理中心边栏可减少干扰，专注于对您重要的消息。

使用控制台边栏仅显示错误消息

图 2. 使用控制台边栏仅显示错误消息

控制台边栏默认处于隐藏状态。点击显示控制台边栏图标 显示控制台边栏 即可显示该边栏。

相关功能：

对控制台中的类似消息进行分组

控制台现在默认将相似的消息归为一组。例如，在图 3 中，消息 [Violation] Avoid using document.write() 有 27 个实例。

控制台将相似消息分组在一起的示例

图 3. 控制台将相似消息分组在一起的示例

点击某个群组即可将其展开并查看每条消息的各个实例。

展开的控制台消息组示例

图 4. 展开的控制台消息组示例

取消选中将类似内容归为一组复选框即可停用此功能。

相关功能：

  • 您可以使用 console.group() 对自己的控制台消息进行分组。

本地替换

如果发生这种情况，我们最初计划在 Chrome 64 中推出此功能，但为了完善一些不足之处，在临近截止日期时撤回了该功能。显然，“新变化”界面未及时更新。非常抱歉！

此功能将在 Chrome 65 中发布，而 Chrome 65 将在 Chrome 64 发布后大约 6 周发布。如需了解详情，请参阅本地替换。如果您使用的是 Windows 或 Mac，可以立即下载 Chrome Canary 来试用 Chrome 65。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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