How to trace javascript events like onclick onblur?

Question

Is there a way to debug/trace every javascript event in Internet Explorer 7?

I have a bug that prevents scrolling after text-selecting, and I have no idea which event or action creates the bug. I really want to see which events are being triggered when I move the mouse for example.

it's too much work to rewire the source and i kinda hoped there was something like a sniffer which shows me all the events that are triggered.

Answer 1

It's basic, but you could stick alerts or document.write calls in when you trigger something.

Answer 2

You might want to try Visual Studio 2008 and its feature to debug javascript.

If the problem is not specific to IE7 but also occurs in Firefox, then another good way to debug javascript is Firefox and the FireBug add-on which has a javascript debugger. Then you can also put console.log statements in the javascript which you can then see the output of in the Console Window in FireBug, instead of using alerts which sometimes mess up the event chain.

Answer 3

Not sure on the exact code (Been a while since I wrote complex Javascript), but you could enumerate through all of the controls on the form and attach an event that outputs something when the event is triggered.

You could even use anonymous functions to wrap the necessary information for identifying which event was triggering.

Answer 4

The obvious way would be to set up some alerts for various events something like:

element.onclick = function () { alert('Click event'); }

Otherwise you have a less intrusive option of inserting your alerts into the dom somewhere.

But, seriously consider using a library like jQuery to implement your functionality. Lots of the cross-browser issues are solved problems and you don't need to solve them again. I am not sure exactly of the functionality you are trying to achieve but there are most probably plenty of scrolling and selecting plugins for jQuery you could use.

Answer 5

Also nice thing is TraceTool, it's easy to use tracing app with JavaScript support.

Answer 6

One thing I like to do is create a bind function in JS (like what you can find in the prototype library) specifically for events, so that it passes the "event" object along to the bound function. Now, if you were to do this, you could simply throw in a trace call that will be invoked for every handler that uses it. And then remove it when it's not needed. One place. Easy.

However, regardless of how you get the trace statement to be called, you still want to see it. The best strategy is to have a separate pane or window handing the trace calls. Dojo Toolkit has a built-in console that runs in IE, and there's other similar things out there. The classic way of doing it is to create a new window and document.write to it.

• I recommend attaching a date-time to each trace. Helped me considerably in the past.
• debugging/alerts usually won't help you because it interrupts the normal event flow.

Answer 7

Matt Berseth has something that may be the kinda thing you're looking for:

http://mattberseth.com/blog/2007/12/debugging_aspnet_ajax_applicat.html

It's based on the yahoo YUI logger at:

http://developer.yahoo.com/yui/logger/

Answer 8

Borkdude said:

You might want to try Visual Studio 2008 and its feature to debug javascript.

I've been hacking around event handling multiple times, and in my opinion, although classical stepping debuggers are useful to track long code runs, they're not good in tracking events. Imagine listening to mouse move events and breaking into another application on each event... So in this case, I'd strongly advise logging.

If the problem is not specific to IE7 but also occurs in Firefox, then another good way to debug javascript is Firefox and the FireBug add-on which has a javascript debugger.

And there's also FireBug Lite for IE. I didn't have a chance to use it, but it exists. :-) The downside of it is that it doesn't a fully-fledged debugger, but it has a window.console object, which is exactly what you need.

Answer 9

Why not loop through all elements on the page which have an onXYZ function defined and then add the trace to them:

var allElements = document.all; // is this right? anyway you get the idea

for (var i in allElements) {
    if (typeof allElements[i].onblur == "function") {
        var oldFunc = allElements[i].onblur;
        allElements[i].onblur = function() {
             alert("onblur called");
             oldFunc();
        };
    }
}

Answer 10

@[nickf] - I'm pretty sure document.all is an IE specific extension.

You need to attach an event handler, there's no way to just 'watch' the events. A framework like jQuery of Microsoft AJAX library will easily give you methods to add the event handlers. jQuery is nice because of its selector framework.

Then I use FireBug (firefox extension) and put in a break point. I find FireBug is a lot easier to set up and tear down than VS 2008.

Answer 11

My suggestion is, use FireFox together with FireBug and use the built-in Debug/Trace objects. They are a charm.