monitorEvents and monitor


monitorEvents() allows to observe events from the web browser console for Safari, Chrome and Edge. Firefox doesn´t support it. Events will be logged to the console.

You can do:

let main = document.querySelector('#main');
monitorEvents(main, 'click'); //log click events on #main
unmonitorEvents(main, 'click'); //stop logging click events on #main

monitorEvents(document.body); //log all events on the body
unmonitorEvents(document.body); //stop logging events on the body
monitorEvents(document.body, ['change', 'submit']); //log change and submit events on the body

Paul Irish pointed out, there are shortcuts for event categories. This is for Chrome Developer Tools in 2012, therefore I´m not sure if it works exactly in the same way for all browsers. A quick check with the mouse category for Safari indicated it could work the same for other browsers.

mouse category
If the second argument is mouse, you’ll get all mousedown, mouseup, click, dblclick, mousemove, mouseover, mouseout, mousewheel events.
key category
If the second argument is key, you’ll get all keydown, keyup, keypress, textInpu events.
touch category
If the second argument is ‘touch’, you’ll get all touchstart, touchmove, touchend, touchcancel events. (See emulate touch events in devtools settings!)
control category
If the second argument is control, you’ll get all resize, scroll, zoom, focus, blur, select, change, submit, reset events.
[no event type]
If you don’t define a second argument, you’ll get all of the above, plus… load, unload, abort, error, select, change, submit, reset, focus, blur, resize, scroll, search, devicemotion, deviceorientation.


monitor() allows to observe function calls from the web browser console for Chrome and Edge. Safari and Firefox do not support it.

You can do:

function myFn(); { } //sample function

monitor(myFn); //log function calls for myFn

myFn(); // function myFn called

myFn(1); // function myFn called with arguments: 1

unmonitor(myFn); //stop logging function calls for myFn