开发者工具中的新功能 (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

WebAssembly 调试支持

默认情况下，开发者工具会启用 设置。 设置 > 实验 > 复选框。 WebAssembly Debugging：Enable DWARF support。如需了解详情，请参阅使用新型工具调试 WebAssembly。

通过此实验，您可以暂停在 Wasm 应用中执行和调试 C 与 C++ 代码，并提供所有可用的调试信息：

  • 您的原始源代码，使用 DWARF 调试信息映射。
  • 调用堆栈中的函数名称易于理解。
  • 断点支持等。

调试程序中暂停了一个 Wasm 应用。

要测试 Wasm 调试，请安装 C/C++ DevTools Support (DWARF) 扩展程序，并在 Mandelbrot 演示中逐步完成代码。

Chromium 问题：1414289。

改进了 Wasm 应用中的步进行为

单步跳过。 现在，在原始代码中执行单步跳过可避免在反汇编过程中暂停（.wasm 文件）。以前，它会暂停在那里。

不过，步进在它开始执行的函数之外（例如从函数返回后）时就会结束。

默认情况下，此行为在 设置。 Settings（设置）> Preferences（偏好设置）> Sources（来源）中处于启用状态。

这项新设置是在“偏好设置”>“来源”中找到的。

Chromium 问题：1418938。

使用“元素”面板和“问题”标签页调试自动填充问题

Chrome 自动填充功能会使用已保存的信息（例如您的地址或付款信息）自动填写表单。为便于您轻松调试与自动填充相关的问题，元素面板现在可以使用红色卷形下划线突出显示这些问题。

如需了解此功能，请依次前往设置。 设置 > 实验 > 复选框。 突出显示“元素”面板 DOM 树中的违规节点或属性，然后查看此演示页面。

在“元素”面板中突出显示并由“问题”面板报告的自动填充问题。

将鼠标悬停在 DOM 树中突出显示的问题上，然后点击查看问题即可打开问题标签页，其中会列出检测到的所有问题并提供相关线索。

Chromium 问题：1399414。

记录器中的断言

借助 Recorder 面板，您现在可以在录制期间直接添加断言，并提供所有可用的运行时数据。

如需添加断言，请开始新的记录，与您的页面交互，然后点击 Add assertion。Recorder 会插入一个具有 waitForElement 类型的步骤，您可以即时对其进行自定义。请观看视频，了解咖啡购物车演示中的断言实例。

本视频介绍了如何断言：

  • HTML 属性，例如，元素的 class。
  • JSON 格式的 JavaScript 属性，例如 .innerText。

您还可以配置要断言的步骤，例如 JavaScript 中的条件语句、节点的子级数量 (count)、元素可见性等。如需了解详情，请参阅配置步骤。

此外，Recorder 现在可在并排代码视图和右键点击步骤菜单中记住您的首选脚本格式。

Chromium 问题：1423624。

Lighthouse 10.1.1

Lighthouse 面板现在运行 Lighthouse 10.1.1，10.1.0 中引入了一项重大更改。现在，所有涉及网址的审核都将按实体分组，并汇总数字统计信息（例如大小或时长）。系统还会为热门第三方添加类别标记，以便您可以在该网页上更轻松地了解其用途。

按实体对审核进行分组。

要了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

性能增强

performance.mark()会在“性能”>“计时”中显示悬停时间

现在，当您将鼠标悬停在性能 > 计时中的相应标记上时，performance.mark() 方法会显示其计时。此处的时间是相对于上一个导航事件的时间戳。

在“计时”部分显示悬停时间的弹出式窗口。

Chromium 问题：1426762。

profile() 命令会填充“Performance”>“Main”

控制台中的 profile() 和 profileEnd() 命令现在可以在“性能”面板的主线程线程中启动和停止 CPU 性能分析。

console() 命令可在“性能”面板中创建配置文件。

Chromium 问题：1429191。

有关用户互动缓慢的警告

时长超过 200 毫秒的用户互动会在 Performance > Summary 标签页中收到 Interaction to Next Paint (INP) 警告。

INP 警告。

此外，互动的 ID 也已从提示移至摘要。

Chromium 问题：1432512、1432509。

“网页指标”轨道已移动

性能面板移除了以下轨道：

  • 网页指标轨道。请改为在悬停鼠标时查看计时跟踪中的相关计时。
  • 长时间运行的任务子轨道。此类任务已在主轨道（以红色和红色三角形阴影表示）中找到。

网页指标和 Long Tasks 轨道都包含在其他地方重复的信息。与功能更齐全的替代方案相比，它们具有非互动性，点击后可提供更详细的信息。

将网页指标迁移到“计时”轨道之前和之后。

此外，我们已将 Experiences 轨道重命名为 Layout Shift，以便更准确地反映其用法。

详细了解网页指标。

JavaScript 性能分析器弃用：第三阶段

早在 Chrome 58 时，开发者工具团队就计划最终弃用 JavaScript 性能分析器，并让 Node.js 和 Deno 开发者使用性能面板来分析 JavaScript CPU 性能。

开发者工具 114 版开始了四阶段 JavaScript 性能分析器弃用的第三阶段。在此阶段，JavaScript Profiler 面板已从开发者工具中移除，但您仍然可以通过 设置。 Settings > Experiments 暂时启用它，并从 三点状菜单。 三点状菜单打开它。

依次点击“设置”和“实验”中的 JavaScript 性能分析器复选框。

如需分析 CPU 性能，请使用性能面板。

Chromium 问题：1428026。

其他亮点

以下是此版本中一些值得注意的修复：

下载预览渠道

您可以考虑将 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