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

欢迎回来!我们上次更新 Chrome 68 了,到现在大约 12 周了。我们跳过了 Chrome 69,因为我们的新功能或界面更改不足以支持发布新的版本。

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

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

控制台中的实时表达式

如果您想实时监控某个实时表达式的值,请在控制台顶部固定该表达式。

  1. 点击 Create Live Expression 图标 创建实时表达。“实时表达式”界面随即会打开。

    实时表达界面

    图 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。

还修复了与源代码映射相关的 bug。有些 TypeScript 用户会指示开发者工具在单步调试代码时忽略某个特定的 TypeScript 文件,而让开发者工具忽略整个捆绑的 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 还提供:

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

NB 界面。

图 9. NB 界面

如需了解详情,请查看 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;

开发者工具会自动在“Performance”(性能)记录的 User Timing(用户计时)部分中标记您的用户计时测量结果。

“用户计时”部分。

图 10. “用户计时”部分

这在调试或优化代码时也很有用。例如,如果要优化生命周期的特定阶段,请在生命周期函数的开始和结束时调用 window.performance.mark()。React 会在开发模式下执行此操作。

下载预览渠道

您可以考虑将 Chrome Canary 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变化,或讨论与开发者工具有关的任何其他内容。

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59