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

Jecelyn Yeen

“性能”面板中弹出网页指标信息

将鼠标悬停在性能面板中的“网页指标”标记上，即可了解相应指标反映的是性能良好、需要改进还是不佳。

“网页指标”信息弹出式窗口

Chromium 问题：1147872

直观呈现 CSS 滚动贴靠

现在，您可以在 Elements 面板中切换 scroll-snap 标记以检查 CSS 滚动贴靠对齐情况。

CSS 滚动贴靠

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

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

Chromium 问题：862450

新的内存检查器

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

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

刷新页面。展开右侧 Debugger 窗格中的 Scope 部分。请注意 buffer 值旁边的新图标。点击该图标即可显示 Memory Inspector。

查看相关文档，详细了解如何使用以下新的内存检查器检查 JavaScript ArrayBuffer 和 WebAssembly.Memory。

内存检查器

Chromium 问题：1166577

“元素”面板中的新标记设置窗格

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

“元素”面板中的标记设置窗格

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

Chromium 问题：1066772

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

现在，元素面板中的图片预览会显示图片的更多信息：呈现尺寸、呈现宽高比、固有尺寸、固有宽高比和文件大小。

这些信息有助于您更好地了解您的图片，并在需要时采用优化措施。

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

您也可以在网络面板中查看图片宽高比信息，当您点击预览图片时，也会看到这些信息。

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

Chromium 问题：1149832、1170656

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

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

Network Conditions 标签页中新增了 Accepted Content-Encodings 选项。请对其进行配置，以测试服务器响应在不支持 gzip、brotli 或其他未来 Content-Encoding 的浏览器中是否编码正确。

包含用于配置 Content-Encoding 的选项的“New Network conditions”按钮

Chromium 问题：1162042

“Styles”窗格的增强功能

新增快捷方式，用于在“Styles”窗格中查看计算值

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

新增快捷方式，用于查看计算值

Chromium 问题：1076198

支持 accent-color 关键字

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

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

accent-color

Chromium 问题：1092093

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

现在，问题标签页会将问题分为以下几类：网页错误、即将进行的重大更改以及可能的改进措施，以便更准确地指示严重程度。您可以点击控制台中的问题计数按钮来打开问题标签页。

  • 网页错误（红色）。会对网页功能产生直接影响的问题，例如未设置正确的 CORS 标头等。
  • 即将发生的重大更改（黄色）。指出网络平台即将进行、不兼容的更改可能会导致页面功能无法使用的问题（例如，有关即将进行的 CORS RFC 1918 更改的警告）。
  • 可能的改进（蓝色）。网页有望改进，但目前不会影响网页的基本功能（例如无障碍功能问题）

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

Chromium 问题：1183241

删除信任令牌

现在，您可以在 Application（应用）面板下的 Trust token（信任令牌）窗格中点击新的“Delete”（删除）按钮来删除信任令牌。

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

删除信任令牌

Chromium 问题：1126824

在“帧详情”视图中查看被屏蔽的功能的详情

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

打开此演示页面。转到 Application 面板并选择一个帧。在权限政策部分，滚动到已停用的功能属性。点击显示详细信息，详细了解此功能被屏蔽的原因。点击每项政策旁边的图标，即可找到阻止该功能的 iframe 或网络请求。

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

“帧详情”视图中已屏蔽的功能

Chromium 问题：1158827

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

利用新的实验过滤条件更快速地查找实验。例如，转到设置 >在实验中，在过滤条件文本框中输入“对比度”即可过滤出包含“对比度”一词的所有实验。

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

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

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

Vary Header 列

Chromium 问题：1186049

来源面板改进

支持新 JavaScript 功能

开发者工具现在支持新的自有品牌检查 JavaScript 语言功能，即 #foo in obj。

此非公开品牌检查功能扩展了 in 运算符，以支持针对任何指定对象的专用类字段测试。

不妨在 Console 和 Sources 面板中试用一下。您也可以在 调试程序 窗格下的 Scope 部分中检查不公开字段。

JavaScript 私有品牌检查

Chromium 问题：11374

增强了对断点调试的支持

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

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

Chromium 问题：1142705、979000、1180794

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

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

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

Chromium 问题：1178305

改进了 HTML 文件的大纲

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

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

改进了 HTML 文件的大纲

Chromium 问题：761019、1191465

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

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

以前，DevTools 只会在错误堆栈轨迹中显示常规 Wasm 引用。

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

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

Chromium 问题：1189161

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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