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

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

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

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

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

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

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

将 DOM 节点存储为全局变量

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

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

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

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

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

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

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

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

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

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

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

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

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

“发起者”列。

图 9. “发起者”列

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

查看启动器和依赖项。

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

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

“优先级”列。

图 11. “优先级”列

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

如何显示“优先级”列。

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

从主菜单访问命令菜单

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

命令菜单。

图 13. 命令菜单

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

从主菜单打开命令菜单。

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

画中画断点

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

Event(事件)中,选中 enterpictureinpictureleavepictureinpictureresize 复选框 监听器断点窗格。 DevTools 会在处理程序的第一行暂停。

“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开发者版Beta 版用作您的默认开发浏览器。通过这些预览渠道,您可以访问最新的开发者工具功能,测试先进的网络平台 API,并在用户之前发现您网站上的问题!

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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