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

Kayce Basques

欢迎回来！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 DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。