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

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

此网页的视频版本

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

某些 CSS 属性(例如 filter)接受函数作为值。例如,filter: blur(1px) 会向节点添加 1 像素的模糊处理。在自动填充 filter 等属性时,开发者工具现在会使用有意义的值填充该属性,以便您预览该值将在节点上发生的更改类型。

旧的自动补全行为。

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

新的自动补全行为。

图 2. 新的自动补全行为。开发者工具正在自动完成为 filter: blur(1px),且变化在视口中可见。

相关的 Chromium 问题:#931145

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

Ctrl + Shift + PCommand + Shift + P (Mac) 打开“命令菜单”,然后运行清除网站数据命令,清除与该网页相关的所有数据,包括:Service WorkerlocalStoragesessionStorageIndexedDBWeb SQLWeb SQL、缓存、Web SQL。

“清除网站数据”命令

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

您已经可以通过应用 > 清空存储空间清除网站数据了。Chrome 75 中的新功能可以从命令菜单运行该命令。

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

“Application”标签页,其中“Clear Storage”处于选中状态。

图 4. Application > Clear Storage

相关的 Chromium 问题:#942503

查看所有 IndexedDB 数据库

以前,Application > IndexedDB 仅允许您从主源检查 IndexedDB 数据库。例如,如果您的网页上有一个 <iframe>,并且该 <iframe> 正在使用 IndexedDB,您将无法查看其数据库。从 Chrome 75 开始,开发者工具会显示所有源的 IndexedDB 数据库。

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

图 5. 旧行为。此页面嵌入了使用 IndexedDB 的演示,但看不到数据库。

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

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

相关的 Chromium 问题:#943770

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

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

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

图 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 和缓存资源计数

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

IndexedDB 数据库中的条目总数。

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

相关的 Chromium 问题:#941197#930773#930865

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

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

详细的提示。

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

您现在可以依次前往 Settings > Preferences > Elements > Show Detail Inspect Tools 停用这些详细提示。

极简的提示。

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

相关的 Chromium 问题:#948417

“Sources”面板编辑器中的制表符缩进设置

无障碍功能测试表明,编辑器中有一个标签页陷阱。当键盘用户通过 Tab 键进入编辑器后,他们便无法从 Tab 键中退出,因为 Tab 键用于缩进。如需替换默认行为并使用 Tab 移动焦点,请依次前往 Settings > Preferences > Sources > Enable Tab Moves Focus

近期围绕让开发者工具界面本身更便于键盘导航方面做出了大量工作。如需了解更多信息,请查看 Rob 的使用辅助技术浏览 Chrome 开发者工具

下载预览渠道

您可以考虑将 Chrome Canary 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

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 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

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