Chrome Developer Tools – monitorEvents

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:

mouse key touch control

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”

Tags: ,

14 Responses to “Chrome Developer Tools – monitorEvents”

  1. Paul Irish Says:

    Here’s the source of monitorEvents:
    http://code.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/inspector/InjectedScriptSource.js&exact_package=chromium&q=monitorevents%20lang:%5Ejavascript$&type=cs&l=698

    Which translates to…

    * If the second argument is ‘mouse’, you’ll get all “mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel” events
    * If the second argument is ‘key’, you’ll get all “keydown”, “keyup”, “keypress”, “textInput” events
    * If the second argument is ‘touch’, you’ll get all “touchstart”, “touchmove”, “touchend”, “touchcancel” events. (See emulate touch events in devtools settings!!)
    * If the second argument is ‘control’, you’ll get all “resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset” events.
    * 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” .

    :)

  2. Brian Says:

    Thanks Paul!
    Always more accurate to see the actual source to figure out support than just wild speculation :). I actually think I had tried to find this before but had limited my search to the front-end/ directory.

    Up until now I have been using this link to view inspector source: http://trac.webkit.org/browser/trunk/Source/WebCore/inspector. But it always bothered me that I couldn’t search (for instances this these) – that code search is awesome. I will bookmark http://code.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/inspector/front-end/

  3. Johnny Says:

    Awesome, thank you.

  4. Tony Says:

    Good find.

    FYI: You can say “I ran” or “I have run” but you can’t say “I have ran” without sounding weird.

  5. Aaron Frost Says:

    Brian, this is a great share! Thank you for doing the ground work here and sharing it out.

    I didn’t know about either the $0 var that is created when you inspect an obj OR the monitorEvents/unmonitorEvents methods. Now I can detach a little from console.log.

  6. Brian Says:

    Aaron,
    Thanks! If you want more tips like these, check out some of the videos Paul Irish has made (where I learned about many of the devtools features). Watch this one first: http://www.youtube.com/watch?v=nOEw9iiopwI – it is definitely worth the 5 minutes. And I’ll keep posting tips here as I find them!

  7. Magento addon Says:

    Magento addon…

    [...]Chrome Developer Tools – monitorEvents – Brian Grinstead[...]…

  8. Вся правда о Chrome (и не только) Web Inspector. Часть 1 Says:

    [...] monitorEvents (англ.) — Немного о monitorEvents [...]

  9. 23 Marzo 2013 alle 09:27 Says:

    23 Marzo 2013 alle 09:27…

    Chrome Developer Tools – monitorEvents – Brian Grinstead…

  10. 使用chrome调试工具来监听事件 « serendipity的技术小宅 Says:

    [...] http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents [...]

  11. Leander Says:

    I can’t get monitorEvents to work. It says monitorEvents isn’t defined.

  12. Brian Says:

    Leander,
    You can only call monitorEvents from within the console. If you try to call it from your program you will get the “monitorEvents is not defined” error.

  13. edson Says:

    thanks a lot bro

  14. Chrome Developer Tools – monitorEvents | Web4Devs.com Says:

    […] Source […]

Leave a Reply

Posting Code: Use html such as <pre lang='javascript'></pre>. See all supported languages.

*