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

Kayce Basques

Chrome 71 中的 Chrome DevTools 的新功能和重大更改包括：

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

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

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

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

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

将 DOM 节点存储为全局变量

要将 DOM 节点存储为全局变量，请在控制台中运行一个计算结果为节点的表达式， 右键点击该结果，然后选择存储为全局变量。

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

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

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

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

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

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

如果您想诊断同事的网络日志，可以将网络请求导出到 HAR 文件中所述。

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

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

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

现在，当您导出 HAR 文件时，开发者工具会在 HAR 中包含启动器和优先级信息 文件。当您将 HAR 文件重新导入开发者工具时，Initiator 和 Priority 列会 现在已填充。

_initiator 字段提供更多背景信息，帮助您了解请求资源的原因。这个 映射到“Requests”表格中的 Initiator 列。

“发起者”列。

图 9. “发起者”列

您也可以按住 Shift 键并将鼠标悬停在请求上，以查看请求的发起者和 依赖项

查看启动器和依赖项。

图 10. 查看启动器和依赖项

_priority 字段用于指明浏览器分配给资源的优先级。这会映射到 “请求”表格中的 Priority 列（默认情况下处于隐藏状态）。

“优先级”列。

图 11. “优先级”列

右键点击“Request”表格的标题，然后选择 Priority，以显示 Priority。 列。

如何显示“优先级”列。

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

从主菜单访问命令菜单

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

命令菜单。

图 13. 命令菜单

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

从主菜单打开命令菜单。

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

画中画断点

画中画是一种新的实验性 API，可让页面制作浮动视频 窗口。

在 Event（事件）中，选中 enterpictureinpicture、leavepictureinpicture 和 resize 复选框 监听器断点窗格。 DevTools 会在处理程序的第一行暂停。

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

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

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

假设在聚焦于某个按钮并按 R、E、D 后，您想要为其周围添加红色边框， 但您不知道要向哪些事件添加监听器。使用 monitorEvents() 记录所有 元素事件发送到控制台。

  1. 获取对节点的引用。

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

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

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

    将节点传递给 monitoringEvents()。

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

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

    控制台中的节点事件。

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

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

unmonitorEvents(temp1);

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

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

mouse 类型会告知开发者工具记录所有与鼠标相关的事件，例如 mousedown 和 click。 其他受支持的类型为 key、touch 和 control。

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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