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

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

// Utilization 2: Arguments
// 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.

  • Vibration API

    Most of the new APIs offered to us by browser distributors are extra focused towards the cell person than the desktop person.  A kind of easy APIs the Vibration API.  The Vibration API permits builders to direct the gadget, utilizing JavaScript, to vibrate in…

  • Write Better JavaScript with Promises

    You’ve got most likely heard the discuss across the water cooler about how guarantees are the longer term. All the cool children are utilizing them, however you do not see what makes them so particular. Cannot you simply use a callback? What is the large deal? On this article, we’ll…

  • HTML5 download Attribute

    I are inclined to get caught up on the JavaScript aspect of the HTML5 revolution, and may you blame me?  HTML5 provides us superior “large” stuff like WebSockets, Internet Employees, Historical past, Storage and little helpers just like the Component classList assortment.  There are, nevertheless, smaller options in…

  • Create a Dojo-Powered WordPress Website View


Leave a Reply

Your email address will not be published.