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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

WebAssembly 调试支持

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

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

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

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

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

Chromium 问题：1414289。

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

跳过。 现在，单步调试原始代码可避免在反汇编（.wasm 文件）时暂停。而在以前，系统会在此处暂停。

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

默认情况下，此行为在 设置。 设置 > 中启用偏好设置 >来源。

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

Chromium 问题：1418938。

使用“Elements”面板和“Issues”标签页调试自动填充

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 中的相应标记上时，performance.mark() 方法会显示其时间。计时。此处的时间是相对于上一个导航事件的时间戳。

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

Chromium 问题：1426762。

profile() 命令会填充 Performance >主页面

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

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

Chromium 问题：1429191。

关于用户互动缓慢的警告

如果用户互动的时长超过 200 毫秒，系统便会在“性能”> 页面中看到 Interaction to Next Paint (INP) 警告摘要标签页。

INP 警告。

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

Chromium 问题：1432512、1432509。

“网页指标”轨道已迁移

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

  • 网页指标轨道。不过，您可以悬停鼠标，在计时轨道中查看相关计时。
  • Long Tasks 子轨道。此类任务已在Main轨道中以红色和红色三角形显示。

网页指标轨道和耗时较长的任务轨道均包含与其他地方重复的信息。此外，与功能更齐全的备选版本相比，可点击的广告还会提供更详细的信息，因此这类版本也不具有互动性。

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

此外，我们已将“体验”轨道重命名为“布局偏移”，以更准确地反映其使用情况。

详细了解网页指标。

JavaScript Profiler 弃用：第三阶段

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

开发者工具版本 114 将从四阶段 JavaScript Profiler 弃用的第三阶段开始。在此阶段，JavaScript Profiler 面板已从开发者工具中移除，但您仍然可以通过 设置。 Settings >实验，然后从 三点状菜单。 三点状菜单中将其打开。

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

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

Chromium 问题：1428026。

其他亮点

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

  • 现在，颜色选择器可在裁剪时检测出色域以外的 HWB 值 (1429271)。
  • 来源面板： <ph type="x-smartling-placeholder">
  • 控制台现在允许您使用 Ctrl + Enter 对不完整的 JavaScript 表达式求值，并输出语法错误 (1314700)。
  • 断点修改对话框现在包含一个关闭按钮。以前，您必须按 Enter 键或取消聚焦对话框 (1412980)。

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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