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

Jecelyn Yeen

Web Vitals 信息会在“效果”面板中弹出

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

网页指标信息弹出式窗口

Chromium 问题：1147872

直观呈现 CSS scroll-snap

现在，您可以在 Elements 面板中切换 scroll-snap 标记，以检查 CSS 滚动捕获对齐方式。

CSS scroll-snap

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

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

Chromium 问题：862450

新的内存检查器

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

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

刷新页面。展开右侧调试程序窗格中的作用域部分。请注意 buffer 值旁边的新图标。点击它即可显示内存检查器。

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

内存检查器

Chromium 问题：1166577

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

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

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

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

Chromium 问题：1066772

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

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

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

包含宽高比信息的图片预览

当您点击预览图片时，网络面板中也会显示图片宽高比信息。

“网络”面板中的图片宽高比信息

Chromium 问题：1149832、1170656

新增了“网络条件”按钮，其中包含用于配置 Content-Encoding 的选项

网络面板中新增了“网络条件”按钮。点击该数据流以打开网络状况标签页。

网络条件标签页中新增了接受的内容编码选项。配置该测试以便在不支持 gzip、brotli 或其他未来 Content-Encoding 的浏览器中测试服务器响应是否正确编码。

包含用于配置 Content-Encoding 的选项的新网络条件按钮

Chromium 问题：1162042

增强了“样式”窗格

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

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

用于查看计算得出值的新快捷键

Chromium 问题：1076198

支持 accent-color 关键字

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

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

accent-color

Chromium 问题：1092093

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

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

  • 网页错误（红色）。对网页功能有直接影响的问题，例如未设置正确的 CORS 标头等。
  • 即将发生的破坏性变更（黄色）。指出 Web 平台即将发生不兼容的更改，可能会导致网页功能受损的问题（例如，警告即将发生的 CORS RFC 1918 更改）。
  • 可能的改进建议（蓝色）。网页上有潜在的改进空间，但目前不会影响网页的基本功能（例如无障碍问题）

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

Chromium 问题：1183241

删除信任令牌

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

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

删除信任令牌

Chromium 问题：1126824

在“帧详情”视图中查看有关已屏蔽功能的详细信息

现在，您可以在“框架详情”视图的权限政策部分下详细了解被屏蔽的功能。

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

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

帧详情视图中被屏蔽的功能

Chromium 问题：1158827

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

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

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

“缓存存储”窗格中新增了 Vary Header 列

使用 Cache Storage 窗格中的新 Vary Header 列查看 Vary HTTP 响应标头。

“Vary Header”列

Chromium 问题：1186049

“来源”面板改进

支持新的 JavaScript 功能

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

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

您可以在控制台和来源面板中试用此功能。您还可以在 debugger 窗格下的 Scope 部分中检查私有字段。

JavaScript 私有品牌检查

Chromium 问题：11374

增强了对断点调试的支持

DevTools 现在可以在多个脚本中正确设置断点。新型 JavaScript 捆绑程序（例如 Webpack、Rollup）支持代码拆分功能 - 在某些情况下，一个共享组件可以包含在多个路由（代码拆分）中。

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

Chromium 问题：1142705、979000、1180794

支持使用 [] 表示法进行悬停预览

现在，DevTools 支持在 Sources 面板中对使用 [] 表示法的 JavaScript 成员表达式进行悬停预览。

支持使用“[]”符号的悬停预览

Chromium 问题：1178305

改进了 HTML 文件的轮廓

现在，开发者工具对 HTML 文件的轮廓支持更完善。在 Sources（来源）面板中，打开一个 HTML 文件。您可以使用键盘快捷键在 Mac 上按 Cmd + Shift + O，在 Windows 上按 Ctrl + Shift + O 来切换代码大纲。

在以下示例中，DevTools 现在会在大纲中正确列出所有函数。以前，DevTools 仅显示部分函数。

改进了 HTML 文件的轮廓

Chromium 问题：761019、1191465

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

现在，DevTools 可以解析内嵌函数调用，并显示适当的 Wasm 调试错误堆栈轨迹。

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

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

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

Chromium 问题：1189161

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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