Despite having worked on the very complex Firefox for a number of years, I’ll always love plain old console.log debugging. Logging can provide an audit trail as events happen and text you can share with others. Did you know that chrome provides monitorEvents and monitor so that you can get a log each time an event occurs or function is called?

Monitor Events

Pass an element and a series of events to monitorEvents to get a console log when the event happens:

// Monitor any clicks within the window monitorEvents(window, 'click')  // Monitor for keyup and keydown events on the body monitorEvents(document.body, ['keyup', 'keydown']) 

You can pass an array of events to listen for multiple events. The logged event represents the same event you’d see if you manually called addEventListener.

Monitor Function Calls

The monitor method allows you to listen for calls on a specific function:

// Define a sample function function myFn() { } // Monitor it monitor(myFn)  // Usage 1: Basic call myFn() // function myFn called  // Usage 2: Arguments myFn(1) // function myFn called with arguments: 1 

I really like that you can view the arguments provided, which is great for inspecting.

I usually opt for logpoints instead of embedding console statements in code, but monitor and monitorEvents provide an alternative to both.

The post Monitor Events and Function Calls via Console appeared first on David Walsh Blog.

David Walsh Blog