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

Kayce Basques

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

此页面的视频版本

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

某些 CSS 属性（如 filter）接受函数来取值。例如：filter: blur(1px) 会向节点添加 1 像素的模糊效果。在自动填充 filter 等属性时，开发者工具现在会进行填充 属性，以便您预览该值会发生的更改 节点上

旧版自动补全行为。

图 1. 旧版自动补全行为。开发者工具会自动填充 filter: blur 且没有 更改在视口中是否可见

新的自动补全行为。

图 2. 新的自动补全行为。开发者工具会自动填充 filter: blur(1px) 和 相应更改在视口中是可见的

相关 Chromium 问题：#931145

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

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

清除网站数据命令。

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

可从应用程序 > 中清除网站数据清理存储空间。新的 功能。

如果不想删除所有网站数据，您可以控制系统从中删除哪些数据 应用 >清理存储空间。

“应用”显示“Clear Storage”已选择。

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

相关 Chromium 问题：#942503

查看所有 IndexedDB 数据库

以前是应用 >IndexedDB 仅允许您从以下位置检查 IndexedDB 数据库： 主要来源。例如，如果您的网页上有<iframe>，并且<iframe>使用的是 IndexedDB，您将无法查看其数据库。从 Chrome 75 开始，开发者工具显示 IndexedDB 所有源数据库。

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

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

新行为。演示的数据库可见。

图 6. 新行为。演示的数据库可见。

相关 Chromium 问题：#943770

将鼠标悬停在资源未压缩时的大小

假设您正在检查网络活动。您的网站会使用文本压缩功能来实现以下目的： 从而减少资源的传输大小您想要看看网页资源在 浏览器会将其解压缩以前，此信息只有在使用大型请求 行。现在，您可以将鼠标悬停在 Size 列上，以查看此信息。

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

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

相关 Chromium 问题：#805429

“Breakpoint”窗格中的内嵌断点

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

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

现在，开发者工具已经允许您指定它在断点处暂停的确切时间 如下所示：行开头、调用 document.querySelector('#dante') 之前，或者 然后再调用 addEventListener('click', logWarning)。如果你同时启用这 3 项功能 创建 3 个断点以前，您无法在 Breakpoints 窗格中管理 这 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. 显示颜色、字体、外边距和对比度的详细提示。

您现在可以在设置 > 中停用这些详细的提示。偏好设置 > Elements >显示详细检查提示。

极简提示。

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

相关 Chromium 问题：#948417

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

无障碍功能测试显示，编辑器中存在标签页陷阱。点击某个键盘后 当用户通过 Tab 键进入 Editor 时，他们无法退出该编辑器，因为 Tab 键之前 用于缩进。如需替换默认行为并使用 Tab 移动焦点，请启用 设置 >偏好设置 >来源 >启用标签页移动焦点。

最近，围绕如何让开发者工具界面本身更便于通过键盘导航进行了大量开发工作。 有关详情，请观看 Rob 的使用辅助技术浏览 Chrome 开发者工具。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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