如何通过控制台监控事件和函数调用

尽管我已经在非常复杂的Firefox上工作了好几年，但我总是喜欢普通的console.log 调试。 日志可以在事件发生时提供审计线索，并且可以与他人分享文本。 你知道chrome提供了monitorEvents 和monitor ，这样你就可以在每次事件发生或函数被调用时得到一个日志。

监控事件

将一个元素和一系列的事件传递给monitorEvents ，当事件发生时，可以得到一个控制台日志。

// Monitor any clicks within the window
monitorEvents(window, 'click')

// Monitor for keyup and keydown events on the body
monitorEvents(document.body, ['keyup', 'keydown'])

你可以传递一个事件数组来监听多个事件。 记录的event 代表了你手动调用addEventListener 所看到的相同事件。

监视功能的调用

monitor 方法允许你监听对一个特定函数的调用：

// Define a sample function
function myFn() { }
// Monitor it
monitor(myFn)

// Usage 1: Basic call
myFn()
// function myFn called

// Usage 2: Arguments
myFn(1)
// function myFn called with arguments: 1

我非常喜欢你可以所提供的参数，这对于检查来说是非常好的。

我通常选择日志点而不是在代码中嵌入console 语句，但monitor 和monitorEvents 提供了两者的替代方案。