Chrome 操作指南——入门篇（十五）monitor

前言

用 vue 的 watch 属性的小伙伴应该就很熟悉监听这个概念，在 chrome 中，他以很贴心的给我们提供了两个方法，一个是monitor，一个是monitorEvents。这两个方法从事的也是监听相关的工作，不过 vue 中 watch 还是有点不同的，它可以监听我们的方法是否被调用，以及当前节点的事件。在某些情况下，对于我们的调试工作还是很有帮助的，下面我们就来看看这两个方法是如何使用的把。

monitor

• monitor：ƒ monitor(function) { [Command Line API] }。可以监听任何你传入的方法，当方法被执行时，会在console控制台中打印出来。包括调用的函数名，以及给相应函数传递的参数。

我们先声明一个info实例，构造它的name 和 age 属性。并给他添加getName 和 getInfo两个方法，在getInfo内部调用 getName 方法。然后我们在通过monitor监听getName方法。看看会发生什么。

class Info {  constructor(name, age) {    this.name = name;    this.age = age;  }  getName(){  return `我是${this.name}。`  }  getInfo() {    return this.getName() + `我今年${this.age}岁`;  }}

我们可以看到，我们监听了monitor(getName)方法，每次直接或间接调用的时候，都会在console中输出日志。这样就可以避免写很多console.log()了。

monitorEvents

• monitorEvents：ƒ monitorEvents(object, [types]) { [Command Line API] }。可以用来监听 dom 节点的click、mouse等等。打印mouseEvent。

monitorEvents($$('.hot-refresh-text')[0], 'click')

我们监听了换一换的点击事件，当每次点击的时候，都会打印mouseEvent实例。当然我们也监听change、blur以及mouse等等。打开你的大脑，开发有趣的功能把。