A-A+

10月中旬即将发布的谷歌chrome 70开发者工具中的新功能(一)

2018年10月15日 浏览器 暂无评论

Chrome 70中DevTools的新功能和主要变化包括:

  • 控制台中的实时表达式。
  • 在Eager Evaluation期间突出显示DOM节点。
  • 性能面板优化。
  • 更可靠的调试。
  • 从命令菜单启用网络限制。
  • 自动完成条件断点。
  • 突破AudioContext事件。
  • 使用ndb调试Node.js应用程序。

控制台中的实时表达式

当您想要实时监控其值时,将Live Expression固定到控制台的顶部。

  1. 单击创建实时表达式 Live Expression UI打开。

 

2.键入要监视的表达式。
 

3.单击Live Expression UI外部以保存表达式。
 

实时表达式值每250毫秒更新一次。
 

在Eager Evaluation期间突出显示DOM节点

在控制台中键入一个计算结果为DOM节点的表达式,然后Eager Evaluation会 会在viewport中高亮该节点。
注意:高亮的节点仅在您键入时更新。它不会按根据定时器来更新。例如,如果键入 document.activeElement,跟踪焦点中的元素,然后在页面中切换选项卡,则DevTools仍将高亮最初输入表达式时处于活动状态的节点。
 

由于当前表达式求值为某个节点,因此该节点在视口中高亮,

以下是您可能会发现有用的一些表达式:

  • document.activeElement 用于高亮当前具有焦点的节点。
  • document.querySelector(s)用于高亮任意节点,其中s是CSS选择器。这相当于将鼠标悬停在DOM树中的节点上。
  • $0 用于突出显示DOM树中当前选择的任何节点。
  • $0.parentElement 突出显示当前所选节点的父节点。

 
未完待续...
 

标签:

给我留言

Copyright © 前端面试题 保留所有权利.   Theme  Ality 桂ICP备17012235号-1

用户登录