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

Kayce Basques

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

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

性能监控

使用 Performance Monitor 来实时了解网页加载情况的各个方面，或 包括：

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

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

加载性能为何至关重要：在构建 专注于提升速度的渐进式 Web 应用。了解详情。

如需使用 Performance Monitor，请执行以下操作：

  1. 打开命令菜单。

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

    性能监控工具 图 1.通过 性能监视器

  3. 点击某个指标即可将其显示或隐藏。图 1 中的 CPU 使用量、JS 堆大小和 JS 事件监听器图表。

相关功能：

  • 效果面板。了解关键用户历程，并记录设备上发生的一切 包括 JavaScript 活动、网络请求、CPU 使用率等。也可以是 来分析加载性能了解详情。
  • Audits 面板。针对任何网址运行一套自动加载和运行时性能测试。 了解详情。

如果您刚刚开始分析效果，建议您首先使用 Audits 面板，然后使用 Performance 面板或 Performance 进行进一步调查 监控。

控制台边栏

在大型网站上，控制台可能很快会被不相关的消息淹没。使用新版管理中心 侧边栏以减少干扰，并专注于重要邮件。

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

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

控制台边栏在默认情况下处于隐藏状态。点击显示控制台边栏 显示控制台边栏 进行显示。

相关功能：

  • Filter 文本框。输入一些文本，控制台将仅显示包含这些文本的消息 文本。同时也支持正则表达式格式、否定过滤器和网址过滤器。

将类似的控制台消息归为一组

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

控制台将类似消息归为一组的示例

图 3. 控制台将类似消息归为一组的示例

点击某个群组可将其展开，并查看邮件的每个实例。

展开式控制台消息组示例

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

取消选中将类似项目归为一组复选框以停用此功能。

相关功能：

  • 您可以使用 console.group() 对自己的管理中心消息进行分组。

本地替换

如果发生这种情况，我们最初计划在 Chrome 64 中推出此功能，但后来在 以便消除一些粗糙的边缘显然，“新版变化”界面 。非常抱歉！

此功能将在 Chrome 65 中推出，并将在 Chrome 64 之后大约 6 周内推出。查看 如需了解详情，请参阅本地替换。如果您使用的是 Windows 或 Mac，可以通过以下方式立即试用 Chrome 65： 下载 Chrome Canary。

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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