开发者工具中的新功能 (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) 打开命令菜单，然后运行 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 开始，开发者工具会显示所有源的 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. 显示颜色、字体、外边距和对比度的详细提示。

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

极简提示。

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

相关 Chromium 问题：#948417

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

无障碍功能测试显示，编辑器中存在标签页陷阱。当键盘用户通过 Tab 键进入 Editor 后，他们无法按 Tab 键退出该编辑器，因为 Tab 键用于缩进。如需替换默认行为并使用 Tab 键移动焦点，请依次选择 Settings > Preferences > Sources > Enable Tab Moves Focus。

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 浏览器 111

Chrome 浏览器 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 入门指南

Chrome 浏览器 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59