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

Kayce Basques

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

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

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

控制台中的实时表达式

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

  1. 点击创建实时表达式 创建实时表达式。现场演出 系统会打开表达式界面。

    实时表达式界面

    图 1. 实时表达式界面

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

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

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

  3. 在实时表达式界面外点击一下，以保存您的表达式。

    已保存的实时表达式。

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

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

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

在控制台中输入计算结果为 DOM 节点的表达式，然后立即使用 Eager 评估 会在视口中突出显示该节点

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

图 4. 由于当前表达式计算出一个节点，因此该节点在 视口

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

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

性能面板优化

之前，分析大型网页时，性能面板需要几十秒的时间进行处理， 直观呈现数据在“摘要”标签中点击某个事件有时 需要几秒钟的时间才能加载完毕在 Chrome 70 中，处理和可视化速度更快。

处理和加载性能数据。

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

更可靠的调试

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

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

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

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

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

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

自动补全条件断点

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

自动补全界面

图 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 还提供：

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

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 视频发表评论。

开发者工具的新变化

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