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

Chrome 71 中 Chrome 开发者工具即将提供的新功能和重大变更包括:

请继续阅读或观看此页面的视频版本:

将鼠标悬停在实时表达式上,以突出显示 DOM 节点

实时表达式的计算结果为 DOM 节点时,将鼠标悬停在实时表达式结果上,即可在视口中突出显示该节点。

将鼠标悬停在实时表达式结果上,在视口中突出显示该节点。

图 1. 将鼠标悬停在实时表达式结果上,以在视口中突出显示节点

将 DOM 节点存储为全局变量

如需将 DOM 节点存储为全局变量,请在控制台中运行计算结果为节点的表达式,右键点击结果,然后选择存储为全局变量

存储为控制台中的全局变量。

图 2. 在控制台中存储为全局变量

或者,右键点击DOM 树中的节点,然后选择存储为全局变量

作为全局变量存储在 DOM 树中。

图 3. 作为全局变量存储在 DOM 树中

HAR 导入和导出现在提供发起方和优先级信息

如果您想与同事一起诊断网络日志,可以将网络请求导出到 HAR 文件

将网络请求导出到 HAR 文件。

图 8. 将网络请求导出到 HAR 文件

若要将文件重新导入“网络”面板中,只需拖放该文件即可。

现在,当您导出 HAR 文件时,开发者工具会在 HAR 文件中包含发起者和优先级信息。当您将 HAR 文件重新导入开发者工具时,系统会填充 Initiator(发起方)和 Priority(优先级)列。

_initiator 字段提供了有关导致资源请求原因的更多背景信息。此列对应于“请求”表格中的“发起方”列。

“发起者”列。

图 9. “Initiator”(发起方)列

您还可以按住 Shift 并将鼠标指针悬停在请求上,以查看其发起者和依赖项。

查看发起者和依赖项。

图 10. 查看发起者和依赖项

_priority 字段指示浏览器为资源分配的优先级。此字段对应于“Requests”表格中的“Priority”列,该列默认处于隐藏状态。

“优先级”列。

图 11. “优先级”列

右键点击“Requests”表格的标题,然后选择 Priority(优先级)以显示 Priority(优先级)列。

如何显示“优先级”列。

图 12. 如何显示优先级

从主菜单访问命令菜单

使用命令菜单可以快速访问开发者工具面板、标签页和功能。

命令菜单。

图 13. 命令菜单

您现在可以从主菜单打开命令菜单。点击主菜单 主 按钮,然后选择 Run 命令

从主菜单打开命令菜单。

图 14. 从主菜单打开命令菜单

画中画断点

画中画是一种新的实验性 API,可让网页在桌面设备上创建悬浮视频窗口。

“事件监听器断点”窗格中启用 enterpictureinpictureleavepictureinpictureresize 复选框,以便在其中某个画中画事件触发时暂停。开发者工具会在处理程序的第一行暂停。

“Event Listener Breakpoints”窗格中的“画中画”事件。

图 16. “Event Listener Breakpoints”窗格中的画中画事件

(额外提示)在控制台中运行 monitoringEvents() 可以观察元素的事件触发

假设您在聚焦某个按钮并按下 RED 后,希望在该按钮周围添加红色边框,但您不知道要向哪些事件添加监听器。使用 monitorEvents() 将该元素的所有事件记录到控制台。

  1. 获取对节点的引用。

    使用“存储为全局变量”获取对节点的引用。

    图 17. 使用存储为全局变量获取对节点的引用

  2. 将节点作为第一个参数传递给 monitorEvents()

    将节点传递给 monitoringEvents()。

    图 18. 将节点传递给 monitorEvents()

  3. 与节点交互。DevTools 会将节点的所有事件记录到控制台。

    控制台中的节点事件。

    图 19. 控制台中的节点事件

调用 unmonitorEvents() 可停止将事件记录到控制台。

unmonitorEvents(temp1);

如果您只想监控某些事件或事件类型,请将数组作为第二个参数传递给 monitorEvents()

monitorEvents(temp1, ['mouse', 'focus']);

mouse 类型会告知开发者工具记录所有与鼠标相关的事件,例如 mousedownclick。其他受支持的类型为 keytouchcontrol

如需了解您可以从控制台调用的其他便捷函数,请参阅命令行参考

下载预览渠道

您可以考虑将 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