Monitor Occasions and Perform Calls through Console

Regardless of having labored on the very complicated Firefox for numerous years, I will all the time love plain outdated console.log debugging. Logging can present an audit path as occasions occur and textual content you may share with others. Do you know that chrome offers monitorEvents and monitor to be able to get a log every time an occasion happens or perform is named?

Monitor Occasions

Move a component and a collection of occasions to monitorEvents to get a console log when the occasion occurs:

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

// Monitor for keyup and keydown occasions on the physique
monitorEvents(doc.physique, ['keyup', 'keydown'])

You possibly can cross an array of occasions to pay attention for a number of occasions. The logged occasion represents the identical occasion you’d see if you happen to manually referred to as addEventListener.

Monitor Perform Calls

The monitor methodology means that you can pay attention for calls on a particular perform:

// Outline a pattern perform
perform myFn() { }
// Monitor it
monitor(myFn)

// Utilization 1: Fundamental name
myFn()
// perform myFn referred to as

// Utilization 2: Arguments
myFn(1)
// perform myFn referred to as with arguments: 1

I actually like that you could view the arguments offered, which is nice for inspecting.

I normally go for logpoints as an alternative of embedding console statements in code, however monitor and monitorEvents present an alternative choice to each.