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

Jecelyn Yeen

“样式”窗格中可修改的 CSS 容器查询

现在，您可以在 Styles 窗格中查看和修改 CSS 容器查询。

容器查询提供了一种更具动态性的自适应设计方法。@container at-rule 的运作方式与使用 @media 的媒体查询类似。不过，@container 不会查询视口和用户代理以获取信息，而是会查询与特定条件匹配的祖先容器。

在 Elements 面板中，点击包含 @container at-rule 的 DOM 元素，DevTools 现在会在 Styles 窗格中显示 @container 信息。点击该图标即可修改尺寸。样式窗格也会显示相应的容器信息。将鼠标悬停在该元素上，以突出显示页面上的容器元素并检查容器大小。点击该图标以选择容器元素。

容器查询功能目前处于实验阶段。请开启 chrome://flags 下的 #enable-container-queries 标志以进行测试。

“样式”窗格中可修改的 CSS 容器查询

Chromium 问题：1146422

“网络”面板中的网站软件包预览

网站软件包是一种文件格式，用于在单个文件中封装一个或多个 HTTP 资源。现在，您可以在 Network 面板中预览 Web Bundle 内容。

Web Bundle 功能目前处于实验阶段。请在 chrome://flags 下启用 #enable-experimental-web-platform-features 标志以进行测试。

Web 软件包预览

Chromium 问题：1182537

Attribution Reporting API 调试

Attribution Reporting API 错误现在会在问题标签页中报告。

Attribution Reporting API 是一款新 API，可帮助您在不使用跨网站标识符的情况下衡量用户操作（例如广告点击或观看）何时促成转化。

“问题”标签页中的 Attribution Reporting API 错误

Chromium 问题：1190735

改进了控制台中的字符串处理

借助 Console 中的新上下文菜单，您可以将任何字符串复制为内容、JavaScript 字面量或 JSON 字面量。

控制台中的新上下文菜单

在 Chrome 90 中，开发者工具更新了控制台，使其始终将字符串输出格式化为有效的 JSON 字面量。我们收到了开发者的反馈，他们认为这项更改可能会造成混淆，有些人认为转义过多，导致输出内容无法读取。

控制台现在会将字符串输出格式化为有效的 JavaScript 字面量，此外还会为您提供 3 个复制字符串选项。复制为 JavaScript 字面量选项会转义适当的特殊字符，并根据字符串内容将字符串括在单引号、双引号或反引号中。复制字符串内容会将原始字符串内容（包括换行符和其他特殊字符）逐字复制到剪贴板。最后，复制为 JSON 字面量会将字符串格式化为有效的 JSON 字面量，并将其复制到剪贴板。

Chromium 问题：1208389

改进了 CORS 调试

控制台中与 CORS 相关的 TypeError 现在会链接到“网络”面板和“问题”标签页。

点击与 CORS 相关的错误消息旁边的两个新图标可查看网络请求，或在“问题”标签页中进一步了解错误消息并获取可能的解决方案。

与 CORS 相关的错误消息旁边的图标

Chromium 问题：1213393

Lighthouse 8.1

Lighthouse 面板现在运行的是 Lighthouse 8.1。

灯塔

如果您的网站向 Lighthouse 公开了源代码映射，请找到查看树状图按钮，查看已分发的 JavaScript 的细分信息，您可以按大小和加载时覆盖率进行过滤。

该报告还包含一个新的指标过滤条件（请参阅屏幕截图中的显示与过滤条件）。选择一个指标，以便专注于与提升该指标最相关的机会和诊断信息。

效果类别的评分方式进行了多项更改，以便与其他效果工具保持一致，并更好地反映网站的状态。

如需查看完整的变更列表，请参阅版本说明。

Chromium 问题：772558

在“清单”窗格中显示新的备注网址

现在，“清单”窗格会显示新的记事网址。

目前，在 ChromeOS (CrOS) 上，声明了“new-note”capability 的 Chrome 应用和 Android 应用可能会在触控笔设置中被选为记事应用（如果 CrOS 设备已与触控笔搭配使用，则会显示）。选择作为记事应用后，您可以通过触控笔调色板的“创建记事”按钮启动该应用。在应用清单中添加 new-note-url 字段是向 Web 应用添加等效功能的一部分。

“清单”窗格中的新备注网址

Chromium 问题：1185678

修复了 CSS 匹配选择器

开发者工具修复了 CSS 匹配选择器，该选择器在上一个版本中不起作用。

样式窗格中的逗号分隔选择器的颜色会因其是否与所选 DOM 节点匹配而异：

  • 不匹配的部分显示为浅灰色。
  • 匹配的选择器部分显示为黑色。

CSS 匹配选择器

Chromium 问题：1219153

在“Network”面板中整齐打印 JSON 响应

现在，您可以在 Network 面板中整齐打印 JSON 响应。

在网络面板中打开 JSON 响应，然后点击 {} 图标以整齐打印该响应。

在“Network”面板中整齐打印 JSON 响应

Chromium bug：998674

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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