此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

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

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

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

在 Elements 面板中，点击设置了 @container at 规则的 DOM 元素后，DevTools 现在会在 Styles 窗格中显示 @container 信息。点击即可修改尺寸。Styles 窗格也会显示相应的容器信息。将鼠标悬停在该元素上，突出显示网页上的容器元素，然后查看容器大小。点击以选择容器元素。

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

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

Chromium 问题：1146422

“Network”面板中的 Web 软件包预览

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

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

Web 软件包预览

Chromium 问题：1182537

Attribution Reporting API 调试

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

Attribution Reporting 是一个新 API，可帮助您衡量用户操作（例如广告点击或观看）何时促成了转化，而无需使用跨网站标识符。

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

Chromium 问题：1190735

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

控制台中新增的上下文菜单，以内容、JavaScript 字面量或 JSON 字面量的形式复制任何字符串。

在 Chrome 90 中，开发者工具更新了控制台，以始终将字符串输出的格式设置为有效的 JSON 字面量。我们收到了开发者的反馈，此变更可能会让人感到困惑，有些人觉得转义次数过多，导致输出内容无法读取。

控制台现在将字符串输出的格式设置为有效的 JavaScript 字面量，并且还提供 3 个复制字符串选项。复制为 JavaScript 字面量选项会转义适当的特殊字符，并根据字符串内容用单引号、双引号或反引号将字符串括起来。复制字符串内容会改为将原始字符串内容（包括新行和其他特殊字符）一字不差地复制到剪贴板。最后，作为 JSON 字面量复制将字符串的格式设置为有效的 JSON 字面量，并复制到剪贴板。

Chromium 问题：1208389

改进的 CORS 调试功能

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

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

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

Chromium 问题：1213393

Lighthouse 8.1

Lighthouse 面板现在正在运行 Lighthouse 8.1。

如果您的网站向 Lighthouse 公开了源代码映射，请找到查看树状图按钮，以查看已加载 JavaScript 的明细数据（在加载时可以按大小和覆盖率过滤）。

该报告还包含新的指标过滤条件（请参阅屏幕截图中的“显示相关审核”过滤条件）。选择一个指标，重点关注与改进该指标最相关的机会和诊断信息。

为了与其他性能工具保持一致并更好地反映网站的状态，“效果类别”在评分方面进行了多次更改。

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

Chromium 问题：772558

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

“清单”窗格现在会显示新的备注网址。

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

在“Manifest”窗格中新建备注网址

Chromium 问题：1185678

修复了 CSS 匹配选择器

开发者工具修复了 CSS 匹配选择器，在上一版本中它无法正常运行。

在 Styles 窗格中，以英文逗号分隔的选择器会以不同的颜色显示，具体取决于它们是否与所选的 DOM 节点匹配：

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

CSS 匹配选择器

Chromium 问题：1219153

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

您现在可以在 Network 面板中整洁地输出 JSON 响应。

在网络面板中打开 JSON 响应，点击 {} 图标以整齐输出。

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

Chromium bug：998674

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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