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

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

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

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

Chromium 问题： 1182537

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 相关的 TypeError 现在已与“网络”面板和“问题”标签页相关联。

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

Chromium 问题： 1213393

Lighthouse 8.1

Lighthouse 面板现已运行 Lighthouse 8.1。

如果您的网站向 Lighthouse 公开了源映射，请查找 查看树状图 按钮，以查看已交付 JavaScript 的细分情况，并按加载时的大小和覆盖率进行过滤。

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

效果类别 的得分发生了一些变化，以便与其他效果工具保持一致，并更好地反映网络状态。

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

Chromium 问题： 772558

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

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

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

Chromium 问题： 1185678

修复了 CSS 匹配选择器

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

样式窗格中以英文逗号分隔的选择器会根据其是否与所选 DOM 节点匹配而显示不同的颜色：

不匹配的部分以浅灰色显示。

匹配选择器部分以黑色显示。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

请前往 crbug.com 向我们提交反馈和功能请求。

在开发者工具中，依次选择 更多选项 > 帮助 > 报告 DevTools 问题 ，以报告 DevTools 问题。

在 Twitter 上向 @ChromeDevTools 发送推文。

在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。