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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

录音机更新

重放扩展程序支持

记录器引入了对自定义重放选项的支持，您可以使用扩展程序将这些选项嵌入到开发者工具中。

试用示例扩展程序。选择新的自定义重玩选项以打开自定义重玩界面。

自定义重玩界面。

如需根据您的需求自定义记录器并将其与您的工具集成，不妨考虑开发自己的扩展程序：探索 chrome.devtools.recorder API 并查看更多扩展程序示例。

Chromium 问题：1400243。

使用穿透选择器进行录制

除了自定义、CSS、ARIA、文本和 XPath 选择器之外，您现在还可以使用穿透选择器进行录制。这些选择器的行为与 CSS 选择器类似，但也可以穿透阴影根。

在包含 Shadow DOM 的页面上开始新录制，然后在记录时要使用的选择器类型中选中 复选框。 Pierce。记录您与 shadow DOM 中元素的互动，并检查相应步骤。

将录音机设置为使用穿透选择器；穿透选择器在使用中。

Chromium 问题：1411188。

导出为包含 Lighthouse 分析的 Puppeteer 脚本

录制器引入了新的导出选项：Puppeteer（包括 Lighthouse 分析）。借助 Puppeteer，您可以自动执行和控制 Chrome。借助 Lighthouse，您可以捕获并提升网站的性能。

打开录音，点击 导出。 Export（导出），选择新选项，然后保存 .js 文件。

导出 Puppeteer（包括 Lighthouse 分析）。

运行 Puppeteer 脚本，以便在 flow.report.html 文件中获取 Lighthouse 报告。

在 Chrome 中打开的 Lighthouse 报告。

获取扩展程序

探索用于自定义录音机体验的选项，例如使用自定义导出选项。在录制内容中，依次点击 导出。 Export > Get extensions，获取录制器的扩展程序。

“导出”下拉菜单中的“获取扩展程序”选项。

您可以随时向录制器扩展程序列表添加自己的扩展程序。我们期待您的应用能上榜！

Chromium 问题：1417104、1413168。

元素 > 样式更新

CSS 文档

您每天查看 CSS 属性文档的次数是多少？现在，当您将鼠标悬停在某个属性上时，元素 > 样式窗格会显示简短说明。

包含 CSS 属性文档的提示。

该提示还包含一个了解详情链接，可将您定向至此属性的 MDN CSS 参考文档。

如果您非常熟悉 CSS，可能会觉得这些提示很烦人。如要全部关闭，请选中 复选框。 不显示。

如需重新启用这些功能，请依次选择 设置。 设置 > 偏好设置 > 元素 > 复选框。 显示 CSS 文档提示。

Chromium 问题：1401107。

支持 CSS 嵌套

元素 > 样式窗格现在可以识别 CSS 嵌套语法，并将嵌套样式应用于正确的元素。

Chromium 问题：1172985。

在控制台中标记 Logpoint 和条件断点

为了进一步改进增强型断点用户体验，控制台现在会标记由断点触发的消息：

更改了控制台显示由断点触发的消息的方式：添加了图标和适当的来源链接。

现在，控制台会为您提供指向源文件中断点的适当锚链接，而不是指向 Chrome 创建的 VM<number> 脚本（用于在 V8 上运行任何 JavaScript 代码）。

点击断点消息旁边的链接，即可直接跳转到断点编辑器。

日志点消息旁边的锚链接，用于打开断点编辑器。

Chromium 问题：1027458。

在调试期间忽略不相关的脚本

为了帮助您专注于代码最重要的部分，您现在可以直接在 Sources（来源）> Page（网页）窗格中的文件树中将不相关的脚本添加到忽略列表。

右键点击任何脚本或文件夹，然后选择与忽略相关的选项之一。您可能会看到用于向列表中添加或从中移除脚本或文件夹的选项。调试程序会忽略添加到列表中的脚本，并在调用堆栈中省略这些脚本。

文件夹和脚本的上下文菜单，其中包含与忽略相关的选项。

文件树中的所有列入忽略列表的脚本和文件夹都会灰显。

列入忽略列表的脚本和文件夹会灰显，您可以使用“更多选项”下拉菜单中的实验性选项将其隐藏。

如果您选择了被忽略的脚本，配置按钮会将您定向到 设置。 设置 > 忽略列表。您还可以依次选择 三点状菜单。 > 隐藏已列入忽略列表的来源 实验性。，从文件树中隐藏已忽略的来源。

Chromium 问题：883325。

开始弃用 JavaScript 性能分析器

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

此版开发者工具 (112) 开始了四阶段的 JavaScript 性能分析器弃用。JavaScript 性能分析器面板现在会显示相应的警告横幅。

性能分析器顶部的弃用横幅。

请使用性能面板（而非 Profiler）分析 CPU。

如需了解详情并提供反馈，请参阅相应的 RFC 和 crbug.com/1354548。

Chromium 问题：1417647。

模拟对比度下降

Rendering 标签页在 Emulate vision deficiencies 列表中添加了一个新选项 - Reduced contrast（对比度下降）。借助此选项，您可以了解您的网站在对比度敏感度较低的用户眼中是怎样的。

在“模拟视觉缺陷”功能下选择的“对比度下降”选项。

请注意，列表选项已更新，以便告知您选项代表的色盲类型。

借助开发者工具，您可以一次性查找并修复所有对比度问题。如需了解详情，请参阅提高网站的可读性。

Chromium 问题：1412719、1412721。

Lighthouse 10

Lighthouse 面板现在运行的是 Lighthouse 10.0.1。如需了解详情，请参阅 Lighthouse 10.0.1 中的新变化。

如需了解如何在 DevTools 中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Lighthouse > 设置。 > 空白复选框。 旧版导航栏现已默认停用。此选项在导航模式下使用旧版 Lighthouse 配置。

停用了旧版导航栏。

Lighthouse 10 现在使用 Moto G Power 作为默认模拟设备。开发者工具已将此设备添加到 设置。 设置 > 设备。

设备列表中的 Moto G Power。

Chromium 问题：772558。

控制台中显示了一条警告，提示您移除无操作的服务工件提取处理脚本

Chrome 112 会跳过无操作 (no-op) Service Worker 提取处理脚本，因为它们可能会降低导航速度，但没有任何用途。您的网站不再需要此类处理程序即可被视为渐进式 Web 应用。

现在，如果 Console 在您的网站上发现无操作提取处理脚本，便会显示警告。建议将其移除。

无操作提取处理程序和控制台中的相应警告。

Chromium 问题：1347319。

其他亮点

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

  • 来源 > 断点窗格现在会在模糊不清的文件名旁边显示区分文件路径的标记 (1403924)。
  • 性能面板中火焰图的主要部分现在将 CpuProfiler::StartProfiling 指定为 Profiler Overhead (1358602)。
  • 改进了 DevTools 中的自动补全功能：
    • 来源：任何字词的一致补全结果 (1320204)。
    • 控制台：Arrow down 会选择第一个建议，并且建议会显示 Tab 提示 (1276960)。
  • DevTools 添加了事件监听器断点，以便您在打开文档画中画窗口时暂停 (1315352)。
  • 开发者工具设置了一个权宜解决方法，可将 Vue2 Webpack 工件正确显示为 JavaScript (1416562)。
  • 控制台设置改名为“自动展开 console.trace() 消息”。(1139616)。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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