此页面由 Cloud Translation API 翻译。

开发者工具的新变化 (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

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

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

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

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

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

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

Chromium 问题：1149832、1170656

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

网络面板中新增了一个网络状况按钮。点击该条目以打开网络状况标签页。

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

“New network conditions”（新建网络条件）按钮，包含用于配置 Content-Encoding 的选项

Chromium 问题：1162042

“样式”窗格增强功能

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

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

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

Chromium 问题：1076198

支持 `accent-color` 关键字

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

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

accent-color

Chromium 问题：1092093

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

现在，问题标签页会将问题分类为网页错误、即将进行的破坏性更改以及可能的改进，以便更好地指明严重程度。在控制台中点击问题数按钮，即可打开问题标签页。

网页错误（红色）。会对网页功能产生直接影响的问题，例如未正确设置正确的 CORS 标头等。
即将发生的重大变更（黄色）。表明网络平台即将发生不兼容的变更，可能会导致网页功能丢失的问题（例如，警告即将实施 CORS RFC 1918 变更）。
可能的改进（蓝色）。可能会改进网页，但目前不影响网页的基本功能（例如无障碍功能问题）

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

Chromium 问题：1183241

删除信任令牌

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

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

删除信任令牌

Chromium 问题：1126824

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

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

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

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

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

Chromium 问题：1158827

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

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

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

“Cache storage”窗格中新增了 `Vary Header` 列

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

Vary 标题列

Chromium 问题：1186049

“来源”面板的改进

支持新的 JavaScript 功能

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

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

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

Chromium 问题：11374

增强了对断点调试的支持

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

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

Chromium 问题：1142705、979000、1180794

支持采用 `[]` 表示法的悬停预览

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

支持带有“[]”表示法的悬停预览

Chromium 问题：1178305

改进的 HTML 文件大纲

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

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

改进的 HTML 文件大纲

Chromium 问题：761019、1191465

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

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

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

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

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

Chromium 问题：1189161

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。