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

Chrome 71 中的 Chrome 开发者工具将推出以下新功能和重大变更:

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

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

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

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

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

将 DOM 节点存储为全局变量

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

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

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

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

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

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

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

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

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

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

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

现在,当您导出 HAR 文件时,DevTools 会在 HAR 文件中添加发起者和优先级信息。将 HAR 文件导回 DevTools 后,系统现在会填充 InitiatorPriority 列。

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

“发起者”列。

图 9. “发起者”列

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

查看发起者和依赖项。

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

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

“优先级”列。

图 11. “优先级”列

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

如何显示“优先级”列。

图 12. 如何显示优先级

从主菜单访问命令菜单

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

命令菜单。

图 13. 命令菜单

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

从主菜单打开命令菜单。

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

画中画断点

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

“事件监听器断点”窗格中启用 enterpictureinpictureleavepictureinpictureresize 复选框,以便在任何画中画事件触发时暂停。DevTools 会在处理程序的第一行暂停。

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

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

(额外提示)在控制台中运行 monitorEvents() 以监控元素的事件触发情况

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

  1. 获取对节点的引用。

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

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

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

    将节点传递给 monitorEvents()。

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

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

    控制台中的节点事件。

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

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

unmonitorEvents(temp1);

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

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

mouse 类型会指示 DevTools 记录所有与鼠标相关的事件,例如 mousedownclick。其他支持的类型包括 keytouchcontrol

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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