开发者工具中的新功能 (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

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

按 Control+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单，然后运行 Clear Site Data 命令来清除与网页相关的所有数据，包括：Service Worker、localStorage、sessionStorage、IndexedDB、Web SQL、Cookie、缓存和应用缓存。

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

清除网站数据的功能已在应用 > 清除存储空间中提供了一段时间。Chrome 75 中的新功能是能够从命令菜单运行命令。

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

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

相关 Chromium 问题：#942503

查看所有 IndexedDB 数据库

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

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

图 6. 新行为。系统会显示演示数据库。

相关 Chromium 问题：#943770

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

假设您正在检查网络活动。您的网站使用文本压缩来减小资源传输大小。您想了解网页的资源在浏览器解压缩后的实际大小。以前，只有在使用大型请求行时才能获取此信息。现在，您只需将鼠标悬停在大小列上，即可访问此信息。

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

相关 Chromium 问题：#805429

断点窗格中的内嵌断点

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

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

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

图 8. 旧版行为。断点窗格中只有一个条目。

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

相关 Chromium 问题：#927961

IndexedDB 和缓存资源计数

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

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

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

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

Chrome 73 引入了检查模式下的详细提示。

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

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

图 12. 仅显示宽度和高度的极简提示。

相关 Chromium 问题：#948417

用于在“来源”面板编辑器中切换标签页缩进的设置

无障碍功能测试发现，编辑器中存在 Tab 键陷阱。键盘用户在通过 Tab 键进入编辑器后，无法再通过 Tab 键退出，因为 Tab 键用于缩进。如需替换默认行为并使用 Tab 键移动焦点，请依次启用设置 > 偏好设置 > 来源 > 启用 Tab 键移动焦点。

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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