Chrome 71开发工具更新

鼠标指向Live表达式将高亮标出DOM节点

当Live 表达式的结果指向一个DOM节点时,鼠标指向(hover)此表达式将自动高亮DOM节点。

将DOM节点存为全局变量

要想将DOM节点存为全局变量,可以在控制台运行一个结果为此节点的表达式,右键点击结果,弹出菜单里选择“存为全局变量” (store as global variable)。或者右键点击DOM数中的节点并在弹出菜单里选择“存为全局变量” (store as global variable)。

HAR导入导出

如果你想诊断网络日志,你可以把网络请求导出为HAR文件。
如果想把文件导入回网络面板,只需拖进去即可。
当你导出HAR文件时,开发者工具现在将增加触发者和优先级的列。
鼠标指向请求时按shift也可以看到触发者。

从主菜单访问命令窗口

点击主菜单(右上角的三个竖排的点)然后选择“运行命令” (Run command)

画中画断点

“画中画”(Picture-in-Picture)是一个新的外部API,它允许页面创建一个桌面上的浮动视频窗口。开发者工具可以添加“进入画中画”,“离开画中画”和“调整大小”三种断点。

在控制台运行monitorEvents()以查看一个元素的事件

  1. 取得节点的引用
  2. 把节点作为monitorEvents()的第一个参数
  3. 与节点互动时开发者工具将记录所有在此节点的事件在控制台中

本文翻译自:https://developers.google.com/web/updates/2018/10/devtools

发布了20 篇原创文章 · 获赞 9 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/time1812/article/details/85562530