Monitor Events and Function Calls via Console

By  on  

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.

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    CSS Ellipsis Beginning of String

    I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to...

  • By
    MooTools onLoad SmoothScrolling

    SmoothScroll is a fantastic MooTools plugin but smooth scrolling only occurs when the anchor is on the same page. Making SmoothScroll work across pages is as easy as a few extra line of MooTools and a querystring variable. The MooTools / PHP Of course, this is a...

Discussion

  1. Oh my chickens, this is amazing!! I can’t tell you how many times I’ve tried to poke around in the Chrome dev tools sources and elements tab trying to find way to listen for events. This is going completely change everything!!

  2. Steve

    It needs to be noted that these are not (yet) universal methods, this only works in Chromium based browsers.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!