开发者工具的新变化 (Chrome 96)

Jecelyn Yeen

预览功能：新的“CSS 概览”面板

使用新的 CSS 概览面板，找出网页上潜在的 CSS 改进机会。 打开 CSS 概览面板，然后点击捕获概览以生成网页 CSS 的报告。

您可以进一步深入了解相关信息。例如，点击颜色部分中的某种颜色，即可查看应用了相同颜色的元素列表。点击某个元素即可在元素面板中打开相应元素。

CSS 概览面板是一项预览版功能。我们的团队仍在积极完善此功能，期待您的反馈，以便进一步改进。

如需详细了解 CSS 概览面板，请参阅这篇文章。

Chromium 问题：1254557

恢复并改进了 CSS 长度编辑和复制体验

恢复了具有长度的 CSS 属性的复制 CSS 和以文本形式修改 体验。这些体验在最新版本中已损坏。

此外，您还可以拖动来调整单位值，并通过下拉菜单更新单位类型。此插件长度创作功能不应影响主要编辑文本体验。

如果您发现任何问题，请通过 goo.gle/length-feedback 进行报告。

您可以通过依次点击设置 > 实验 > 在“样式”窗格中启用 CSS 长度创作工具 复选框来停用此功能。

Chromium 问题：1259088、1172993

呈现标签页更新

模拟 CSS prefers-contrast 媒体功能

prefers-contrast 媒体功能用于检测用户是否要求网页具有更高或更低的对比度。

打开命令菜单，运行 Show Rendering 命令，然后设置 Emulate CSS media feature prefers-contrast 下拉菜单。

Chromium 问题：1139777

模拟 Chrome 的“自动深色主题”功能

使用开发者工具模拟自动深色主题，以便轻松查看在 Chrome 的自动深色主题功能启用时网页的外观。

Chrome 96 在 Android 上针对自动深色主题推出了源试用。借助此功能，当用户在操作系统中选择启用深色主题时，浏览器会将自动生成的深色主题应用于使用浅色主题的网站。

打开命令菜单，运行 Show Rendering 命令，然后设置 Emulate auto dark mode 下拉菜单。

Chromium 问题：1243309

在“样式”窗格中以 JavaScript 格式复制声明

在上下文菜单中添加了两个新选项，以便您轻松将 CSS 规则复制为 JavaScript 属性。这些快捷方式选项非常方便，尤其适合使用 CSS-in-JS 库的开发者。

在样式窗格中，右键点击某个 CSS 规则。您可以选择以 JS 格式复制声明来复制单个规则，也可以选择以 JS 格式复制所有声明来复制所有规则。

例如，以下示例会将 paddingLeft: '1.5rem' 复制到剪贴板。

Chromium 问题：1253635

“网络”面板中的新“载荷”标签页

检查包含载荷的网络请求时，请使用网络面板中的新载荷标签页。之前，有效载荷信息位于标头标签页下。

Chromium 问题：1214030

改进了“属性”窗格中属性的显示方式

属性窗格现在仅显示相关属性，而不是显示实例的所有属性。现在移除了 DOM 原型和方法。

借助 Chrome 95 中属性窗格的增强功能，您现在可以更轻松地找到相关属性。

Chromium 问题：1226262

Console 更新

用于在控制台中隐藏 CORS 错误的选项

您可以在控制台中隐藏 CORS 错误。由于 CORS 错误现在会在“问题”标签页中报告，因此在控制台中隐藏 CORS 错误有助于减少杂乱信息。

在控制台中，点击设置图标，然后取消选中在控制台中显示 CORS 错误复选框。

Chromium 问题：1251176

在控制台中正确预览和评估 Intl 对象

Intl 对象现在具有适当的预览效果，并且在控制台中会急切地进行评估。之前，Intl 对象不会立即进行评估。

Chromium 问题：1073804

一致的异步堆栈轨迹

控制台现在会报告 async 函数的 async 堆栈轨迹，以便与其他异步任务保持一致，并与“调用堆栈”中显示的内容保持一致。

Chromium 问题：1254259

保留控制台边栏

控制台边栏将成为常态。在 Chrome 94 中，我们宣布控制台边栏即将被弃用，并征求开发者的反馈和疑虑。

我们现在已收到足够多的有关弃用通知的反馈，并将致力于改进侧边栏，而不是将其移除。

Chromium 问题：1232937、1255586

“应用”面板中已弃用的“应用缓存”窗格

由于 Chrome 和其他基于 Chromium 的浏览器已不再支持 AppCache，因此“应用”面板中的应用缓存窗格现已移除。

Chromium 问题：1084190

[实验性]“应用”面板中的新“Reporting API”窗格

报告 API 旨在帮助您监控网页的安全违规行为、已弃用的 API 调用等。

启用此实验后，您现在可以在应用面板的新 Reporting API 窗格中查看报告状态。

请注意，端点部分目前仍处于积极开发阶段（暂时不显示任何报告端点）。

如需详细了解 Reporting API，请参阅这篇文章。

Chromium 问题：1205856

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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