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

Kayce Basques
Kayce Basques
X GitHub

Google 用户调研。

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

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

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

控制台中的实时表达式

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

  1. 点击创建实时表达式图标 创建实时表情。系统会打开实时表情界面。

    实时表达式界面

    图 1. 实时表达式界面

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

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

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

  3. 点击“实时表情”界面之外的区域，以保存您的表情。

    已保存的实时表达式。

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

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

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

在控制台中输入可评估为 DOM 节点的表达式，主动评估功能现在会在视口中突出显示该节点。

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

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

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

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

“性能”面板优化

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

处理和加载性能数据。

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

更可靠的调试

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

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

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

您现在可以从命令菜单中将网络限速设置为“高速 3G”或“低速 3G”。

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

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

自动补全条件断点

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

自动补全界面

图 7. 自动补全界面

您知道吗？ 自动补全界面由 CodeMirror 提供支持，后者还为控制台提供支持。

在 AudioContext 事件上中断

使用事件监听器断点窗格可在 AudioContext 生命周期事件处理脚本的第一行暂停。

AudioContext 是 Web Audio API 的一部分，您可以使用它来处理和合成音频。

“事件监听器断点”窗格中的 AudioContext 事件。

图 8. “事件监听器断点”窗格中的 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;

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

“用户计时”部分。

图 10. “用户计时”部分

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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