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

Sofia Emelianova

Jecelyn Yeen

WebAssembly 调试支持

开发者工具默认启用 设置 > 实验 > WebAssembly 调试：启用 DWARF 支持。如需了解详情，请参阅使用现代工具调试 WebAssembly。

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

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

如需测试 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 分析。

Chromium 问题：1429191。

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

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

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

Chromium 问题：1432512、1432509。

网页指标轨道已移动

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

• 网页指标轨道。您只需将鼠标悬停在时间轨道上，即可查看相关时间。
• 长时间执行的任务子轨道。您可以在主轨道中找到此类任务，它们会以红色阴影和红色三角形标记。

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

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

详细了解 Web Vitals。

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

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

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

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

Chromium 问题：1428026。

其他亮点

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

• 颜色选择器现在可以检测到剪裁时超出色域的 HWB 值 (1429271)。
• 来源面板：
  • 为源映射启用了 JSON 语法突出显示功能 (1385374)。
  • 当您手动停用源代码映射时，停止显示“已检测到源代码映射”消息 (1423718)。
• 现在，您可以在控制台中使用 Ctrl + Enter 对不完整的 JavaScript 表达式求值，并输出语法错误 (1314700)。
• 断点编辑对话框现在包含一个关闭按钮。之前，您必须按 Enter 键或取消对话框的焦点 (1412980)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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