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

Kayce Basques

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

此页面的视频版本

自动填充 CSS 函数时的有意义的预设值

某些 CSS 属性（例如 filter）会将函数用作值。例如，filter: blur(1px) 会向节点添加 1 像素的模糊处理。现在，在自动补全 filter 等属性时，DevTools 会使用有意义的值填充该属性，以便您预览该值对节点有何影响。

旧的自动补全行为。

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

新的自动补全行为。

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

相关的 Chromium 问题：#931145

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

按 Control+Shift+P 或 Command+Shift+P（Mac）打开“命令”菜单，然后运行清除网站数据命令，以清除与该网页相关的所有数据，包括：服务工件、localStorage、sessionStorage、IndexedDB、Web SQL、Cookie、缓存和应用缓存。

清除网站数据命令。

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

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

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

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

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

相关 Chromium 问题：#942503

查看所有 IndexedDB 数据库

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

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

图 5. 旧行为。该页面嵌入了一个使用 IndexedDB 的演示，但看不到任何数据库。

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

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

相关 Chromium 问题：#943770

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

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

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

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

相关 Chromium 问题：#805429

断点窗格中的内嵌断点

假设您将代码行断点添加到以下代码行：

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

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

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

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

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

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

相关的 Chromium 问题：#927961

IndexedDB 和缓存资源数

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

IndexedDB 数据库中的条目总数。

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

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

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

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

详细的提示。

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

现在，您可以前往设置 > 偏好设置 > 元素 > 显示详细的“检查”提示，停用这些详细提示。

最小提示。

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

相关 Chromium 问题：#948417

用于在“Sources”面板编辑器中切换制表符缩进的设置

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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