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

Jecelyn Yeen

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

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

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

在 Elements 面板中，点击带有 @container at 规则的 DOM 元素，此时开发者工具会在 Styles 窗格中显示 @container 信息。点击该图标即可修改尺寸。Styles 窗格还会显示相应的容器信息。将鼠标悬停在该图标上，使网页上的容器元素突出显示，然后查看容器大小。点击该容器即可将其选中。

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

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

Chromium 问题：1146422

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

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

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

Web bundle 预览

Chromium 问题：1182537

Attribution Reporting API 调试

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

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

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

Chromium 问题：1190735

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

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

控制台中的新上下文菜单

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

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

Chromium 问题：1208389

改进了 CORS 调试

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

点击与 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

在“网络”面板中美观输出 JSON 响应

现在，您可以在 Network 面板中美观输出 JSON 响应。

在 Network 面板中打开 JSON 响应，点击 {} 图标美观输出该响应。

在“网络”面板中美观输出 JSON 响应

Chromium bug：998674

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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