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

Jecelyn Yeen

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

您可以使用新的 CSS Overview 面板确定网页上可以改进的 CSS。 打开 CSS Overview 面板，然后点击 Capture overview 以生成页面的 CSS 报告。

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

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

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

“CSS 概览”面板

Chromium 问题：1254557

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

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

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

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

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

Chromium 问题：1259088、1172993

“呈现”标签页更新

模拟 CSSrefers-contrast media feature

模拟 CSSrefers-contrast media feature

prefers-const 媒体功能用于检测用户是否请求了调高或调低网页对比度。

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

Chromium 问题：1139777

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

使用开发者工具模拟自动深色主题，以便轻松查看启用 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

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

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

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

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

Chromium 问题：1226262

Console 更新

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

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

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

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

Chromium 问题：1251176

在控制台中预览和评估适当的 Intl 对象

Intl 对象现在具有适当的预览，并在控制台中进行快速评估。以前，系统无法快速评估 Intl 对象。

控制台中的国际对象

Chromium 问题：1073804

一致的异步堆栈轨迹

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

异步堆栈轨迹

Chromium 问题：1254259

保留控制台边栏

控制台边栏仍会保留。在 Chrome 94 中，我们宣布即将弃用控制台边栏，并请开发者提供反馈和疑虑。

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

控制台边栏

Chromium 问题：1232937、1255586

Application 面板中的已弃用的 Application Cache 窗格

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

Chromium 问题：1084190

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

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

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

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

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

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

Chromium 问题：1205856

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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