monitorEvents
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.
mousecategory- If the second argument is
mouse, you’ll get allmousedown,mouseup,click,dblclick,mousemove,mouseover,mouseout,mousewheelevents. keycategory- If the second argument is
key, you’ll get allkeydown,keyup,keypress,textInpuevents. touchcategory- If the second argument is ‘touch’, you’ll get all
touchstart,touchmove,touchend,touchcancelevents. (See emulate touch events in devtools settings!) controlcategory- If the second argument is
control, you’ll get allresize,scroll,zoom,focus,blur,select,change,submit,resetevents. - [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
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