Chrome Live Expression

70版本添加的功能,今天刚刚注意到..

Chrome DevTools中的Live Expression可以用来实时监控某个表达式的值

点击图标出现输入框,输入Date.now(),输入完按Control+Enter(+Enter)或者点击输入框外的地方保存

可以看到一个不停变化的时间戳,Live Expression每250毫秒刷新

DOM节点相关的表达式:
document.activeElement:高亮当前获得焦点的元素,添加后可以点击页面中的输入框或者按tab键可以看到变化

document.querySelector(s):s为CSS选择器,高亮选择的节点,相当于在DOM Tree(注意并不是在页面中,不是显示了hover的样式)中hover这个节点

$0:高亮当前选中的节点,由这个也可以得到该节点相关的很多属性,比如父元素$0.parentElement

参考:https://developers.google.com/web/updates/2018/08/devtools#watch

Comments
Write a Comment