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

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

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

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

CSS 概览面板是一项预览版功能。我们的团队仍在积极努力,期待您提供反馈,以便我们进一步改进。

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

“CSS 概览”面板

Chromium 问题:1254557

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

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

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

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

您可以通过 Settings > Experiments > Enable CSS length authoring tools in the Styles pane 复选框停用此功能。

Chromium 问题:1259088、1172993

渲染标签页更新

模拟 CSS prefers-contrast 媒体功能

模拟 CSS prefers-contrast 媒体功能

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

打开命令菜单,运行显示渲染命令,然后设置 Emulate CSS media feature prefers-contrast 下拉菜单。

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 标签页。以前,载荷信息位于标头标签页下。

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

Chromium 问题:1214030

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

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

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

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

Chromium 问题:1226262

Console 更新

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

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

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

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

Chromium 问题:1251176

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

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

控制台中的 Intl 对象

Chromium 问题:1073804

一致的异步堆栈轨迹

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

异步堆栈轨迹

Chromium 问题:1254259

保留控制台边栏

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

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

控制台边栏

Chromium 问题:12329371255586

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

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

Chromium 问题:1084190

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

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

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

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

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

“应用”面板中的 Reporting API 窗格

Chromium 问题:1205856

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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