Javascript: how to debug keyboard events

Question

Imagine a web application that uses custom keyboard event handlers that can fire a bubbling event - or capture events.
Is there a way (e.g. Firefox / Firebug addon) to debug every keystroke / keyboard event , something like:

• display of event type and all attributes
• track which javascript method was called
• in the case of event bubbles that were called by other methods

To clarify my question: I don’t know which methods the handlers exist and where they are defined - this is what I am trying to figure out.

Answer 1

You can try visualizing the vents with the Firebug + Eventbug extension .

For a general overview of keyboard events in different browsers, try the following: http://unixpapa.com/js/key.html

Answer 2

In IE, you can use the debugger; keyword debugger; . Not sure about the convenience of the x-browser:

 function sayHello() { debugger; // will break here and launch script debugging in IE alert('hello world'); } 

In the context of your task:

 function someKeyPress(e) { debugger; // inspect e.keyCode ... etc } 

I believe this is the most efficient debugging method, but again I spend a lot of time in IE. Many people are comfortable with Firebug, but I find it cumbersome and much less intuitive than the IE debugger. The IE debugger provides easier monitoring of clocks and expressions, and also provides interactive reflection hints (such as the VS debugger).

Also, in your question “track which method was called”, the call stack is very responsive and easily tracks back / up.

UPDATE:

Here's a script to place traps and debug events at the bottom of each page, in IE:

 <script type="text/javascript"> function wrapIfHandled(el, evt) { if (el && evt && el['on' + evt]) { el['_on' + evt] = el['on' + evt]; el['on' + evt] = function (e) { foo(e, el['_on' + evt]); }; } } function wrapAll() { var allEl = document.getElementsByTagName("*"); for (var i = 0; i < allEl.length; i++) { wrapIfHandled(allEl[i], 'click'); // wrapIfHandled(allEl[i], other event names <keyup, keydown, etc> } } function foo(e, d) { debugger; d(e); } wrapAll(); </script> 

Answer 3

I do not know any extensions for this purpose. But you can write handlers for key events, and then print the appropriate output to the javascript console. You can also discard traces. Firebug has a built-in tracking function: console.trace() . You can google with js trace keywords to find some trace tools.

This page is a good example for handling keyboard events.