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

Kayce Basques

Chrome 71 中 Chrome 开发者工具的新功能和重大变更包括：

• 将鼠标悬停在实时表达式上以突出显示 DOM 节点
• 将 DOM 节点存储为全局变量
• HAR 导入和导出中现已提供发起方和优先级信息
• 从主菜单访问命令菜单
• 画中画断点
• （额外提示）在控制台中运行 monitorEvents() 以监控元素的事件触发情况

请继续阅读，或观看本页面的视频版本：

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

当实时表达式评估为 DOM 节点时，请将鼠标悬停在实时表达式结果上，以在视口中突出显示该节点。

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

将 DOM 节点存储为全局变量

如需将 DOM 节点存储为全局变量，请在控制台中运行一个可求值为节点的表达式，然后右键点击结果，并选择存储为全局变量。

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

或者，在 DOM Tree 中右键点击相应节点，然后选择 Store as global variable。

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

HAR 导入和导出现在包含发起者和优先级信息

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

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

要将文件重新导入“网络”面板，只需对其进行拖放操作。

现在，当您导出 HAR 文件时，DevTools 会在 HAR 文件中添加发起者和优先级信息。当您将 HAR 文件重新导入开发者工具时，Initiator 和 Priority 列会自动填充。

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

图 9. “发起者”列

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

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

_priority 字段表示浏览器为资源分配的优先级。这会映射到“请求”表中的优先级列，该列默认处于隐藏状态。

图 11. “优先级”列

右键点击“请求”表格的表头，然后选择优先级以显示优先级列。

图 12. 如何显示“优先级”列

从主菜单访问命令菜单

使用命令菜单快速访问 DevTools 面板、标签页和功能。

图 13. 命令菜单

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

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

画中画断点

画中画是一项新的实验性 API，可让网页在桌面上创建浮动视频窗口。

启用 Event Listener Breakpoints 窗格中的 enterpictureinpicture、leavepictureinpicture 和 resize 复选框，以便在任何画中画事件触发时暂停。DevTools 会在处理程序的第一行暂停。

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

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

假设您希望在将按钮聚焦并按 R、E、D 后，为该按钮添加红色边框，但您不知道要向哪些事件添加监听器。使用 monitorEvents() 可将元素的所有事件记录到控制台。

1. 获取对节点的引用。

   

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

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

   

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

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

   

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

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

unmonitorEvents(temp1);

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

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

mouse 类型会指示 DevTools 记录所有与鼠标相关的事件，例如 mousedown 和 click。其他支持的类型包括 key、touch 和 control。

如需了解您可以从控制台中调用的其他实用函数，请参阅命令行参考文档。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 您可以在 crbug.com 上向我们提交反馈和功能请求。
• 在 DevTools 中，依次选择 more_vert More options > Help > Report a DevTools issue 以报告 DevTools 问题。
• 向 @ChromeDevTools 发送推文。
• 在 “开发者工具的新变化”YouTube 视频或 “开发者工具提示”YouTube 视频中留言。

开发者工具的新变化

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