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

Live Expression ​

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

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

2. 输入要监控的表达式，比如查看当前的时间戳，输入 Date.now()
3. 会发现当前时间戳会一直变动。也就是表示式被重新计算了，Live Expression 的执行频率是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"

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/devtoolshttps://developers.google.com/web/updates/2018/10/devtools#bonushttps://developers.google.com/web/tools/chrome-devtools/console/command-line-reference