Monitor Events and Function Calls via Console

Regardless of having labored on the very advanced Firefox for plenty of years, I am going to at all times love plain outdated console.log debugging. Logging can present an audit path as occasions occur and textual content you’ll be able to share with others. Do you know that chrome offers monitorEvents and monitor so that you could get a log every time an occasion happens or perform known as?

Monitor Occasions

Cross a component and a sequence of occasions to monitorEvents to get a console log when the occasion occurs:

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

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

You possibly can move an array of occasions to hear for a number of occasions. The logged occasion represents the identical occasion you’d see when you manually known as addEventListener.

Monitor Perform Calls

The monitor methodology permits you to hear for calls on a particular perform:

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

// Utilization 1: Primary name
myFn()
// perform myFn known as

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

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

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