Chrome 70-71 Live Expression 及

chrome浏览器是世界上最适合开发人员使用的浏览器的，没有之一。

Live Expression

从 chrome70起，我们可以在控制台上方可以放一个动态表达式，用于实时监控它的值。

1. 点击 "Create Live Expression" 眼睛图标，打开动态表达式界面。

image.png

2. 输入要监控的表达式，比如查看当前的时间戳，输入 Date.now()
3. 会发现当前时间戳会一直变动。也就是表示式被重新计算了，频率是250毫秒。

下面是一些有用的表达式：

• document.activeElement 高亮当前focus的node
• document.querySelector(s) 高亮任意node，参数s是css选择器表达式，相当于在hover这个node。
• $0 高亮当前所选中的node
• $0.parentElement 高亮当前所选中的node的父节点

Store DOM nodes as global variables

我们可以把页面上的某元素节点作为全局变量。

1. 比如当前页面有一个按钮，我们审核该元素，右键选择 "store as global variable"

image.png

2. console面板中会显示该元素的引用名称，一般是 temp1 temp2。
3. 在console中输入 monitorEvents(temp1) 会监视并打印出该元素的所有事件。
4. 这个你可以在按钮上点击，移动，甚至按键，会发现一系列的mouse, click等事件
5. 使用 unmonitorEvents(temp1) 停止记录事件。
6. 使用 monitorEvents(temp1, ['mouse', 'focus']) 只记录某类型的事件。可以填 mouse, key, click, touch和control等。

参考：
https://developers.google.com/web/updates/2018/08/devtools
https://developers.google.com/web/updates/2018/10/devtools#bonus
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference