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

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

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

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

控制台中的实时表达式

如需实时监控实时表达式的值,请将其固定到控制台顶部。

  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 用户会指示 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 新变化系列中涵盖的所有内容的列表。