Monitor Occasions and Operate Calls by way of Console

Regardless of having labored on the very complicated Firefox for a variety of 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 possibly can share with others. Do you know that chrome supplies monitorEvents and monitor so as to get a log every time an occasion happens or operate is known as?

Monitor Occasions

Cross 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 in the event you manually known as addEventListener.

Monitor Operate Calls

The monitor methodology means that you can pay attention for calls on a selected operate:

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

// Utilization 1: Fundamental name
myFn()
// operate myFn known as

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

I actually like which you could the arguments supplied, which is nice for inspecting.

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