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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Google 用户调研。

WebAssembly 调试支持

开发者工具默认启用 设置。 Settings > Experiments > 复选框。 WebAssembly Debugging: Enable DWARF support。如需了解详情，请参阅使用现代工具调试 WebAssembly。

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

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

在调试程序中暂停的 Wasm 应用。

如需测试 Wasm 调试，请安装 C/C++ 开发者工具支持 (DWARF) 扩展程序，然后在 Mandelbrot 演示中逐步调试代码。

Chromium 问题：1414289。

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

单步跳过。 现在，在原始代码中单步跳过可避免在反汇编（.wasm 文件）中暂停。之前，系统会在该位置暂停。

不过，当步进操作到达其开始时所在的函数之外时（例如，在从函数返回后），就会结束。

此行为在 设置。 设置 > 偏好设置 > 来源 中默认处于启用状态。

新设置位于“偏好设置”中的“来源”下。

Chromium 问题：1418938。

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

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

如需试用此功能，请依次启用 设置。 Settings > Experiments > 复选框。 Highlights a violating node or attribute in the Elements panel DOM tree，然后检查此演示页面。

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

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

Chromium 问题：1399414。

Recorder 中的断言

现在，您可以在录制期间直接在记录器面板中添加断言，并且可以使用所有运行时数据。

如需添加断言，请开始新的录制，与网页互动，然后点击添加断言。记录器会插入一个waitForElement 类型的步骤，您可以随时自定义该步骤。观看视频，了解断言在咖啡车演示中的实际应用。

本视频将向您展示如何断言：

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

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

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

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() 命令会填充“性能”>“主要”

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

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

Chromium 问题：1429191。

针对缓慢的用户互动的警告

如果用户互动时间超过 200 毫秒，性能 > 摘要 标签页中会显示 Interaction to Next Paint (INP) 警告。

INP 警告。

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

Chromium 问题：1432512、1432509。

网页指标轨道已移动

效果面板已移除以下轨道：

Web Vitals 和 Long Tasks 轨道都包含在其他位置重复的信息。与功能更全面的替代方案相比，它们也无法进行互动，而替代方案在点击时会提供更详细的信息。

将 Web 指标移至 Timings 轨道之前和之后。

此外，体验轨道已重命名为布局偏移，以便更准确地反映其用途。

详细了解 Web Vitals。

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

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

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

“设置”中的“实验”下的“JavaScript 性能剖析器”复选框。

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

Chromium 问题：1428026。

其他亮点

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

  • 颜色选择器现在可以检测到剪裁时超出色域的 HWB 值 (1429271)。
  • 来源面板：
  • 现在，您可以在控制台中使用 Ctrl + Enter 对不完整的 JavaScript 表达式求值，并输出语法错误 (1314700)。
  • 断点编辑对话框现在有一个关闭按钮。之前，您必须按 Enter 键或取消对话框的焦点 (1412980)。

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试最前沿的 Web 平台 API，并在用户发现问题之前帮助您找到网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

开发者工具的新变化

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