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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

WebAssembly 调试支持

默认情况下，开发者工具会启用 设置。 Settings（设置）> Experiments（实验）> 复选框。 WebAssembly Debugging: Enable DWARF support（WebAssembly 调试：启用 DWARF 支持）。如需了解详情，请参阅使用新型工具调试 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 中的断言

现在，您可以在录制过程中直接通过 Recorder 面板添加断言，并使用所有运行时数据。

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

本视频介绍了如何断言：

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

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

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

Chromium 问题：1423624。

Lighthouse 10.1.1

Lighthouse 面板现在运行 Lighthouse 10.1.1，其中 10.1.0 中引入了一项重大变更。现在，所有涉及网址的审核均按实体进行分组，并汇总大小或时长等数值统计信息。热门第三方代码还会带有其类别标记，以便更轻松地识别其在网页上的用途。

按实体对审核进行分组。

如需了解如何在 DevTools 中使用 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 和长任务轨道都包含在其他位置重复的信息。与功能更全面的替代方案相比，这些卡片无法互动，后者在用户点击时会提供更详细的信息。

将 Web Vitals 移至“时间”轨道前后。

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

详细了解 Web Vitals。

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

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

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

依次选择“设置”和“实验”，然后选中“JavaScript 性能分析器”复选框。

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

Chromium 问题：1428026。

其他亮点

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。