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

在 DevTools 中自定义键盘快捷键

现在,您可以在开发者工具中为喜爱的命令自定义键盘快捷键。

依次前往设置 > 快捷键,将鼠标悬停在某个命令上,然后点击修改按钮(铅笔图标)以自定义键盘快捷键。您还可以创建和弦(也称为多按键快捷键)。

在 DevTools 中自定义键盘快捷键。

Chromium 问题:1335274174309

使用键盘快捷键切换浅色主题和深色主题

配置键盘快捷键,以便轻松切换浅色主题和深色主题。默认情况下,此操作不会映射到任何键盘快捷键。

使用键盘快捷键切换浅色主题和深色主题。

Chromium 问题:12803981226363

在内存检查器中突出显示 C/C++ 对象

内存检查器会突出显示 C/C++ 内存对象的所有字节。

在周围的 WebAssembly 内存中识别对象的字节是一项难题。您必须知道对象的大小,并从对象的开头开始统计字节数。

借助此功能,您可以将这些内存区分开来,并将其与周围内存区分开来。如需详细了解这些变更,请参阅扩展 Memory Inspector 以进行 C/C++ 调试

在内存检查器中突出显示 C/C++ 对象。

Chromium 问题:1336568

支持 HAR 导入的完整发起者信息

现在,HAR 导入功能支持完整的发起者信息。以前,网络面板在导入期间仅显示部分发起者信息。

发起者信息有助于开发者跟踪网络请求的来源并识别与网络相关的问题。

支持 HAR 导入的完整发起者信息。

Chromium 问题:1343185

Enter 后开始 DOM 搜索

现在,您可以停用即输即搜设置,以便在按 Enter 键后始终启动 DOM 搜索。

元素面板中,使用 CtrlCommand + F 切换搜索栏。当您在搜索文本框中输入查询时,DOM 树会跳转到第一个匹配元素并默认将其突出显示。

对于用户(尤其是始终使用长搜索查询的测试人员),这种行为并不理想。当您输入长搜索查询(例如 //div[@id="example"])时,DOM 树可能会跳转多次。此行为会产生不必要的动作。

DOM 搜索。

依次前往设置 > 偏好设置,然后停用边输入边搜索。经过此项更改,只有在您按 Enter 键后,系统才会开始搜索。

“即输即搜”设置。

Chromium 问题:1344526

align-content CSS flexbox 属性显示 startend 图标

Styles 窗格中,使用 display: flexdisplay: inline-flex 修改 CSS 类中的 align-content 属性。startend 会在自动补全下拉菜单中显示,并带有图标。

align-content Flexbox 属性。

Chromium 问题:1139945

其他亮点

  • 控制台边栏中显示正确的消息数。以前,清除控制台消息时,计数不会刷新。(1343311)

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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