此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

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

使用新的 CSS Overview 面板可发现网页是否有潜在的 CSS 改进。打开 CSS Overview 面板，然后点击 Capture Overview，以生成网页的 CSS 报告。

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

CSS Overview 面板是一项预览功能。我们团队仍在努力解决这个问题，期待收到您的反馈，希望我们进一步改进。

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

“CSS Overview”面板

Chromium 问题：1254557

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

对于长度较长的 CSS 属性，系统会恢复复制 CSS 和以文本形式修改体验。这些体验在上一版本中已损坏。

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

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

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

Chromium 问题：1259088、1172993

“渲染”标签页更新

模拟 CSSrefers-contrast 媒体功能

首选对比度媒体功能用于检测用户要求提高还是降低页面对比度。

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

Chromium 问题：1139777

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

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

Chrome 96 在 Android 设备上引入了自动深色主题的源试用。借助此功能，如果用户在操作系统中选择启用深色主题，浏览器就可以为浅色主题网站应用自动生成的深色主题。

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

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

Chromium 问题：1243309

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

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

在样式窗格中，右键点击相应 CSS 规则。您可以选择以 JS 格式复制声明，以复制单条规则；选择以 JS 格式复制所有声明，以复制所有规则。

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

以 JavaScript 格式复制声明

Chromium 问题：1253635

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

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

网络面板中的“Payload”标签页

Chromium 问题：1214030

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

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

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

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

Chromium 问题：1226262

Console 更新

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

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

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

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

Chromium 问题：1251176

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

Intl 对象现在会有适当的预览，并在控制台中快速进行评估。以前，不会快速评估 Intl 对象。

控制台中的 Intl 对象

Chromium 问题：1073804

一致的异步堆栈轨迹

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

异步堆栈轨迹

Chromium 问题：1254259

控制台边栏会保留下来。在 Chrome 94 中，我们宣布即将弃用控制台边栏，并向开发者征集反馈意见和顾虑。

现在，我们已从弃用通知中获得足够多的反馈，我们会努力改进边栏，而不是将其移除。

控制台边栏

Chromium 问题：1232937、1255586

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

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

Chromium 问题：1084190

[实验性] Application 面板中的 New Reporting API 窗格

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

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

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

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

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

Chromium 问题：1205856

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。