此页面由 Cloud Translation API 翻译。

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

Kayce Basques

欢迎回来！距离我们上次针对 Chrome 68 进行的更新已经过去大约 12 周了。我们跳过了 Chrome 69，因为我们没有足够的新功能或界面更改，不值得发布。

Chrome 70 中的开发者工具即将发布的新功能和重大更改包括：

控制台中的实时表达式。
在 Eager Evaluation 期间突出显示 DOM 节点。
性能面板优化。
更可靠的调试。
通过命令菜单启用网络节流功能。
自动补全条件断点。
在 AudioContext 事件发生时中断。
使用 ndb 调试 Node.js 应用。
额外提示：使用 User Timing API 衡量真实的用户互动。

继续阅读或观看本文档的视频版本：

控制台中的实时表达式

如果您想实时监控实时表达式的值，请将其固定到控制台顶部。

点击创建实时表达式 。此时将打开 Live 表达式界面。

图 1. 实时表达式界面
输入要监控的表达式。

图 2. 在实时表达式界面中输入 Date.now()
在实时表达式界面外点击一下，以保存您的表达式。

图 3. 已保存的实时表达式

实时表达式值每 250 毫秒更新一次。

在 Eager 评估期间突出显示 DOM 节点

在控制台中输入求值为 DOM 节点的表达式，Eager Evaluation 现在会在视口中突出显示该节点。

注意：突出显示的节点仅在您输入时更新。而不会按一定间隔进行更新。例如，如果您输入 document.activeElement（用于跟踪获得焦点的元素），然后在页面中按 Tab 键，则开发者工具仍会突出显示您最初输入表达式时处于活动状态的节点。

在控制台中输入 document.activeElement 后，视口中会突出显示一个节点。

图 4. 由于当前表达式的计算结果是一个节点，因此该节点会在视口中突出显示

以下是一些可能对您有用的表达式：

document.activeElement，用于突出显示当前获得焦点的节点。
document.querySelector(s)，用于突出显示任意节点，其中 s 是 CSS 选择器。这相当于将鼠标悬停在 DOM 树中的某个节点上。
$0：用于突出显示 DOM 树中当前选定的任何节点。
$0.parentElement：用于突出显示当前所选节点的父级。

性能面板优化

以前，在对大型页面进行性能分析时，“性能”面板需要几十秒的时间来处理和直观呈现数据。在“摘要”标签页中点击某个事件以详细了解该事件有时也需要花费数秒的时间进行加载。在 Chrome 70 中，处理和可视化速度更快。

图 5. 处理和加载性能数据

更可靠的调试

Chrome 70 修复了一些会导致断点消失或无法触发的错误。

该版本还修复了与源代码映射相关的 bug。某些 TypeScript 用户会指示开发者工具在单步调试代码时忽略某个 TypeScript 文件，而开发者工具会忽略整个捆绑的 JavaScript 文件。这些修复还解决了导致“Sources”面板通常运行缓慢的问题。

通过命令菜单启用网络节流功能

您现在可以通过命令菜单将网络节流功能设置为快速 3G 或慢速 3G。

命令菜单中的网络节流命令。

图 6. 命令菜单中的网络节流命令

自动补全条件断点

使用自动补全界面，可以更快地输入 Conditional Breakpoint 表达式。

自动补全界面

图 7. 自动补全界面

您知道吗？ 自动补全界面的实现离不开 CodeMirror，它也为 Console 提供支持。

AudioContext 事件发生中断

使用 Event Listener Breakpoints 窗格可在 AudioContext 生命周期事件处理脚本的第一行暂停。

AudioContext 是 Web Audio API 的一部分，可用于处理和合成音频。

Event Listener Breakpoints 窗格中的 AudioContext 事件。

图 8. Event Listener Breakpoints 窗格中的 AudioContext 事件

使用 ndb 调试 Node.js 应用

ndb 是适用于 Node.js 应用的新调试程序。除了通过开发者工具获得的常规调试功能之外，ndb 还提供以下功能：

检测并附加到子进程。
需要在模块之前放置断点。
在开发者工具界面中修改文件。
默认情况下将忽略当前工作目录之外的所有脚本。

NDB 界面。

图 9. NDB 界面

如需了解详情，请查看 ndb 的自述文件。

额外提示：使用 User Timing API 衡量真实的用户互动

想要衡量真实用户在您的网页上完成关键历程所需的时间吗？请考虑使用 User Timing API 检测代码。

例如，假设您想要衡量用户点击号召性用语 (CTA) 按钮之前在首页上停留的时间。首先，您需要在与网页加载事件关联的事件处理脚本中标记历程的开始，例如 DOMContentLoaded：

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

然后，您需要标记旅程的结束点，并计算点击按钮时该旅程的时长：

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

您还可以提取测量结果，轻松将其发送到您的分析服务，以收集匿名的汇总数据：

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

开发者工具会在性能记录的 User Timing 部分自动标记您的用户计时测量。

“用户计时”部分。

图 10. “用户计时”部分

这在调试或优化代码时也非常方便。例如，如果要优化生命周期的特定阶段，请在生命周期函数的开始和结束时调用 window.performance.mark()。React 在开发模式下执行此操作。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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