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

Jecelyn Yeen

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

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

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

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

阅读这篇文章，详细了解 CSS Overview 面板。

“CSS 概览”面板

Chromium 问题：1254557

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

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

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

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

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

Chromium 问题：1259088、1172993

“呈现”标签页更新

模拟 CSS prefers-contrast 媒体功能

模拟 CSS prefers-contrast 媒体功能

prefers-contrast 媒体功能用于检测用户是否请求提高或降低网页的对比度。

打开命令菜单，运行显示渲染命令，然后设置模拟 CSS 媒体功能优先选项下拉菜单。

Chromium 问题：1139777

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

使用 DevTools 模拟自动深色主题，轻松查看在启用 Chrome 的自动深色主题后网页的外观。

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

打开命令菜单，运行显示渲染命令，然后设置模拟自动深色模式下拉菜单。

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

Chromium 问题：1243309

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

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

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

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

以 JavaScript 格式复制声明

Chromium 问题：1253635

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

在检查包含载荷的网络请求时，请使用 Network 面板中的新 Payload 标签页。以前，载荷信息位于 Headers 标签页下。

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

Chromium 问题：1214030

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

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

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

“属性”窗格中属性的显示

Chromium 问题：1226262

Console 更新

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

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

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

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

Chromium 问题：1251176

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

Intl 对象现在可以正常预览，并会在控制台中提前求值。以前，系统不会提前评估 Intl 对象。

控制台中的 Intl 对象

Chromium 问题：1073804

一致的异步堆栈轨迹

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

异步堆栈轨迹

Chromium 问题：1254259

保留控制台边栏

控制台边栏将保留。在 Chrome 94 中，我们宣布即将弃用 Play 管理中心边栏，并征求开发者的反馈和疑虑。

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

控制台边栏

Chromium 问题：1232937、1255586

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

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

Chromium 问题：1084190

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

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

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

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

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

“Application”面板中的“Reporting API”窗格

Chromium 问题：1205856

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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