开发者工具中的新功能 (Chrome 75)

Kayce Basques

您好！以下是 Chrome 75 中 Chrome 开发者工具的新变化。

此页面的视频版本

自动补全 CSS 函数时提供有意义的预设值

某些 CSS 属性（如 filter）接受函数作为值。例如，filter: blur(1px) 会向节点添加 1 像素的模糊处理。在自动填充 filter 等属性时，开发者工具现在会使用有意义的值填充该属性，以便您可以预览节点上该值将发生的更改。

旧的自动补全行为。

图 1. 旧的自动补全行为。开发者工具会自动补全为 filter: blur，并且视口中没有任何变化。

新的自动补全行为。

图 2. 新的自动补全行为。DevTools 会自动补全为 filter: blur(1px)，并且该更改会显示在视口中。

相关的 Chromium 问题：#931145

通过命令菜单清除网站数据

按 Ctrl + Shift + P 或 Command + Shift + P (Mac) 打开命令菜单，然后运行 Clear Site Data 命令，以清除与页面相关的所有数据，包括：Service worker、localStorage、sessionStorage、IndexedDB、{Cache 、Web SQL。Web SQL

“清除网站数据”命令。

图 3. 清除网站数据命令。

我们已推出一段时间的应用 > 清除存储空间功能，可用于清除网站数据。Chrome 75 中新增了一项功能，即能够从“命令”菜单运行命令。

如果您不想删除所有网站数据，可以依次前往应用 > 清除存储空间，控制要删除的数据。

选择“清除存储空间”的“应用”标签页。

图 4. 应用 > 清除存储空间。

相关 Chromium 问题：#942503

查看所有 IndexedDB 数据库

以前，应用 > IndexedDB 仅允许您检查主来源的 IndexedDB 数据库。例如，如果您的网页上有 <iframe>，并且该 <iframe> 使用的是 IndexedDB，您将无法看到其数据库。从 Chrome 75 开始，DevTools 会显示所有来源的 IndexedDB 数据库。

旧行为。网页嵌入了使用 IndexedDB 的演示，但没有任何数据库可见。

图 5. 旧行为。网页嵌入了使用 IndexedDB 的演示，但没有任何数据库可见。

新行为。您可以看到演示版的数据库。

图 6. 新行为。您可以看到演示版的数据库。

相关 Chromium 问题：#943770

悬停时查看资源的未压缩大小

假设您要检查网络活动。您的网站使用文本压缩来缩减资源的传输大小。您想了解浏览器解压缩后的页面资源大小。以前，此信息仅在使用大型请求行时可用。现在，您只需将鼠标悬停在大小列上，即可查看此类信息。

将鼠标悬停在“大小”列上，查看资源的未压缩大小。

图 7. 将鼠标悬停在“大小”列上，查看资源的未压缩大小。

相关 Chromium 问题：#805429

断点窗格中的内嵌断点

假设您在以下代码行中添加了代码行断点：

document.querySelector('#dante').addEventListener('click', logWarning);

从前 DevTools 允许您指定在断点上应暂停的确切时间，例如：在行开头、在调用 document.querySelector('#dante') 之前或在调用 addEventListener('click', logWarning) 之前。如果您启用这 3 项，实际上就创建了 3 个断点。以前，您无法在断点窗格中单独管理这 3 个断点。从 Chrome 75 开始，每个内嵌断点都会在 Breakpoints 窗格中获得自己的条目。

旧行为。“Breakpoints”窗格中只有一个条目。

图 8. 旧行为。Breakpoints 窗格中只有 1 个条目。

新行为。Breakpoints 窗格中显示了 3 个条目。

图 9. 新行为。Breakpoints 窗格中有 3 个条目。

相关 Chromium 问题：#927961

IndexedDB 和 Cache 资源计数

IndexedDB 和 Cache 窗格现在会指示数据库或缓存中的资源总数。

IndexedDB 数据库中的条目总数。

图 10. IndexedDB 数据库中的条目总数。

相关的 Chromium 问题：#941197、#930773、#930865

用于停用详细检查提示的设置

Chrome 73 引入了在“检查”模式下显示详细提示。

详细的提示。

图 11. 显示颜色、字体、边距和对比度的详细提示。

您现在可以通过依次选择 Settings > Preferences > Elements > Show Detail Inspecttooltip 来停用这些详细提示。

最小提示。

图 12. 仅显示宽度和高度的最小提示。

相关 Chromium 问题：#948417

在“Sources”面板编辑器中切换标签页缩进的设置

无障碍功能测试发现，编辑器中存在标签页陷阱。键盘用户按 Tab 键进入编辑器后，就无法再按 Tab 键退出，因为 Tab 键用于缩进。如需替换默认行为并使用Tab 移动焦点，请依次前往 Settings > Preferences > Sources > Enable Tab Moves Focus 并启用该设置。

我们最近做了很多工作，以便让开发者工具界面本身更易于通过键盘进行导航。如需了解详情，请参阅 Rob 的使用辅助技术浏览 Chrome 开发者工具。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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