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

Kayce Basques

欢迎回来！距离上次更新（针对 Chrome 68）已经过去大约 12 周了。我们跳过了 Chrome 69，因为没有足够的新功能或界面变更值得撰写一篇文章。

Chrome 70 中 DevTools 的新功能和重大变更包括：

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

控制台中的实时表达式

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

  1. 点击创建实时表达式 创建实时表达式。系统随即会打开实时表达式界面。

    实时表达式界面

    图 1. 实时表达式界面

  2. 输入要监控的表达式。

    在实时表达式界面中输入 Date.now()。

    图 2. 在实时表达式界面中输入 Date.now()

  3. 点击“实时表达式”界面以外的区域以保存表达式。

    已保存的实时表达式。

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

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

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

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

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

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

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

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

性能面板优化

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

处理和加载效果数据。

图 5. 处理和加载效果数据

更可靠的调试

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

还修复了与源代码映射相关的 bug。某些 TypeScript 用户会指示 DevTools 在单步调试代码时忽略某个 TypeScript 文件，但 DevTools 会忽略整个捆绑的 JavaScript 文件。这些修复还解决了导致“来源”面板运行缓慢的问题。

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

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

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

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

自动补全条件断点

使用自动补全界面更快地输入条件断点表达式。

自动补全界面

图 7. 自动补全界面

您知道吗？ 自动补全界面得益于 CodeMirror，后者也是控制台的依托。

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 还提供以下功能：

  • 检测和附加到子进程。
  • 必须在模块之前放置断点。
  • 在 DevTools 界面中修改文件。
  • 默认情况下，忽略当前工作目录之外的所有脚本。

ndb 界面。

图 9. NDB 界面

如需了解详情，请参阅 ndb 的 README。

额外提示：使用 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 部分中，DevTools 会自动标记您的 User Timing 测量结果。

“用户计时”部分。

图 10. “用户计时”部分

在调试或优化代码时，这也很有用。例如，如果您想优化生命周期的某个阶段，请在生命周期函数的开头和结尾调用 window.performance.mark()。React 在开发模式下执行此操作。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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