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

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

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

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

Chromium 问题:1147872

直观呈现 CSS 滚动贴靠

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

CSS 滚动贴靠

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

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

Chromium 问题:862450

新的内存检查器

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

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

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

查看相关文档,详细了解如何使用以下新的内存检查器检查 JavaScript ArrayBufferWebAssembly.Memory

内存检查器

Chromium 问题:1166577

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

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

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

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

Chromium 问题:1066772

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

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

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

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

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

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

Chromium 问题:11498321170656

包含用于配置 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

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

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

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

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

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

Chromium 问题:1158827

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

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

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

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

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

Vary Header 列

Chromium 问题:1186049

来源面板改进

支持新 JavaScript 功能

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

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

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

JavaScript 私有品牌检查

Chromium 问题:11374

增强了对断点调试的支持

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

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

Chromium 问题:11427059790001180794

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

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

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

Chromium 问题:1178305

改进了 HTML 文件的大纲

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

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

 改进了 HTML 文件的大纲

Chromium 问题:7610191191465

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

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

以前,DevTools 仅在错误堆栈轨迹中显示常规 Wasm 引用。

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

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

Chromium 问题:1189161

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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