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

Google 用户调研。

“性能”面板中会弹出 Web Vitals 信息

将鼠标悬停在性能面板中的网页指标标记上，即可了解该指标的含义，以及性能是良好、需要改进还是欠佳。

Chromium 问题：1147872

直观呈现 CSS scroll-snap

现在，您可以在元素面板中切换 scroll-snap 徽章，以检查 CSS 滚动捕捉对齐方式。

如果网页上的某个 HTML 元素（例如此演示页面）应用了 scroll-snap-type，您可以在元素面板中看到该元素旁边的 scroll-snap 徽章。点击该标记可在页面上切换显示滚动吸附叠加层。

在上面的示例中，您可以看到贴靠边缘上的圆点标记。滚动端口具有实线轮廓，而贴靠项具有虚线轮廓。滚动内边距以绿色填充，而滚动边距以橙色填充。

Chromium 问题：862450

新的内存检查器

使用新的内存检查器检查 JavaScript 中的 ArrayBuffer 以及 Wasm 内存。

打开此演示页面。在 Sources（来源）面板中，打开 demo-js.js 文件，并在第 18 行设置断点。

刷新页面。展开右侧调试器窗格中的范围部分。请注意缓冲区值旁的新图标。点击该图标即可显示内存检查器。

如需详细了解如何使用此新的内存检查器检查 JavaScript ArrayBuffer 和 WebAssembly.Memory，请参阅相关文档。

Chromium 问题：1166577

“元素”面板中的新徽章设置窗格

现在，您可以通过元素面板中的徽章设置选择性地启用或停用徽章。使用此功能可在检查网页时自定义并专注于重要徽章。

在元素面板中，右键点击任意元素。从上下文菜单中选择徽章设置，徽章设置窗格随即显示在顶部。选中或取消选中任意复选框即可显示/隐藏徽章。

Chromium 问题：1066772

增强型图片预览，包含宽高比信息

元素面板中的图片预览现在会显示有关图片的更多信息，包括渲染大小、渲染宽高比、固有大小、固有宽高比和文件大小。

这些信息有助于您更好地了解图片，并在需要时进行优化。

点击预览图片时，您还可以在网络面板中查看图片宽高比信息。

Chromium 问题：1149832、1170656

新增了网络状况按钮，其中包含用于配置 Content-Encoding 的选项

在网络面板中添加了一个新的网络条件按钮。点击该标签页以打开网络状况标签页。

网络状况标签页中新增了 Accepted Content-Encodings 选项。配置它以测试服务器响应在不支持 gzip、brotli 或其他未来 Content-Encoding 的浏览器中是否正确编码。

Chromium 问题：1162042

“样式”窗格增强功能

用于在“样式”窗格中查看计算值的新快捷方式

现在，您可以右键点击样式窗格中的 CSS 属性，然后选择查看计算出的值，以查看计算出的 CSS 值。

Chromium 问题：1076198

支持 accent-color 关键字

“样式”窗格的自动补全界面现在可以检测到 accent-color CSS 关键字，这让 Web 开发者能够为元素生成的界面控件（例如复选框、单选按钮）指定强调色。

accent-color CSS 属性目前处于实验阶段。请启用 chrome://flags/#enable-experimental-web-platform-features 以进行测试。

Chromium 问题：1092093

使用颜色和图标对问题类型进行分类

问题标签页现在会将问题分为网页错误、即将发生的重大变更和可能的改进，以便更好地指示严重程度。您可以在控制台中点击问题数量按钮，打开问题标签页。

• 页面错误（红色）。对网页功能有直接影响的问题，例如未设置正确的 CORS 标头等。
• 即将发生的重大变更（黄色）。用于告知即将发生的 Web 平台不兼容变更的问题，这些变更可能会导致网页功能丢失（例如，警告即将发生的 CORS RFC 1918 变更）。
• 可能的改进（蓝色）。网页上可能存在改进空间，但目前不会影响网页的基本功能（例如无障碍功能问题）

Chromium 问题：1183241

删除 Trust Token

现在，您可以使用应用面板中信任令牌窗格中的新删除按钮来删除信任令牌。

Trust Token 是一种新的 API，可帮助打击欺诈行为并将机器人与真人区分开来，而无需进行被动跟踪。了解如何开始使用 Trust Token。

Chromium 问题：1126824

在帧详细信息视图中查看有关被屏蔽功能的详细信息

现在，您可以在框架详情视图的权限政策部分下查看有关被屏蔽功能的详细信息。

打开此演示页面。前往应用面板，然后选择一个框架。在权限政策部分中，滚动到已停用的功能属性。点击显示详细信息，查看功能被屏蔽的详细原因。点击每项政策旁边的图标，即可前往阻止相应功能的 iframe 或网络请求。

权限政策是一种 Web 平台 API，可让网站能够允许或阻止在其自己的框架或其嵌入的 iframe 中使用浏览器功能。

Chromium 问题：1158827

在“实验”设置中过滤实验

使用新的实验过滤条件更快地找到实验。例如，依次前往设置 > 实验，然后在过滤条件文本框中输入“对比度”，以过滤出包含“对比度”一词的所有实验。

缓存存储空间窗格中的新 Vary Header 列

使用缓存存储空间窗格中的新 Vary Header 列查看 Vary HTTP 响应标头。

Chromium 问题：1186049

“来源”面板改进

支持新的 JavaScript 功能

开发者工具现在支持新的 private brand check JavaScript 语言功能，也称为 #foo in obj。

此私有品牌检查功能扩展了 in 运算符，以支持对任何给定对象进行私有类字段测试。

在控制台和来源面板中试用一下。您还可以在调试器窗格下的“范围”部分检查私有字段。

Chromium 问题：11374

增强了对断点调试的支持

开发者工具现在可以正确地在多个脚本中设置断点。现代 JavaScript 打包器（例如 Webpack、Rollup）支持代码拆分功能 - 在某些情况下，一个共享组件可以包含在多个路由（代码拆分）中。

以前，开发者工具只能在一个原始位置设置断点。通过这项最新改进，开发者工具可以在所有相关位置正确设置断点。

Chromium 问题：1142705、979000、1180794

支持使用 [] 注释的悬停预览

开发者工具现在支持在源代码面板中使用 [] 表示法的 JavaScript 成员表达式上进行悬停预览。

Chromium 问题：1178305

改进了 HTML 文件的轮廓

开发者工具现在可以更好地支持 HTML 文件的轮廓。在来源面板中，打开一个 HTML 文件。您可以在 Mac 中使用键盘快捷键 Cmd + Shift + O 或在 Windows 中使用 Ctrl + Shift + O 切换代码轮廓。

在下例中，开发者工具现在可以在轮廓中正确列出所有函数。以前，开发者工具仅显示部分函数。

Chromium 问题：761019、1191465

用于 Wasm 调试的正确错误堆栈轨迹

开发者工具现在可以解析内嵌函数调用，并显示用于 Wasm 调试的正确错误堆栈轨迹。

之前，开发者工具仅在错误堆栈轨迹中显示通用的 Wasm 引用。

左侧的旧版 Chrome 不会在错误堆栈轨迹中显示来源位置（例如 dsquare），而右侧的新版 Chrome 会显示。

Chromium 问题：1189161

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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