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

欢迎回来!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 视频发表评论。

开发者工具的新变化

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