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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

录音机更新

重放扩展程序支持

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

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

自定义重玩界面。

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

Chromium 问题：1400243。

使用穿透选择器进行录制

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

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

将“Recorder”设置为使用穿孔选择器；穿孔选择器实际运作。

Chromium 问题：1411188。

通过 Lighthouse 分析功能导出为 Puppeteer 脚本

Recorder 引入了一个新的导出选项：Puppeteer（包括 Lighthouse 分析）。借助 Puppeteer，你可以实现 Chrome 的自动化和控制。借助 Lighthouse，您可以捕获并提升网站的性能。

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

导出 Puppeteer（包括 Lighthouse 分析）。

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

Lighthouse 报告已在 Chrome 中打开。

获取扩展程序

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

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

您可以随时向录制器扩展程序列表添加自己的扩展程序。我们期待着在名单中看到您的佳作！

Chromium 问题：1417104、1413168。

元素 > 样式更新

CSS 文档

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

包含 CSS 属性文档的提示。

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

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

如需重新启用这些元素，请勾选 设置。 Settings > Preferences > Elements > 复选框。 显示 CSS 文档提示。

Chromium 问题：1401107。

CSS 嵌套支持

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

Chromium 问题：1172985。

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

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

  • 在条件断点中显示橙色问号 ? 的 console.* 调用
  • 带有粉色两个圆点 .. 的日志点消息

控制台现在显示由断点触发的消息的方式发生了变化：包含图标和正确的来源链接。

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

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

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

Chromium 问题：1027458。

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

为帮助您专注于代码中最重要的部分，您现在可以直接通过 Sources > Page 窗格的文件树将不相关的脚本添加到 Ignore List 中。

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

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

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

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

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

Chromium 问题：883325。

开始弃用 JavaScript 性能分析器

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

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

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

请使用 Performance 面板而不是 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 作为默认模拟设备。DevTools 已将此设备添加到 设置。 设置 > 设备中。

设备列表中的 Moto G Power。

Chromium 问题：772558。

一条控制台警告，提醒您移除免操作 Service Worker 提取处理程序

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

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

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

Chromium 问题：1347319。

其他亮点

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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