在我们调试 Javascript 的代码时, 对象方法 作为经常被我们调试的对象,所以这里介绍关于 对象方法 的调试技巧。

# 1. queryObjects (对象查询)方法

class Person {
    constructor(name, role) {
        this.name = name;
        this.role = role;
    }
}

const jack_ma = new Person('Jack Ma', 'Dad')
const CEOS = [
    new Person('Pony Ma', 'CEO'),
    new Person('Richard LIU', 'CEO'),
]
1
2
3
4
5
6
7
8
9
10
11
12

假如我们有这样一段代码,我们在里面定义了一些对象。

在代码执行的 某个特定的时刻 + 特定的执行上下文 有哪些对象呢?

DevTools 里的 queryObjects 函数可以展示这些信息。

# 2. monitor 监控

每当一个被 monitor 的方法执行时, console 控制台 会打印当期被调用的 函数名 以及 参数

例子

  function sum(x, y) {
      return x + y;
  }
  monitor(sum);
1
2
3
4

我们可以少写很多 console.logs !

敲黑板

执行 unmonitor() 可以停止对某一个函数的监控

# 3. monitorEvents 事件监控

在上文中,我们讨论了用 monitor 方法来监听函数,其实还可以使用名为 monitorEvents 的方法,对 events 做一样的事情:

当指定对象上发生指定事件之一时,事件对象将记录到控制台。

不光是单个事件,甚至是事件数组或事件集合的一般事件类型:

监视窗口对象上的所有调整大小事件:

monitorEvents(window, "resize");
1

你可以同时对 resize 还有 scroll 事件进行监听:

monitorEvents(window, ["resize", "scroll"])
1

指定一种事件类型进行监听:

类型 事件
mouse "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
key "keydown", "keyup", "keypress", "textInput"
touch "touchstart", "touchmove", "touchend", "touchcancel"
control "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

给当前选中的输入框,加上键盘事件的监听:

monitorEvents($0, "key");
1

微信扫码或搜索: 前端恶霸

在公众号对话框,发送

关注期间 无限制 浏览本站全部内容

内容包括 「Chrome 调试技巧」(持续更新),以及「React 学习指北」(即将上线)

为什么我需要关注?
加入读者交流群 扫描二维码回复 Chrome
Last Updated: 6/30/2020, 12:36:00 PM