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

Google 用户调研。

记录器更新

重放扩展程序支持

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

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

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

Chromium 问题：1400243。

使用穿透选择器进行记录

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

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

Chromium 问题：1411188。

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

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

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

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

获取扩展程序

探索各种选项，自定义录音机体验，例如使用自定义导出选项。如需获取录制器的扩展程序，请在录制过程中依次点击 导出 > 获取扩展程序。

您可以随时向记录器扩展程序列表添加自己的扩展程序。期待您的作品也能出现在榜单上！

Chromium 问题：1417104、1413168。

元素 > 样式更新

CSS 文档

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

该工具提示还包含一个了解详情链接，点击该链接可前往有关此属性的 MDN CSS 参考页面。

如果您非常熟悉 CSS，可能会觉得工具提示很烦人。如需全部关闭，请选中 不显示。

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

Chromium 问题：1401107。

CSS 嵌套支持

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

Chromium 问题：1172985。

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

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

• 条件断点中的 console.* 调用带有橙色问号 ?
• 带有粉色双点 .. 的日志点消息

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

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

Chromium 问题：1027458。

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

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

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

所有被列入忽略名单的脚本和文件夹在文件树中都会显示为灰色。

如果您选择的是忽略的脚本，点击配置按钮后，系统会将您带到 设置 > 忽略列表。您还可以通过以下方式从文件树中隐藏已忽略的来源：依次选择 > 隐藏已列入忽略列表的来源 。

Chromium 问题：883325。

JavaScript 性能分析器已开始弃用

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

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

请使用性能面板分析 CPU，而不是使用 Profiler。

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

Chromium 问题：1417647。

模拟对比度下降

渲染标签页在模拟视觉障碍列表中添加了一个新选项：对比度降低。借助此选项，您可以了解对比度敏感度较低的用户看到的网站外观。

请注意，列表选项已更新，可让您了解这些选项代表哪种色觉障碍。

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

Chromium 问题：1412719、1412721。

Lighthouse 10

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

如需了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Lighthouse > > 旧版导航现已默认处于停用状态。此选项在导航模式下使用旧版 Lighthouse 配置。

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

Chromium 问题：772558。

控制台警告：移除无操作服务工作线程 fetch 处理程序

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 开发者工具团队联系

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

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

开发者工具的新变化

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