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

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

此页面的视频版本

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

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

旧的自动补全行为。

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

新的自动补全行为。

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

相关 Chromium 问题:#931145

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

Control+Shift+PCommand+Shift+P(Mac)打开“命令”菜单,然后运行清除网站数据命令,以清除与该网页相关的所有数据,包括:服务工件localStoragesessionStorageIndexedDBWeb SQLCookie缓存应用缓存

“清除网站数据”命令。

图 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 窗格中获得自己的条目。

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

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

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

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

相关的 Chromium 问题:#927961

IndexedDB 和缓存资源数

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

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 版用作默认开发浏览器。通过这些预览版渠道,您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API,并帮助您在用户发现问题之前发现网站上的问题!

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。