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.
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 Higher JavaScript with Guarantees
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 obtain 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…
Source_link