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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

录音机更新

重放扩展程序支持

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

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

自定义重放界面。

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

Chromium 问题：1400243。

使用穿孔选择器录制

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

在具有 shadow DOM 的网页上启动一项新记录，并在要记录的选择器类型中勾选 复选框。 Pierce。记录您与 shadow DOM 中元素的交互并检查相应步骤。

将录音机设置为使用穿孔选择器；穿插选择器的实际应用。

Chromium 问题：1411188。

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

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

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

导出 Puppeteer（包括 Lighthouse 分析）。

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

Lighthouse 报告已在 Chrome 中打开。

获取扩展程序

探索自定义录音机体验的选项，例如自定义导出选项。点击 导出。 Export >，获取 Recorder 的扩展程序在录音中获取扩展程序。

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

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

Chromium 问题：1417104、1413168。

元素 >样式更新

CSS 文档

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

包含 CSS 属性相关文档的提示。

提示中还包含一个了解详情链接，点击该链接，您可以访问关于此媒体资源的 MDN CSS 参考文档。

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

要重新开启，请查看 设置。 设置 >偏好设置 >元素 >复选框。 显示 CSS 文档提示。

Chromium 问题：1401107。

CSS 嵌套支持

元素 >Styles（样式）窗格现在可以识别 CSS 嵌套语法，并能将嵌套样式应用于相应的元素。

Chromium 问题：1172985。

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

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

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

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

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

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

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

Chromium 问题：1027458。

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

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

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

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

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

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

如果您选择忽略的脚本，则可以点击配置按钮 设置。 设置 >忽略列表。您还可以使用 三点状菜单。 > 在文件树中隐藏已忽略的来源。隐藏已列入忽略名单的来源 实验性。。

Chromium 问题：883325。

开始弃用 JavaScript Profiler

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

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

Profiler 顶部的弃用横幅。

请使用 Performance 面板（而不是 Profiler）来分析 CPU。

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

Chromium 问题：1417647。

模拟对比度降低

Rendering（渲染）标签页在 Emulate vision deficiencies 列表中添加了一个新选项：Reduced const（降低对比度）。通过此选项，您可以在对比度敏感度较低的用户查看您的网站的外观。

在“Emulate vision deficiencies”下选择“更低的对比度”选项功能

请注意，列表选项已更新，告知您这些选项代表哪种颜色敏感度。

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

Chromium 问题：1412719、1412721。

10 号灯塔

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

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

灯塔 >设置。 >空白复选框。 旧版导航现在默认处于停用状态。此选项会在导航模式下使用旧版 Lighthouse 配置。

已停用旧版导航。

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

设备列表中的 Moto G Power。

Chromium 问题：772558。

控制台警告：要求您移除免操作 Service Worker 提取处理程序

Chrome 112 会跳过空操作（无操作）Service Worker 提取处理程序，因为它们可能会降低导航速度，但不起作用。您的网站不再需要此类处理程序，即可认定为渐进式 Web 应用。

现在，如果控制台在您的网站上发现无操作提取处理程序，就会显示警告。请考虑将其移除。

控制台中的免运维提取处理程序和相应警告。

Chromium 问题：1347319。

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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