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

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

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

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

控制台中的实时表达式

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

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

    实时表达式界面

    图 1. 实时表达式界面

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

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

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

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

    已保存的实时表达式。

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

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

在 Eager 评估期间突出显示 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 用户会指示开发者工具忽略 某个 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 视频发表评论。

开发者工具的新变化

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