Friday, September 30, 2022
HomeSoftware DevelopmentMonitor Occasions and Perform Calls through Console

Monitor Occasions and Perform Calls through Console


Regardless of having labored on the very complicated Firefox for various years, I will at all times 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 offers monitorEvents and monitor with the intention to get a log every time an occasion happens or operate is named?

Monitor Occasions

Cross a component and a collection 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 may move an array of occasions to hear for a number of occasions. The logged occasion represents the identical occasion you’d see should you manually known as addEventListener.

Monitor Perform Calls

The monitor methodology lets you hear 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 view 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.

Website performance monitoring
Website performance monitoring
Website performance monitoring
Website performance monitoring
  • CSS Filters

    CSS Filters

    CSS filter help lately landed inside WebKit nightlies. CSS filters present a technique for modifying the rendering of a fundamental DOM factor, picture, or video. CSS filters enable for blurring, warping, and modifying the colour depth of parts. Let’s have…

  • Write Simple, Elegant and Maintainable Media Queries with Sass
  • Fixing sIFR Printing with CSS and MooTools

    Fixing sIFR Printing with CSS and MooTools

    Whereas I am not an enormous sIFR advocate I can perceive its attract. A buyer lately requested us to implement sIFR on their web site however I bumped into an issue: the sIFR headings would not print as a result of they have been Flash objects. Here is how one can repair…

  • prefers-color-scheme: CSS Media Query

    prefers-color-scheme: CSS Media Question

    One machine and app function I’ve come to understand is the power to alter between mild and darkish modes. In case you’ve ever executed late evening coding or studying, you understand how superb a darkish theme may be for stopping eye pressure and the complications that end result.


RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular