10

Imagine a web application which uses custom keyboard event handlers which might do event bubbling - or event catching.
Is there a way (e.g. Firefox/Firebug addon) to debug each keystroke/keyboard event, something like:

  • displaying the event type and all attributes
  • trace which javascript method had been called
  • in case of event bubbling which further methods have been called

To clarify my question: I don't know which method handlers exist and where they are defined - this is what I am trying to find out.

Sнаđошƒаӽ
  • 16,753
  • 12
  • 73
  • 90
MRalwasser
  • 15,605
  • 15
  • 101
  • 147

3 Answers3

4

You could try to visualize the vents with the Firebug + Eventbug extension.

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

chiborg
  • 26,978
  • 14
  • 97
  • 115
1

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

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

In the context of your challenge:

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

I find this to be the most effective debugging technique, but then again I spend a lot of time in IE. Many folks are comfy with Firebug but I find it cumbersom and far less intuitive than IE's debugger. IE's debugger provides for easier watches and expression evaluation, and also provides interactive reflection based tooltips (like VS debugger).

Also, per your question "trace what method was called" - the call stack is very responsive and easy to follow back/up.

UPDATE:

Here's a script to place on the bottom of each page to trap and debug events, 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>
Sнаđошƒаӽ
  • 16,753
  • 12
  • 73
  • 90
Brian
  • 2,772
  • 15
  • 12
  • 1
    For this I must know which methods are used as event handlers - but this is what I am trying to find out. – MRalwasser Aug 16 '11 at 12:52
  • Can you provide a bit more detail about your issue? Do you not have access to the javascript code, the html/java/php/aspx page? Or both? Do you have access to any source code at all? – Brian Aug 16 '11 at 12:54
  • 2
    Yes, I have access to the source code. Imagine an old web application which defines event handlers per page individually and not in a general place. I have the problem that in some browsers at some pages, some keystrokes don't work properly (but there are no javascript errors). I need a tool to trace all keyboard events to be able to quickly see where the event is handled. – MRalwasser Aug 16 '11 at 12:56
  • Did my best to help you out - not sure how your site works and what you're using for event management, but if there's not a third party observer component in place the code should dwork. – Brian Aug 16 '11 at 14:00
0

I don't know any extensions for this purpose. But, you can write handlers for key events and then print appropriate output to the javascript console. Also you can dump traces too. Firebug has builtin trace functionality: console.trace(). You can google with js trace keywords to find some trace tools too.

This page is a good example to handle keyboard events.

useraged
  • 1,706
  • 17
  • 34
  • 2
    For this I must know where the key event handlers are defined. But this is exactly the reason for my question, I don't know which event handler methods are invoked. Imagine a very big and old software system - things could get difficult to find all of them. – MRalwasser Aug 16 '11 at 12:34