I have been playing with the Chrome Developer Tools lately. Here is a cool feature I didn’t know about.
There are many times I have run some code in the console simply to bind to an event and simply log the result.
$("body").bind("click mousedown", function(e) {
console.log(e);
});There is a built in alternative called monitorEvents. Here is a quick demo on how to use it:
Inspect an element (see screenshot). Now that it has been inspected, there is a $0 variable available in the console.
Instead of that extra bind, you can just type this into the console:
monitorEvents($0, 'mouse')
Which, if you have the body selected in the Elements panel, is equivalent to typing:
monitorEvents(document.body, 'mouse')
OK, now that you can see all these events in the console and you have tracked down your issue, you probably want them to stop! Luckily, there is an unmonitorEvents function to do this.
unmonitorEvents(document.body)
You can also use ‘key’ instead of ‘mouse’ if you are tracking key events. There are actually a number of second parameters, but the support between Firebug and Devtools varies.
Possible Arguments For Firebug’s monitorEvents
Via the Firebug command line API
composition contextmenu drag focus form key load mouse mutation paint scroll text ui xul
Possible Arguments For DevTools monitorEvents
Thanks to Paul Irish dropping by in the comments and linking to the source, we now know all the officially supported DevTools keywords:
Map of Events for DevTools monitorEvents:
mouse: “mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
key: “keydown”, “keyup”, “keypress”, “textInput”
touch: “touchstart”, “touchmove”, “touchend”, “touchcancel”
control: “resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”
no arguments: all of the above + “load”, “unload”, “abort”, “error”, “select”, “change”, “submit”, “reset”, “focus”, “blur”, “resize”, “scroll”, “search”, “devicemotion”, “deviceorientation”
