JavaScript Experts, How Do I Debug This Event Handlers Problem?

[Ray]

Hello JavaScript experts,

I've been racking my brains for 2 hours and I still haven't figured
out this problem.

Basically, I have this page (an IE-only page), with a lot of
javascript files behind it, most of it not written by me. The problem
with this page is: once I use IE6 to load it, moving the mouse pointer
over the page will cause IE CPU usage to shoot up to 100%. Typing into
edit boxes a lot of characters quickly will also choke the CPU (and
the characters won't show up immediately, it took a few seconds before
the chars I type appear within the text box).

So, obviously something is catching keyboard and mouse related events
somewhere and doing useless, but intensive, processing.

And my guess is that since moving the mouse _anywhere_ within the page
(as long as it is within the browser window) jacks the CPU usage up to
100%, it's probably handled at the document level.

My question is, how do I find out the culprit? I tried this:

* Find all files with the text "document.attachEvent", I found them,
commented them out, still have the same problem. (Also, actually the
lines I commented out trap onkeyup and onmousedown, so it doesn't
explain the "moving-mouse-uses-100%-CPU" problem).

* There doesn't seem to be any API for finding out all the event
handlers attached to an element?

Thanks in advance for any pointers,
Ray

 

[wisestpotato]

The event could be being trapped on either the document or the body
element. Have you checked for events attached to both? Have you
searched for event handlers created using the "element.onmousemove
= ..." syntax?

You say that the page is IE-only, does that mean that loading it in
either Opera or Firefox and using their debugging facilities is not an
option? Unfortunately, trying to debug javascript in IE6 is a
frustrating experience.

wp

 

[Ray]

The event could be being trapped on either the document or the body
element. Have you checked for events attached to both? Have you
searched for event handlers created using the "element.onmousemove
= ..." syntax?

Let me give that a try... the use of Behaviour.js complicates things
actually, although I guess I can search using onmousemove, let me
try.

You say that the page is IE-only, does that mean that loading it in
either Opera or Firefox and using their debugging facilities is not an
option? Unfortunately, trying to debug javascript in IE6 is a
frustrating experience.

wp

Yes, IE-only as in when I opened it in Firefox (I wanted to debug this
using Venkman, alas, I couldn't), the page becomes really screwed up,
things that usually work don't work anymore, etc.

Thanks!
Ray

 

[Ray]

The event could be being trapped on either the document or the body
element. Have you checked for events attached to both? Have you
searched for event handlers created using the "element.onmousemove
= ..." syntax?

Hmmm, that's really strange. I didn't find onmousemove that is
relevant. I tried moving my mouse pointer over the part that doesn't
have any element (so it's basically either the body or document)--CPU
immediately shoots up to 100%. Really strange.

 

[VK]

I tried moving my mouse pointer over the part that doesn't
have any element (so it's basically either the body or document)--CPU
immediately shoots up to 100%. Really strange.

That can be some library implementing paranoidal DOM event model: so
onload it makes all elements as event consumers "just in case" with
custom event dispatcher atop. So on each mouse move the event gets
distributed to N consumers where maybe only one or two are actually
supposed to do anything on this event. That is a speculation from my
side based on what I've seen on practice.

Comment out all <script> elements and then uncomment one by one
checking the performance after that. That should help to identify the
actual "abuser". Then give us a link to the abusing library.

 

[Mister Joe]

Hello JavaScript experts,

I've been racking my brains for 2 hours and I still haven't figured
out this problem.

Basically, I have this page (an IE-only page), with a lot of
javascript files behind it, most of it not written by me. The problem
with this page is: once I use IE6 to load it, moving the mouse pointer
over the page will cause IE CPU usage to shoot up to 100%. Typing into
edit boxes a lot of characters quickly will also choke the CPU (and
the characters won't show up immediately, it took a few seconds before
the chars I type appear within the text box).

So, obviously something is catching keyboard and mouse related events
somewhere and doing useless, but intensive, processing.

And my guess is that since moving the mouse _anywhere_ within the page
(as long as it is within the browser window) jacks the CPU usage up to
100%, it's probably handled at the document level.

My question is, how do I find out the culprit? I tried this:

* Find all files with the text "document.attachEvent", I found them,
commented them out, still have the same problem. (Also, actually the
lines I commented out trap onkeyup and onmousedown, so it doesn't
explain the "moving-mouse-uses-100%-CPU" problem).

* There doesn't seem to be any API for finding out all the event
handlers attached to an element?

Thanks in advance for any pointers,
Ray

http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx
http://www.jonathanboutelle.com/mt/archives/2006/01/howto_debug_jav.html

Check the two links above. I think the debugger is pretty weak but it
may help you out some. Also could you be more specific about things
not working in ff. When you check the error console do you see signs
that certain functions are not recognized? If you do then check your
js source code b/c those may be the functions that are causing the
problem.